We group objects visually by some version of similarity. The orderly or logically pairing (joining) of objects with one another which leads to recognition, comprehension, and perhaps sequential order.
Therefor, any and all indicators of hierarchy require a comparison between the objects, images or words that are perceived to be a part of a common system of some sort—an overall group. This context implies the visual “rules” or “clues” that we, the viewer, need for us to make sense of what we are looking at. This context might be thematic, topical, cultural, technical or any other means of organizing or grouping.
Hierarchy is the order of importance within a group. In this manner the ranks of generals, colonels, captains, sergeants, and privates of an army are similar to the sections within a book where there are titles chapter headings, paragraphs, sentences, captions, etc. Hierarchical order exists in nearly everything we know, including the family unit, the workplace, politics, and religion. Indeed, the ranking of order defines who we are as a culture and our place within it.
Hierarchy is expressed through naming systems: general, colonel, corporal, private, and so on. Hierarchy is also conveyed visually, through variations in scale, value, color, spacing, placement, and other signals. Again, comparison within an understood context is essential to perceive this hierarchy regardless of the indicator or visual clue.
Like fashion, graphic design cycles through periods of structure and chaos, ornament and austerity. A designer’s approach to visual hierarchy reflects his or her personal style, methodology, and training as well as the zeitgeist of the period. Hierarchy can be simple or complex, rigorous or loose, flat or highly articulated. This range is most easily detected as a characteristic of specific style. (Bauhus design clearly indicated grouping and hierarchy through use of a highly structured grid, while the opposite is true of “old West” letterpress posters where the size and/or elaborateness of words were typically just a reflection of whatever type was available to the printer.)
Regardless of approach, hierarchy employs clear marks of separation to signal a change from one level to another. As in music, the ability to articulate variation in tone, pitch, and melody in design requires careful delineation.
In interactive design such as a web site; menus, texts, and images can be given visual order through placement and consistent styling, but the user often controls the order in which information is accessed. Unlike a linear book, interactive spaces feature multiple links and navigation options. Cascading Style Sheets (CSS) articulate the structure of a document separately from its presentation so that information can be automatically reconfigured for different output devices, from desktop computer screens to mobile phones, PDAs, kiosks, and more. A different visual hierarchy might be used in each instance. The average computer desktop supports a complex hierarchy of icons, applications, folders, menus, images, and palettes—empowering users, as never before, to arrange, access, edit, and order vast amounts of information—all managed through a flexible hierarchy controlled and customized by the user. As technology allows ever greater access to information, the ability of the designer to distill and make sense of the data glut gains increasing value.
Generally speaking, Visual Grouping and Hierarchy is controlled by the manipulation of objects/images by factors from these main categories: