This article was written by Kent Mundle and originally appeared on Toptal.com.

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.

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.

Colour

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.

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.

Size

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.

Alignment

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.

Shape

Consider how immediately the simple heart shape communicates its potential use for ‘liking’ in most social interactive interfaces today. To establish importance or groups, consider one heart amongst four circles. Geometric form is like color in that shapes carry certain connotations that give elements personality or meaning.

In interactive design, shapes are essential for efficient communication since they often convey meaning more quickly and universally than text. Instead of text, symbols, which are often simple, geometric shapes, have become the analog for most navigation systems and interactive interfaces. The logic of ‘liking’ an image, making a phone call or checking a message is often conveyed only in shapes. This form of visual communication becomes increasingly important in a global market and is evidence of how digital media can transcend print as form of visual communication.

Until recently, most newspaper websites laid out their pages as if they’re in print, and the experience of sifting through the content was clumsy and disorienting.

Consider the difference between searching through the newspaper for an arts section, and selecting the library or search icon in most apps. Until recently, most newspaper websites laid out their pages as if they’re in print, and the experience of sifting through the content was clumsy and disorienting.

The navigation for the Signes du Quotidien site uses shape subtly to produce a visual hierarchy to guide users. The four circular topics are clearly defined aside from the square menu. The menu interaction is alluded to simply through the use of shape, which hints at the potential to drag the menu items into the box. The viewer is given little information other than visual, graphic clues which produce a clever interface.

Motion

Motion is a principle that is almost impossible to use in print, but can be included in the graphic toolkit. Perhaps obvious by now, a moving element will carry greater visual weight in a group of stagnant elements.

However, what can motion communicate other than a literal translation of itself? Motion is often used as a gesture that an element is interactive, but can it be used as a communicative device beyond this? If hierarchy is not only about the efficiency of communication, but also about embedding meaning, how might motion be used as an essential visual tool?

Motion is the single quality that can be given to a graphic element in digital media that is not possible in print. Thus, it inherently rewrites the rules of visual and graphic perception and experience. Many of these uses are simple but essential; they must work without being noticed and appear to have happened naturally. Much of the discussion of visual hierarchy has to do with reinventing old principles, and there is no visual theory that must be redefined or applied. Yet, since motion is mostly used as a fundamental tool for interaction, might the tool be applied to communicate less immediate, nonliteral content?

For the I Remember site, the vibrating main interface immediately stands out from the page as it invites interaction. Although the motion and interface are functional navigational tools to explore the content, the designer uses the potential loss of these elements as a way to discuss the underlying intent of the site. Just like the fading memories of the patients for whom the organization fundraises for, the website will slowly dissolve unless it is interacted with.

Sound

Sound is another tool foreign to print media but has yet to be developed within the principles of hierarchy. Since sound is entirely non-visual, there are no rules to refer to. That being said, it is a design tool that effectively communicates literal content, as well as moods or meanings. Perhaps elements that carry certain sounds may be grouped relative to one another. Those that are boldest might seem the most important, or perhaps separate from a group.

The quality of a sound that identifies an element should quickly identify, characterize, or organize the content. How might sounds that contrast with its associated visual content convey new meaning? Sounds themselves can be so complex that they establish an entire mood or message of a design before anything visual is perceived. A sound might sit in the background, just as a colourful backdrop establishes a mood. Or sounds signal the use of an interface, such as responding to the press of a button. The principle of the tool is basic, but the creativity with which it is employed is where the magic can happens.

The site for the exhibition of the German artist’s group ZERO at the Guggenheim uses sound as an atmosphere but also as a form of navigation. Sound is chosen as a tool due to its importance in the creative work of the collective. Bold ringtones establish the pieces that represent the beginnings of a theme, while the tertiary projects click in the background.

Hierarchy Is Straightforward

Hierarchy is a straightforward concept to discuss once diagrammed.

However, understanding it is easier than the ability to execute a well-organized composition. Plus, to be inventive within a new medium while maintaining good design is even more challenging. New mediums appear all the time. First it was the Internet, then smartphones and tablets, and now we are moving into new territory with technologies such as wearables and virtual reality.

Design that truly pushes the boundaries of digital media is still in its infancy. Hopefully, the principles of good design will keep up with the rapid advances of technology so that our experience of digital media remains full of meaning and pleasure.