reading assignment:
Typographic Web Design: : chapter 5
Chapter 5, Typographic Web Design
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. Contrast can be created in the following ways:
- size
- color
- space
- weight
- shape
Strong Vertical Lines:
A 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:
- alignment
- gutter
- continuation
- shape
Spacial Tension:
Even with a focal point and strong vertical lines, a layout can feel static.
Pay attention to the space around the elements.
- avoid the center
- create a sense of directions
- create unequal white spaces
- consider the z-axis
- consider the edges
exercise :
Create sketches of possible page layouts. Refer to chapter 5 for tips on creating focal point, strong vertical line and spatial tension.
- Create 15 layout sketches focusing on focal point with focal point being
1) image 2) title 3) poem
- Take your 5 best focal point sketches and create 3 of each improving a strong vertical line.
- Review your favorites to see if any of them create spacial tension. Improve on 3-5 of them.
- Make notes as you go. Which designs fail? Which are successful and why?
Take your three best designs and recreate them in your poem.indd file, using the full page. Carefully consider focal point, strong vertical line and spatial tension when designing.
page 1 : unformatted poem
page 2 : three display fonts: 72pt
page 3 : favorite display font with potential text fonts in three columns
page4 : images of your sketches (scan or shoot with your camera)
page 5-7 : three designs. Include your two images, poem, title and author with display and text font.
Add two more pages (8 & 9) and format your design for web. Size the page for mobile at 414x736px.
Save your file as layout.pdf in your unit1 folder and save remotely so we can review in class.
example