Visual hierarchy is the organization of objects in a specific order to draw attention to intended areas.
Commonly used in UX design, visual hierarchy provides the reader with an easier time navigating and helps direct their attention where you want it to be.
Improper use or lack of visual hierarchy can leave website visitors confused and lost.
Visual hierarchy is prevalent in posters and advertisements to help direct attention to intended elements.
This blog will provide beginners with the basics of visual hierarchy.
Visual Hierarchy Broken Down
Breaking down visual hierarchy into simpler chunks helps explain how designers tackle the design concept.
Three are three primary roles in the visual hierarchy, two of which are heavily related.
Size
Changing the size of objects can either help draw attention to them or away from them.
It is essential to leave the largest size for the most important information you wish to express. Using too many similarly sized elements will take away from this effect, as nothing stands out as much.
Scaling sizes is vital to show how it compares to other objects. Creating a sense of balance helps in scaling to emphasize how your largest object compares to smaller ones.
If you have information that is not important, having it in a small size will keep it out of the way and leave it where users will see it last.
Colors & Contrast
Brighter colors do a better job of grabbing attention than others. This effect increases when you combine bright colors with darker backgrounds. The result makes your information pop out more and grabs attention with ease.
Color and contrast are two pieces of visual hierarchy, but they both work together flawlessly to seize attention.
One way to use this method is to change the color of a text by highlighting it with flashy color; it will catch attention before any other dull colored text.
The greater the contrast, the stronger the attention is grabbed. Adding drastic color differences such as a dark background with a bright red font will pull user attention and make it the first thing they notice on any image or web page.
When creating contrasting colors for attention-grabbing, it is best to keep them down to a minimum. Too many contrasted objects confuse the reader and create an undesirable and offputting effect.
Another way to use colors is to choose similar palettes to create a correlation between specific objects.
It is best to reserve this tactic only for the most necessary elements on a page, as that is where you want all the attention directed first.
Good UX design includes plenty of contrast, with most aesthetics using strong contrast to create stunning works.
The F & Z Patterns
When it comes to providing information primarily through text, there are two primary patterns that best take advantage of how we process visual information.
These patterns work for most languages but work great for English as words are read from left to right and from top to bottom.
The F Pattern
The F pattern is the perfect choice for designs containing extensive text. The design follows the letter named after it, starting from the top left and moving across to the right.
Afterwhich, the viewer scans down the spine for subheadings or headlines.
The pattern is alternately named E-pattern, though the F-pattern is more iconic.
To use the F-pattern, you need to place all vital information on the left side in small headlines to grab attention.
This design is superb at eliminating the boredom associated with reading text off large blocks of paragraphs.
Users can scan headlines to spot any eye-catching headlines or bullet points, as they serve to grab attention.
The Z Pattern
While the F-pattern is suited for text-heavy websites, the Z-pattern is different.
The Z-pattern is perfect for websites or ads that do not have several paragraphs of text.
The design starts by having the highest priority information rest on the top left, then cascades in importance to the top right, bottom left, and bottom right.
Users will navigate the Z-pattern easily, as it is a frequently used design that is simple to understand.
The top left section is usually reserved for a logo, as it will be the first thing people notice. On the top right is a call to action positioned after users have seen the company logo. The call to action in this situation is usually a registration prompt.
The middle of the design usually includes an image to fill the empty part.
The bottom left and right includes all the intended text or information you want to show your visitor.
Understanding Typography
Typographic hierarchy is easy to understand and is applicable for any design involving lots of text, which is the vast majority. It can be broken down into three portions, having the order be headline, subheads, and finally your text.
Your headlines contain essential information, are placed highest on your design, and are the most visible content.
Your subheadings work to sort all your text and provide order to the clutter of paragraphs. Always keep your subheadings smaller than your headlines, as they should not compete in priority.
Subheadings provide straightforward navigation for users to find specific information.
Your last piece is your text, which usually involves paragraphs. The font size should be small but maintain readability. The previous two sections work to provide an easier time for users to navigate around your dense texts.
The Importance of Spacing
For websites containing minimal information, leaving an abundance of space surrounding important information will cause attention to be drawn to the center where all the space is.
This concept should also apply to all of your other designs, adding too much information will leave you with an unpleasant user experience.
Surrounding content with space provides a simple and easy-to-follow UX design.
Cramming too much information and leaving little space around areas will leave you with a design that feels overwhelming and leave people feeling puzzled. When users are confused, they always have a chance to leave your website, be sure to only portray important information.
Using Alignment
It is important to align your designs, as having text positioned randomly will create a hectic image to look at.
F-pattern and Z-pattern designs both embody the use of alignment. F-pattern designs use left alignment, while Z-pattern designs use left and right alignments, and center alignments.
When making a visual design with text as the focus, it’s best to align to the left.
For strictly visual designs with a simplistic focus, aligning all elements to the center tends to create an attractive design.
Using Grids
When building designs, grids are a common method to help in the creation process. The usage of the rule of thirds enables the ability to add balance to your designs.
To use the rule of thirds, add a grid to your design, and let it rest on two horizontal and vertical lines. The result provides a design that is pleasing and easier on the eyes.
Objects closer to the center will draw attention, while those far off will attract attention last.
Proximity and Relation
When elements are closer together, your reader will assume they are related.
This can help you organize lots of information and make it easier to understand for your viewer.
Grouping images with text means they are both related, and readers will associate the two together. Having an image and the text be far apart will leave the reader assuming both elements are unrelated and have nothing to do with each other.
Fonts and Visual Hierarchy
Changing the size of your font with larger fonts reserved for important information will help direct attention to them.
For a poster, names should be one of the larger fonts, while items such as an address should be written in a small font.
Moving on from font size, using different types of fonts will help direct user attention. Use a different font for titles, subheadings, and information text. This design method will help give your work the pop it needs to gather and maintain reader attention.
Visual Hierarchy Tips
Before you start creating your design, taking down a few notes can help organize your design and even help you create more aesthetic designs.
Note down the most important information you need to prioritize, and which methods you will use to do so.
Also, try to imagine the reader's journey and try to improve the UX design, and remove any cluttering details.
The ROI from a good UX design is always worth the extra work, so do not underestimate its importance.
Wrap Up
Visual hierarchy is about dictating what order you want your reader's attention to go; you want the vital information seen first, followed by everything else.
The use of contrast can create colors that pop and become the first thing readers notice in a design.
Knowing which information you want to be seen first by readers will enable you to use all the elements of visual hierarchy to provide others with a good UX design.
