Hierarchy
As a page gets designed through a placement of visual elements, there needs to be an ordering system to help viewer make sense of the design. This ordering system is called hierarchy and it defines the level of activity and importance for every visual element and determines their sequence through the design. In other words, it is a road that our eye travels through when we look at the design.
The hierarchical development consists of a dominant and subordinate visual elements and no visual element is insignificant; each and every one contributes to communication of the message and it depends on complementing and contrasting of visual elements. If the design has a clear focal point which initiates viewers interaction with the design and then clear subordinate elements to support the focal point—the design maintains fixed attention of the eye. But if all visual elements demand equal attention, the eye is destructed and wonders around the page without any direction.
Hierarchy begins by rating visual elements by importance: what needs to be seen first, second, third, etc. Dominant elements will reside in a foreground while subordinate elements will activate the background in support of dominant elements.
Examples:
In the example below from no.parking design firm the hierarchy is clear and is supported by a set of consistent and reoccurring visual elements, such as text and pictures. It makes it easier for the viewer to recognize those elements of different pages creating comprehension – awareness of the ordering system and an easy access to primary, secondary and tertiary information.
There are a variety of tools or compositional factors available for designers to achieve hierarchy throughout the layout. The designer can you multiple factors to shape the page.
1. Contrast – visual differences and juxtaposed elements. Visual contrast between the elements makes them identifiable and comprehensible to the viewer.
2. Orientation and position – also foster contrast and distinctive hierarchy by commanding attention to a shifted positioning. for example, diagonal positioning of the text against predominantly horizontal distribution of the rest of the elements on the page).
3. Scale – scale relationships produce immediate contrast. Even though there is a lot of information on the spread below the different sizes and negative space surrounding the images leads your eye through the composition. Text becomes a focal point.
4. Quantity – can affect the overall hierarchy. Unnecessary elements can result in visual clutter and confuse the order of the presentation. However, sometimes the addition of elements can add to a visual impact and enhance the delivery of the message (as in example below).
5. Graphic Shapes and Linear Elements – when added to the composition they help to create dynamic visual effects. They are directional tools, they can aid navigation and prevent composition from being static. They can provide background for the composition as well as carry illustration and typography. For example, rules can frame typographic elements, provide direction and reinforce structure and composition and direct eye towards the visual elements, etc.
6. Depth, Dimension and Perspective – the use of perspective shifts the two-dimensional space into a three-dimensional representation and thus creates depth (because elements positioned in a perspective recede or move out towards the viewer).
7. Color – creates visual interest and emphasizes a specific elements of the design, content. It can be added to graphic shapes, linear elements, photos, and typography. It can be used to create rich backgrounds or be used to emphasize isolated areas of the design that need attention.
8. Typography – Because in desktop publishing text often is the most important element, it needs to be broken into levels of importance and then set to visually distinguish all typographic variables and clarify the order of presentation. The goal is to create consistency with enough visual contrast to distinguish between the levels of hierarchy. For example, a consistent treatment of headlines makes for an easy recognition of typographic organization. There are many levels to achieve the hierarchy — the simplest is to vary the side of the type to achieve an emphasis. Another one is to vary the type face families. Then you can combine color and orientation within text to distinguish within the hierarchy further.
9. Space – provides visual contrast and contributes to an effective ordering system. The empty compositional space brings the visual elements alive. Space is present in all compositions. It provides visual channel and direction for the eye. Visual elements can be grouped together with very limited space in-between to create a grouping and a focal point. The extra space around visual elements creates a pint of isolation, thus emphasizing that element. Be careful with space because too much of it and too equal on all sides makes the composition static; too much space does not activate space and the elements placed into it tend to fade to a background.
10. Repetition – used to emphasize the subject. Used with slight variation and creatively, repetition can be an invaluable tool in establishing the hierarchy and highlighting the message.
