{"id":1666,"date":"2021-11-24T18:54:53","date_gmt":"2021-11-24T23:54:53","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=1666"},"modified":"2021-11-24T19:03:50","modified_gmt":"2021-11-25T00:03:50","slug":"style-tiles","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/design\/style-tiles\/","title":{"rendered":"Style Tiles"},"content":{"rendered":"\n<p><a rel=\"noreferrer noopener\" href=\"http:\/\/styletil.es\/\" target=\"_blank\">Style tiles<\/a> were created by Samantha Warren. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Style Tiles<\/h4>\n\n\n\n<p>The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you to have a discussion about the design with teammates, clients etc, in a quick way that is easy to change and iterate.<\/p>\n\n\n\n<p>Most style tiles include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Colors<\/li><li>Typography<\/li><li>Interface elements like buttons or title\/text\/image groups<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-twentytwentyone-image-frame\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"470\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-8.png\" alt=\"\" class=\"wp-image-997\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/03\/image-8.png 556w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-content\/uploads\/sites\/1879\/2021\/03\/image-8-300x254.png 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Templates<\/h2>\n\n\n\n<p>You are welcome to create your own Style Tile from scratch, but to save time you can also edit a template. There are a few different options for templates.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Original Photoshop Templates<\/h3>\n\n\n\n<p>Samantha Warren created a site, <a rel=\"noreferrer noopener\" href=\"http:\/\/styletil.es\/\" target=\"_blank\">http:\/\/styletil.es\/<\/a>, to explain, give examples and provide templates. On the home page there is a DOWNLOAD TEMPLATE button which will download a Photoshop template<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Miro Template<\/h3>\n\n\n\n<p>This is one I made and is what is used in the example image above. You will need to join the class team on Miro to be able to use the template.<\/p>\n\n\n\n<p>Template Link: <a rel=\"noreferrer noopener\" href=\"https:\/\/miro.com\/app\/dashboard\/?tpTemplate=o9J_lghHna4%3D&amp;isCustom=true&amp;invite_link_id=839906978185\" target=\"_blank\">https:\/\/miro.com\/app\/dashboard\/?tpTemplate=o9J_lghHna4%3D&amp;isCustom=true&amp;invite_link_id=839906978185<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CodePen Template<\/h3>\n\n\n\n<p>This is a template created on Codepen. Because it&#8217;s on CodePen, you will edit the HTML and CSS to change the template. A few tips on editing:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Fonts<\/strong>: I used Google Fonts for this. You can select your own web fonts (from Google or wherever) and replace line 1 in the CSS.<\/li><li>CSS Variables: these are used in lines 10-66 to set fonts, font sizes and colors. Changing the values of these variables is the quickest way to update the style tile. <ul><li>Try starting with changing the colors on lines 44-53 to see how this works.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Template Link: <a href=\"https:\/\/codepen.io\/profstein\/pen\/eYRLBYy\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/profstein\/pen\/eYRLBYy<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-codepen wp-block-embed-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Style Tile\" src=\"https:\/\/codepen.io\/profstein\/embed\/preview\/eYRLBYy?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=eYRLBYy#?secret=Ei4B4mn7Vo\" data-secret=\"Ei4B4mn7Vo\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Style tiles were created by Samantha Warren. Style Tiles The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you to have a discussion about the design with teammates, clients etc, in a quick way&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/topics\/design\/style-tiles\/\">Continue reading <span class=\"screen-reader-text\">Style Tiles<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[23,127],"tags":[78,174,173],"coauthors":[87],"class_list":["post-1666","post","type-post","status-publish","format-standard","hentry","category-design","category-plan","tag-brief","tag-plan","tag-style-tile","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>Style tiles were created by Samantha Warren. Style Tiles The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you to have a discussion about the design with teammates, clients etc, in a quick way that is easy to change and iterate. Most style tiles include: ColorsTypographyInterface elements like buttons or title\/text\/image groups Templates You are welcome to create your own Style Tile from scratch, but to save time you can also edit a template. There are a few different&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/topics\/design\/\" rel=\"category tag\">Design<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/category\/topics\/plan\/\" rel=\"category tag\">Plan<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"Style tiles were created by Samantha Warren. Style Tiles The purpose of these is to start to show the visual design elements are not in a wireframe without having to create a full-blown mockup of the site. This allows you to have a discussion about the design with teammates, clients etc, in a quick way&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/comments?post=1666"}],"version-history":[{"count":2,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1666\/revisions"}],"predecessor-version":[{"id":2137,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/posts\/1666\/revisions\/2137"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/media?parent=1666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/categories?post=1666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/tags?post=1666"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/wp-json\/wp\/v2\/coauthors?post=1666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}