As originally published on www.toptal.com by Kent Mundle.
The need for technical skill in graphic design continues to grow as technologies and interfaces change. Yet, how have fundamental understandings of visual hierarchy, perception and composition changed along with new interfaces? The modern concept of human visual perception is rooted in psychological study. Thus, the way that we see and perceive graphic information will always be the same, despite continually changing graphic interfaces. So, how can contemporary interactive design consider and improve upon the foundations of graphic composition and visual hierarchy?
The foundational rules of visual perception are critical for any graphic design, as they instruct how information with embedded meaning is conveyed as quickly as possible. However, these rules were founded in print and have yet to be redefined for digital media. There has yet to be a sort of digital Bauhaus school to set these new principles. The rules of hierarchy and composition are not just dated, they break down in web interfaces. We simply experience the interface in an entirely different way from print.
Most designs for interactive and web media are still in their infancy since designers treat the screen as a static, two dimensional object. Can interactive design innovate beyond reapplying print formats to the web? Yet before they can be developed, the fundamental understandings of visual hierarchy, perception and composition should be understood and introduced. As a basis for visual communication they remain relevant. However, perhaps we can investigate how these principles are being employed in innovative examples that produce enjoyable experiences in interactive media.
Visual Hierarchy: New Understandings of Graphic Composition For Interactive Interfaces
What is visual hierarchy and why is it important? Hierarchy is the choreography of content in a composition to communicate information and convey meaning. Visual hierarchy directs viewers to the most important information first, and identifies navigation through secondary content.
The meaning, concept, or mood of the composition is conveyed through the creative use of graphic tools that establish hierarchy. This is established through a designer’s use of size, colour, shape, orientation and other tools.
How do you use Size, Color, Shape, and Orientation to convey meaning and mood in a design?
Visual hierarchy is critical for any graphic design, whether it’s a logo that must identify the ambition of a brand at a glance, or the easy navigation of an interactive interface. Our understanding of every element is based on a relation to its context. Elements are treated graphically with graphic tools in order to form visual relationships and thus establish visual hierarchy across a design.
However, the understanding of visual hierarchy is based on theory relating to two dimensional visual perception. Web and interactive design allows for more complex potential relationships between elements. Thus, we will discuss the basics of this visual theory, but present precedents that are bending the static boundaries of graphic design rooted in print.
Many of the rules of visual hierarchy seem overly simple and banal, but they are a critical foundation for any good graphic design.
Consider the immediate connotations of a red cross versus a monochrome one. Almost universally, the red cross has established a connotation of health, help and safety. Such is the potential for immediate communication with the use of colour. Colour is often used to identify groups, as when one red cross amongst three blacks stands out as somehow more significant.
Bright, rich colours stand out more than muted ones, and thus have greater visual weight. In an interface, colour might be used to point out structure and navigation. Even a single colour within a monochrome interface can identify selection, and perhaps even allude to what might be beyond that button the viewer is hovering over.
Colour, or the lack of it in monochrome design elements, can be used to outline UI elements and appeal to users on a subconscious level.
However, colour is also embedded with meaning and emotion that conveys information to viewers subconsciously. In branding, much psychological research has been done on colour because it creates a visceral response in a consumer prior to having any meaningful interaction with a brand. For example, blues are often dependable, secure and calming, while reds are stimulating and even known to increase viewers’ heart rates. However, colours may have different connotations depending on the culture.
An example of a meaningful, but organizational use of colour in web design is The Names for Change site.The site immediately communicates its organizing structure through the use of colour (by default the organization is scattered, but can be rearranged by topic/colour). However, the chosen tones help to overcome one of the potential difficulties for the meaning of the site. Fundraising for daily items such as socks or tampons isn’t exciting enough to sell itself, so the radical graphic tone of the site raises the perceptual value of the everyday items, while establishing the necessary underlying organizational structure.
Consider an illustration of one large bird sitting next to three smaller ones. Without any further information, this simple graphic communicate the relationship between elements. The image distinguishes two classes: parent and children, which collectively communicate a family.
Size establishes hierarchy because the biggest items gain attention first and thus appear to be the most important. Here we see one big circle next to three smaller ones. Thus not only does the biggest appear to be more important than the others, but two distinct groups immediately become established, as well. It is critical to understand that we have imbued meaning into these objects only by changing one quality relative to one another. Alone, each group could not be distinguished so deliberately. Size is often used within bodies of text to identify meaningful subjects, headlines, or important quotes. Secondary content, such as labels, should thus be smaller so as to not compete with the important information.
A traditional graphic strategy is to make the most important elements the largest, and step down sizing hierarchically. However, too many sets of sizes can be confusing, so a basic structure of heading, body and label size text is sufficient. Consider some of the most widely used graphic interfaces, such as perhaps Instagram. Nothing on the screen competes with the image, it takes up more than 50 percent of most screens. The purpose of the interface is immediate. This simplicity likely led to the adoption of the social app by so many smartphone users. If an entire navigational interface can be established through relative sizing, why not?
An example of a restructuring of use of hierarchy is the portfolio site for Ro/Lu. The web portfolio for the art/design studio RO/LU may not be the most intuitive site, but it challenges the arrangement of the typical creative portfolio. Various projects appear as the most significant each time a viewer visits resulting from the randomization of projects’ thumbnail sizing in the background. For most creative studios, there is no hierarchy within projects of a portfolio as they’re each important in their own ways. The RO/LU site design creates a dynamic composition, with varying levels of interest in each visit, and encourages viewers to investigate the studio’s extensive portfolio. Thus, the eclectic, interdisciplinary nature of the studio is represented in the randomized sizing of content.
One square stands out of line. When a single element breaks an established structure, it stands out from the composition, and thus attains meaning relative to the rest. Alignment communicates a sense of order by connecting elements spatially. As in most web designs, menu items are gathered together, therefore, we immediately understand each as a part of the same group.
But a rigid composition may appear stagnant and visually uninteresting unless something steps outside of the grid. Thus misalignment, or breaking the grid, might be an opportunity to give an element visual weight. As a principle, elements that are placed centrally often appear to be more significant. For example, important content or interfaces may appear to be central, while navigational tools and menus are often kept out of the way. This being said, often in web design or interactive media, all content is aligned and composed two dimensionally. Yet in these mediums, alignments might change, reorganize, move or evolve into the third dimension. When interactive design applies fundamental principles and pushes the potential of new mediums, interesting and new experiences might be invented. Through re-alignment, new meanings can be associated between different content elements. Most newspaper columns develop structure through grids as a use of alignment. How could web design transcend print?
For example, the DNA project is a site that uses a series of realignments to communicate the creative construction of a musician’s album. At first, as a two dimensional composition, the menu items hide in the margins because they are to be explored later in the experience of the website. First, a viewer is invited to click through the song tracks, traditionally aligned in album format. However, by allowing a viewer to realign the DNA elements of the album/site, the conception of the album is communicated not just as a series of tracks, but a non-linear construction of fragments over time, each informing the album in different, and potentially multiple, places. The structure is complex, as is the construction of an album.