Week 8: Creating Exciting And Unusual Visual Hierarchies

by wangtianchen

Design is all about visual communication, is to be able to clearly communicate your ideas to viewers or else lose their attention.

In week 8, I read the article “Creating Exciting And Unusual Visual Hierarchies” by C. Knight, J. Glaser. This article pointed SIX principles of visual hierarchies that can be achieved visually, which are the designer as reader, texture and tone, combining typefaces, colorful type, quantity of type and grid.

What is Visual Hierarchy?

The simplest definition of ‘visual hierarchy’ is ‘the order in which the human eye perceives what it sees’. Visual hierarchy suggests that there is a correct way to view something visually. So visual hierarchy is one of the most important principles behind effective graphic design. [1]

I am going to show you one case that I  think is a good example of visual hierarchy and I will describe WHY their design demonstrates effective visual hierarchy.

HRAnnualReport_4 HRAnnualReport_3 HRAnnualReport_6

Annual Report: Human Rights Campaign 2012 [2]

  • The Designer As Reader – Annual Report: Human Rights Campaign 2012, designed by Column Five Media. “Election 2012″ is the highest-level order of information: it tells us the general topic that the information below falls under. But the designer decided that the article heading was more interesting for readers and so sized it to be read first.
  • Texture And Tone – In the Book Jacket and the “Annual Report” font used black color and big size almost swallow up “2012”, leaving it hardly visible and giving “Annual Report” and “Human Rights Campaign” clear prominence. In terms of the right page, by making “They support marriage equality” white and setting it against a black bar, it becomes another more noticeable. Keeping the intended hierarchy clear is vital.  Where is the reader drawn first, second and last.
  • Combining Typefaces To Create Hierarchy – “Election 2012” is a good example of complex hierarchy and all use typefaces carefully to create order, structure and appeal. Different fonts are often adopted as part of the identity of special part. The pages have complex grids and structures, making careful typographic choices even more important.
  • Colorful Type – Bright colors stand out from muted colors or grayscale, while lighter tints appear more “distant” and thus fall lower on the hierarchy than richer, darker ones. “Election 2012” contrasts bright yellow and blue against a black-and-white background to striking effect.
  • Quantity of Type – “Election 2012″‘s pages has four or more levels of typographic hierarchy, but its not looks too complex and all are coordinated and serve to attract and guide the reader enthusiastically through the information.
  • Grids are so practical – “Election 2012″‘s pages designing a grid with flexibility and text and images extending across them, the varying widths set priorities among the topics. Also, the different weights lead the user through different elements of the pages. Furthermore, the color is also introduced to guide the reader.


[1] Rana, R. (2014). Visual Hierarchy in Website Design. Retrieved November 22, 2014 from http://prdxn.com/visual-hierarchy-in-web-design/

[2] Annual Report Design. (2012). Annual Report: Human Rights Campaign 2012. Retrieved November 22, 2014 from http://www.columnfivemedia.com/work-items/annual-report-human-rights-campaign-2012