Visual Hierarchy in Design: 9 Principles of Visual Hierarchy

Visual hierarchy is a principle of graphic design and visual design. Visual hierarchy is inspired by the Gestalt principle, which states that the human mind wants to create order in disorder and naturally wants to make patterns and group separate elements into a unified whole. Elements of visual hierarchy include color, contrast, size, space, and position/alignment. Graphic designers arrange these elements strategically for the human eye to easily see and process.

Visual hierarchy ensures that viewers process a design correctly. To successfully achieve visual hierarchy, you must understand how the human eye perceives information. Effective visual hierarchy will keep the viewer's attention and have high usability, critical factors for advertising and brand communications.

Visual hierarchy guides the viewer's eyes across the page. Most people will read visual information in one of two ways, which guides designers in arranging page elements to hold the viewer's attention.

1. 1. F Patterns: This reading pattern follows the shape of the letter F, where the user's eye will start at the top left and read horizontally to the top right for keywords and bolded phrases. Then they will repeat this process by scanning down the left side of the page and moving over to the right if they see anything that interests them. Text-heavy designs, such as articles and newspaper homepages, are typically designed in an F pattern.
2. 2. Z Patterns: This reading pattern follows the shape of the letter Z. The viewer starts at the top left and moves horizontally across the page, looking for important information, then moves diagonally downward to the lower-left corner to read across to the right. The Z pattern is for less-dense designs, such as web design and infographics.

The design elements that make up the principle of visual hierarchy include:

1. 1. Color: Bright colors attract more attention than muted colors. Complementary color schemes can add harmony to design, while contrasting colors can make one design element stand out.
2. 2. Composition: Place the most critical elements at the top and subsequent information in the order of importance.
3. 3. Contrast: Contrasting elements, such as contrasting colors or typefaces, have an inherent dramatic effect and draw attention.
4. 4. Size: Larger page elements have more visual weight and get more attention than more minor elements.
5. 5. Symmetry: Symmetrical items in alignment with each other are more visually pleasing. Placing something slightly out of alignment will make it stand out.
6. 6. Repetition: Repeating information will cement it in the reader’s mind. Repeating visual styles can also help the reader group specific ideas together.
7. 7. Proximity: Place related information close together.
8. 8. Texture: A variety of visual elements will add texture and make the design more interesting, and additional textures can draw the eye to features that aren't particularly large or bright.
9. 9. White space: Negative space around elements will help them stand out and make for a less cluttered design.

There are many principles in creating a practical design that will enhance the user experience. Some design tips to consider include:

• Typography: When using text, make sure that the largest text is at the top. Use headers for important information and smaller subheadings for supporting information. The body copy should be smaller than the headers and subhead. Bolds and italics can also impact visual hierarchy, and while there are countless different fonts, choose a font that fits the brand/product and is easy to read.
• Spacing: Include white space or negative space in the design. White space doesn't need to be white; there just needs to be blank space around separate design elements, so each part stands out. The eye needs to have room to travel between focal points.
• Composition: Designers use several compositional techniques to create focal points in design. These techniques include the rule of thirds, which allows the focal point to be off-center; the rule of odds, where an odd number of objects is pleasing to the eye; and implied movement, where objects are arranged to suggest movement.

Get a MasterClass Annual Membership and let David Carson be your personal tutor. The prolific and decorated designer—who’s been lauded as the “art director of the era”—reveals his processes for going off the (design) grid, implementing typography in new and interesting ways, innovative uses of photography and collage, and so much more.