{"id":3452,"date":"2024-04-27T13:48:19","date_gmt":"2024-04-27T17:48:19","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/?p=3452"},"modified":"2024-04-27T13:56:41","modified_gmt":"2024-04-27T17:56:41","slug":"style-tiles","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/style-tiles\/","title":{"rendered":"Style Tiles"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a rel=\"noreferrer noopener\" href=\"http:\/\/styletil.es\/\" target=\"_blank\">Style tiles<\/a>&nbsp;were created by Samantha Warren.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Style Tiles<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Most style tiles include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Colors<\/li>\n\n\n\n<li>Typography<\/li>\n\n\n\n<li>Interface elements like buttons or title\/text\/image groups<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"470\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-content\/uploads\/sites\/1441\/2021\/03\/image-8.png\" alt=\"screenshot of a style tile\" class=\"wp-image-997\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/2021\/03\/image-8.png 556w, https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-content\/uploads\/sites\/3596\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Samantha Warren created a site,&nbsp;<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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Link to View Template:\u00a0<a href=\"https:\/\/miro.com\/app\/board\/o9J_lP4UbkI=\/?share_link_id=443920822102\">https:\/\/miro.com\/app\/board\/o9J_lP4UbkI=\/?share_link_id=443920822102<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Contact Prof Stein to get an editable copy of the template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CodePen Template<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This is a template created on Codepen. Because it\u2019s 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\">\n<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>\n\n\n\n<li><strong>CSS Variables<\/strong>: these are used in lines 9-35 to set fonts, font sizes and lines 42\u201366 to set colors. Changing the values of these variables is the quickest way to update the style tile.\n<ul class=\"wp-block-list\">\n<li>Try starting with changing the colors on lines 44-\u201353 to see how this works.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Template Link:\u00a0<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<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"eYRLBYy\" data-user=\"profstein\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/eYRLBYy\">\n  Style Tile<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>Style tiles&nbsp;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&hellip;&nbsp;<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/style-tiles\/\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Style Tiles<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":997,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"openlab_post_visibility":"","footnotes":""},"categories":[32,43],"tags":[53,54],"class_list":["post-3452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-resource","tag-final-project","tag-style-tile"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/comments?post=3452"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3452\/revisions"}],"predecessor-version":[{"id":3455,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/posts\/3452\/revisions\/3455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/media\/997"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/media?parent=3452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/categories?post=3452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-sp24\/wp-json\/wp\/v2\/tags?post=3452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}