Creative Design
Jessie Lacey
by Jessie Lacey
share this
?fl
« Back to the Blog

Using design rules as a guide, not a law, with regards to visual weight

05/14/2013
Using design rules as a guide, not a law, with regards to visual weight

There are a few basic design rules when it comes to user experience (UX) that guides our design. However, one must not fall into the trap of believing the rules are mutually exclusive or that one must adhere to the rules to create an effective design. None of that is more apparent than in creation of a visual balance or visual emphasis.

The Gutenberg Diagram developed by Edmund C. Arnold.

Edmund C. Arnold, born in 1913, is considered by many to be the "father of modern newspaper design.” He developed the Gutenberg Diagram to assist in reading and layout comprehension. The Diagram divides your display into four quadrants. He says eyes fall naturally to the top left corner, called the Primary Optical Area (POA), then eyes move across to the top right, called the strong fallow area, and down to the left quadrant called the weak fallow area and then to the terminal area at the bottom right.

However, the Gutenberg Diagram is meant as a guide to assist in layout design but it should not be considered law. The diagram is applied perfectly only when all elements are weighted exactly the same. How often does that happen?

In the book, Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler, we are cautioned to use the diagram only when elements are evenly distributed and weighted; otherwise, we need to use the visual weight of elements as a guide for layout.

The above illustrates a few of the many variables considered in visual weight. Position: An object further from the center of a page will have more visual weight than a similar object placed closer towards the center. Isolation: An isolated object that is isolated will carry more visual weight than similar objects grouped together. Value: A darker object will have more visual weight than a lighter, similar object. Color: Some colors have more visual weight than others, especially brighter colors. Value Contrast: An object with more contrast against the background will have more visual weight than a similar object with less contrast. Contrast can be created by shape too.

Visual weight refers to characteristics given to elements that guide users’ eyes. Characteristics include size, orientation, color, shape, contrast, texture, and distribution (grouping or isolation).

Along with the rule of left-to-right are several other, sometimes competing ideas about how we read a layout. Humans tend to look at faces, and not only that, we look at the eyes of that face and we look at what those eyes are looking at (shown in the images below). Before reading left to right, we are immediately drawn to a face.

The whole premise of the Gutenberg Diagram is based on the way the Latin alphabet is read. So, reading from left to right is not instinctual, it is cultural. The difference is seen in timelines and  graphs, as well as writings. In mainland China and Japan, for instance, one would see a timeline in their history book with the past at the top going down to present time at the bottom, and sometimes, from right to left. What this means for UX in websites is that there is a distinct preference in navigation and alignment from a cultural perspective.

So, before applying any guide or using any design rules in your layout, you must first take into consideration demographics, imagery such as human faces, and use visual weight to balance or emphasize certain elements like a Call to Action.

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×