In a poorly designed layout, the reader doesn’t know where to look. If all of the elements on the page are treated the same, then the layout lacks organization. To fix this, and to strengthen your design, you need to create visual hierarchy within your layout.
STEP 1
Break content into three levels
LEVEL 1
This is the most important content, it should be immediately visible.
LEVEL 2
These elements are not as prominent as level one elements, but are visible enough to help establish a clear direction. For example, if level one is a headline, level two could be a subhead.
LEVEL 3
For a layout with a lot of text, level three is usually body copy, captions or other supporting content. Level three needs to be legible but can be significantly smaller than level one elements.
STEP 2
Use the following design principles to establish hierarchy in your layout
Proximity
Group elements that relate to each other closer together, and add distance between other grouped elements that do not relate. Correctly breaking the layout into groups and subgroups ensures that the flow of the piece looks natural and organized.
Repetition
Tie together similar elements by creating association and consistency. Repeating the same treatments on similar elements communicates that these elements are at the same level in the hierarchy.
Balance and White Space
A well-balanced design feels stable and looks polished. Keep an eye on your white space: if there is there too much white space in one area and another area looks cramped, redistribute your elements so that there is balance.
Spacing
Spacing elements evenly throughout the design is another way to polish your work. The Alignment tool in InDesign has a Distribute Spacing option where you can set the specific distance you want to apply between elements.
Alignment
Lining up elements creates order, stabilizes the layout and makes individual elements easier to identify. Create a grid to help with the placement of objects and to ensure everything is lined up.
InDesign Tip: If you’re pressed for time and don’t want to create a grid, use InDesign’s Align tool to line up your elements quickly.
Contrast
Making elements vastly different from each other is an easy way to establish a focal point; in doing so, you add variety to your layout which creates movement. The key is to have enough contrast in your piece to create a focal point, but if you go overboard, it’ll look chaotic. Here’s a tip: break your content down into three levels.
Ways to achieve contrast: difference in size, color, and weight, number of columns, typeface and placement are all easy ways to create contrast.
Typography Tip: When picking out typefaces, chose two fonts with large families; you can use the different styles to create LOTS of contrast within your type while having your layout look cohesive.
Case study: Schedule Magnet
LEVEL 1
(headline)
Contrast: largest text, positioned at the top
Proximity: Not grouped with other elements and set apart from other grouped elements
LEVEL 2
(calendar body)
Contrast: smaller text size than headline
Proximity: grouped with other events and dates and separated from headline
Alignment: set up on clear grid and split into four columns that are spaced evenly
Repetition: event names are split onto two lines, the location is directly below that, then the date, followed by the time are on the line below that. This makes the event name, location, time and date really easy to identify and makes for clear hierarchy
LEVEL 3
(footer/sidebar)
Contrast: set apart by using a different background
Contrast: type is inverted: blue instead of white so it clearly does not belong with the information that’s set in white
Proximity: moved to the edge, away from the grouped calendar information and headline
Alignment: information is left aligned to form a clear edge that acts as a dividing line between the calendar content
Hierarchy with typography
Use typography to further define hierarchy within the written content. I plan on making this a separate cheat sheet later on, but here’s something to get you started. Also check out this excellent article about type hierarchy by Frank Chimero on the Typekit Blog.
LEVEL 1
Type size: 12 pt.
Typestyle: Bold
Color contrast: High
LEVEL 2
Type size: 9 pt.
Typestyle: Book italic
Color contrast: High
LEVEL 3
Type size: 9 pt.
Typestyle: Book italic, book
Color contrast: 70% less
Check your work
Proximity: Does the grouping of information make sense?
Proximity: Is everything spaced consistently?
Alignment: Are elements aligned properly?
Balance and White Space: Is there awkward white space or could elements be distributed better?
Alignment: Is everything lined up on an invisible grid?
Repetition: Are similar elements treated consistently?
Contrast: Is there a clear focal point?
Contrast: Is there enough contrast between text elements or could it be pushed further?
Does the layout look organized and dynamic?
Schedule Magnet design by R.J. Lund and Shelley Henseler