Have your designs ever felt clunky or chaotic? Maybe confusing or unclear? If you think your design just needs some clarification–or you might not know at all what to do next–then a look into the elements of visual hierarchy might be the key.
In graphic design, the principle of visual hierarchy is the organization and structure of a composition with the purpose of drawing attention to the most important information first, and subsequently, the rest of the information in descending order of importance.
Our brains have a system for figuring out what is most important when taking in a lot of information at once. And what catches our attention first is actually very predictable. Our eyes follow a natural pattern when they first look at something, and in a millisecond, decide where to start and where to move next.
The purpose of visual hierarchy in design is to work with this natural sense of flow. Depending on what you are designing, it might be helpful to understand flow patterns. Studies using eye-tracking technology have found two common patterns for how most people scan a page. They are called F and Z patterns. Much like they sound, our eyes will either follow a pattern that looks similar to the shape of an F or a Z.
F patterns are most common when dealing with a design that is primarily text. This is because most cultures read from left to right. When using the F pattern to scan a page, our eyes move downward along the left side, and then to the right whenever we find something that interests us.
Z patterns are common in designs that contain more images or varying types of mediums. Most people start on the upper left side, scan across the top to the right, diagonally down and back to the left, before scanning across to the right again.
Knowing the scanning patterns most people use can help you decide how to structure your composition. Putting the most important information along this natural path allows you to work with the flow, rather than interrupting it and forcing your viewer’s eyes off track, creating feelings of disorder and confusion.
There are even more ways that our brain decides which information to process first. And in design, these elements have names. If we know where our audience is going to look, we can strategically place the information we want them to see where we know they will already be looking, communicating more efficiently and effectively.
If you’re looking for order and flow in your own designs, you can use the following elements to naturally lead your audience to the information they need first, without it feeling forced or disruptive.
And, if at any point you read a term that isn’t clear, you can find definitions in our other blog post in this series, Design for Non-Designers: Intro to Terms, Part 1 and Part 2.
Naturally, our eyes are drawn to the largest element in a composition. It’s big, obvious, and hard to miss. Titles are often given the largest font size so readers know what the article or book is about before diving in. A label tells us in large letters what the product is before telling us what it’s used for or listing the ingredients. The largest words will attract our attention first, the next largest, and so on.
Black and white are not the only forms of contrast, although they are maybe the most obvious. Contrast can also occur with complementary colors. Complementary colors are those which are opposite each other on the color wheel. Like black and white, they stand out from each other because they are so different. But we can also use lighter and darker shades of the same color. This is the same idea as black and white, just with a certain hue involved. Dark blue will still be bold against light blue, simply because they are such different values of blue.
Color is often used as a type of contrast, as we just learned above. But even a single color stands out against a neutral backdrop (white, gray, or black.). Think about a teacher’s red pen all over an essay or math quiz. The bright red draws our attention to the parts we need to review. Or bright highlighter yellow in a sea of black words. Without the yellow, our eyes would start at the top of the page and work its way through the whole block of text. But the colorful, highlighted section draws our eyes immediately to the middle instead.
Negative space creates emphasis by physically setting it apart from the rest of the composition. It creates a focal point for our eyes by subtracting any other elements that could distract us. We don’t want to look at a jumble of words and information, but prefer some space between elements for our eyes to rest. Negative space helps to give the whole composition balance. Margins on a page help our brains not to feel overwhelmed and draw our eyes to the center, away from less necessary information like page numbers and footnotes. The space between paragraphs divides sections of information and creates order throughout the page.
Alignment steers your eyes in a specific direction. When text or designs are centered on a page, your peripheral vision knows from the empty space on either side to keep moving downward. When you align to the left or right, your eyes know to go back to the side before moving on to the next line. This creates the flow when your viewer is ready to move on from the first element that caught their attention and leads them seamlessly through the rest of the composition.
Another way to create flow throughout your composition is to utilize movement. Your designs themselves do not need to actually move, but incorporating lines or depth of field can create a sense of movement, which simultaneously guides our eyes in the intended direction. A sequence of rain drops can direct our eyes downward, while the curvy trail behind a bee can lead our eyes from the left side of the page to the right. Depth of field shifts our eyes from the foreground to the background, but often left to right or up and down as well.
These elements are just the basics of visual hierarchy and can be very effective when used in conjunction with one another. For example, a title that is large, colorful, and offset with negative space will be even more bold. But these elements can also compete against each other if mixed incorrectly. One of the goals of good design is to communicate in a way that is easy to understand, so pay careful attention to where your own eyes are drawn and whether or not your overall composition is too confusing.
Armed with an understanding of how visual hierarchy works, you can train your eye to notice these different elements in designs around you. And, hopefully, this breakdown will help you to feel more equipped to create designs that flow well and effectively communicate to your audience.
