{"id":127,"date":"2014-08-25T12:47:03","date_gmt":"2014-08-25T12:47:03","guid":{"rendered":"http:\/\/art556.com\/?page_id=127"},"modified":"2014-08-25T12:47:03","modified_gmt":"2014-08-25T12:47:03","slug":"page-layout","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-1-fundamentals\/page-layout\/","title":{"rendered":"Page Layout"},"content":{"rendered":"<h3>reading assignment:<\/h3>\n<p class=\"p1\">Typographic Web Design:\u00a0 : chapter 5<\/p>\n<p class=\"p3\"><a href=\"http:\/\/art556.com\/chapter5.pdf\">Chapter 5, Typographic Web Design<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Repetition and Counterpoints<\/strong><br \/>\nText creates a horizontal rhythm. Break the monotony with counterpoints in the form of:<\/p>\n<ul>\n<li>focal point<\/li>\n<li>and strong vertical line.<\/li>\n<\/ul>\n<p><strong>Focal Point<\/strong><br \/>\nAn element that contrasts with the rest of the composition becomes a focal point.\u00a0<span style=\"line-height: 1.714285714; font-size: 1rem;\">Contrast can be created in the following ways:<\/span><\/p>\n<ul>\n<li>size<\/li>\n<li>color<\/li>\n<li>space<\/li>\n<li>weight<\/li>\n<li>shape<\/li>\n<\/ul>\n<p><strong>Strong Vertical Lines:<\/strong><br \/>\nA strong vertical line, acting as a counterpoint to the horizontal rhythm of the text, will make a layout more dynamic. Four methods of creating a strong vertical line are:<\/p>\n<ul>\n<li>alignment<\/li>\n<li>gutter<\/li>\n<li>continuation<\/li>\n<li>shape<\/li>\n<\/ul>\n<p><strong>Spacial Tension:<\/strong><br \/>\nEven with a focal point and strong vertical lines, a layout can feel static.<br \/>\nPay attention to the space around the elements.<\/p>\n<ul>\n<li>avoid the center<\/li>\n<li>create a sense of directions<\/li>\n<li>create unequal white spaces<\/li>\n<li>consider the z-axis<\/li>\n<li>consider the edges<\/li>\n<\/ul>\n<h2 class=\"p1\"><b>exercise :<\/b><\/h2>\n<p class=\"p6\"><span class=\"s1\"><strong>Create sketches of possible page layouts.<\/strong> Refer to chapter 5 for tips on creating focal point, strong vertical line and spatial tension.<\/span><\/p>\n<ul>\n<li>Create 15 layout sketches focusing on focal point with focal point being<br \/>\n1) image\u00a0 2) title\u00a0 3) poem\u00a0<span class=\"s2\"><br \/>\n<\/span><\/li>\n<li>Take your 5 best focal point sketches and create 3 of each improving a strong vertical line.<\/li>\n<li>Review your favorites to see if any of them create spacial tension. Improve on 3-5 of them.<\/li>\n<li>Make notes as you go. Which designs fail? Which are successful and why?<\/li>\n<\/ul>\n<p class=\"p3\"><strong>Take your three best designs and recreate them in your poem.indd file, using the full page.<\/strong> Carefully consider focal point, strong vertical line and spatial tension when designing.<\/p>\n<p class=\"p9\" style=\"padding-left: 30px;\">page 1 : unformatted poem<br \/>\npage 2 : three display fonts: 72pt<br \/>\npage 3 : favorite display font with potential text fonts in three columns<br \/>\npage4 : images of your sketches (scan or shoot with your camera)<br \/>\npage 5-7 : three designs. Include your two images, poem, title and author with display and text font.<\/p>\n<p><strong>Add two more pages (8 &amp; 9) and format your design for web. Size the page for mobile at 414x736px.<\/strong><\/p>\n<p class=\"p3\"><strong>Save your file as layout.pdf in your unit1 folder and save remotely so we can review in class.<\/strong><\/p>\n<h3 class=\"p3\">example<\/h3>\n<p class=\"p3\"><a href=\"http:\/\/art556.com\/unit1\/unit1_site_plan.pdf\">unit 1 site plan<\/a><\/p>\n<p class=\"p3\">\n","protected":false},"excerpt":{"rendered":"<p>reading assignment: Typographic Web Design:\u00a0 : chapter 5 Chapter 5, Typographic Web Design &nbsp; Repetition and Counterpoints Text creates a horizontal rhythm. Break the monotony with counterpoints in the form of: focal point and strong vertical line. Focal Point An element that contrasts with the rest of the composition becomes a focal point.\u00a0Contrast can be [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":22,"menu_order":80,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-127","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/127\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/22"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}