Visual Hierarchy

To be an effective designer, we have to be able to clearly communicate selected ideas to viewers or we lose their attention.

People see designs in terms of relationships. Seeing similarities and differences or just “seeing” is how we organize our world. Our brains synthesize information by grouping similar visual elements and organizing them into meaningful patterns. Information that is organized with a hierarchy in mind will always be more effective at communicating than information that is not organized.

Visual hierarchy applied to text.

In the above sample illustration, the information in both text blocks is the same. The key to visual hierarchy is how we change the way the reader takes the information in. By applying subheads and pull-out quotes, more visual prominence is given to one element over another, thus making it easier to scan because it is hierarchically organized.


Size easily draws attention because the eye is drawn to the most prominent item on a page. But remember, size must also correlate to importance.


Organizing information based on color can guide the viewer. Color can also be used to convey emotional intensity. Some colors are more soothing than others so used appropriately, color can help evoke emotion.

The wheel of emotion shown above was invented by Robert Plutchik to define a model of human emotions and their relations and combinations. It consists of 8 basic emotions, opposed in pairs, and multiple shades. It is an interesting guide to the power of color and its emotional impact although I would not adhere to it rigidly. Color theories abound.

Grid alignment and white space

Grids create order between elements which helps readability. White space has a functional purpose. It helps guide viewers when used skillfully. Read more on… Visually leading with intent.