Laws of interaction of visual elements

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:

successful hierarchy: title first, then the supporting text and a picture to activate middle ground.
an unsuccessful hierarchy: "travis james sisco" serves as a focal point, but his partner's name is lost and not readable. The top left part of the design is disconnected with the bottom-right part of the design.

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.

starck constrast between the picture and a black baground of a text page

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).

The different orientation does not have to be applied to many elements. Less is more. In this example, the chapter head is the only element turned perpendiculat to the main text.

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.

here, the different scale pictures create a dinamic composition and lead the eye of the viewer through it

 

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).

illusion of one point perspective created by a combination of cropping the image and the shadow on the left of the picture. it creates an emphasis on the title "Lecture Series" which is further emphasized by a use of a different color.
an illision of thre dimensional objects created by pitting text block into a proper three point perspective

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.

a successful example of a tight space use
notice a white space on the top left of the photo. used very successfully as a starting point for the eye that leads to a focal point of the composition (which is a tittle)

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.

guess what the subject is