6 Principles of Visual Hierarchy.
In this article, we’re going to learn about Visual Hierarchy in Design and how we can use it to improve our products and optimize our user experiences.
There are many ways to achieve a visual hierarchy. We will discuss a few that can add direction to your design. Let’s understand it with examples, once and for all. 😊
Let’s begin 💃
What is Visual Hierarchy?
Visual Hierarchy is the order in which a user processes information on a page, its function in the user interface design is to allow users to understand the information easily. By assigning different visual characteristics to sections of information, a designer can influence what users will perceive as being further up in the hierarchy. It directs viewers to the most important information first, and then to secondary content.
“We must design for the way people behave, not for how we would wish them to behave.” — Donald A Norman
Let’s take a look at some of these principles and how they work to help influence the navigation of your content.
1. Size
“People read bigger things first.”
Larger elements draw greater attention than smaller elements. It’s the precise reason why newspaper headlines appear in a larger font, and major stories often have even larger headlines than articles on the rest of the pages.
Different font sizes are also often used in bodies of text to indicate significant differences, such as headers, sections, and quotes. Secondary content, such as image captions, are usually smaller so as not to compete with the main body of the text.
2. Color
“Bright colors immediately grab users attention.”
Bright colors usually draw greater attention than lighter tints. For example, if a single sentence in a block of text is highlighted with a bright color, it will stand out and grabs the attention.
3. Reading Patterns
“Eyes of the people of western culture are mostly used to notice things in the pattern of our writing”
The key is knowing how to control flow to accomplish our goals, particularly with something as focused as a landing page. The two most popular viewing patterns people use are the Z pattern and the F pattern.
Let’s take a look at these two patterns in more detail.
The F pattern
In F pattern the user first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
Finally, users scan the content’s left side in a vertical movement. This last element forms the F’s stem.
The Z Pattern
Z-patterns apply to webpages, where information is not necessarily presented in block paragraphs. A reader’s eye first scans across the top of the page, where important information is likely to be found, then shoots down to the opposite corner at a diagonal and does the same thing across the lower part of the page.
4. Spacing
“Good spacing creates structure, repetition and harmony in design”
Another way of providing better visual hierarchy is to give content ample space to sigh. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers.
Related to layout, the spacing within your interface guides the eye and, under the right circumstances, explains or suggests function.
Pay extra attention to:
1- Padding inside of the dashboard and buttons
2- Height and spacing inside the columns and tables.
3- Margins between the elements.
5. Typeface
After size, the typeface is the most used element in terms of creating a typographic hierarchy. The key is to have a contrast between typefaces. (This is one reason that designers often select one serif and one sans serif typeface for a project.)
For the best combinations, look for typefaces that are different in weight by have a similar tone or feel. If you are using rounded typefaces, stick to letterforms with similar shapes in the o’s, for example. Opt for typefaces with similar x-heights if the styles will be used in line with one another throughout the project.
6. Alignment
Alignment is a part of the structure by which elements are placed in a design. It tells that visual component, whether they be text or images, are not positioned arbitrarily throughout a composition.
Let’s take the example of a navbar, the logo, and all page links are aligned horizontally, you immediately associate this as the nav bar and are familiar with the relationship of each page link.
Conclusion
These are the different principles and examples of visual hierarchy for design. Skills don’t come from reading but from learning and practicing. You only learn something by doing it. The more you try different styles, the better idea you will get of how it looks and works for your users. It’s all a learning process and you can do this!
Thank you for reading! If you like this article, please 👏 and share it so that more people can read it. Do comment and let me know your thoughts about this :D
In case you want to reach out, here’s where you can find me :)
Twitter: https://twitter.com/manvisinghwal
LinkedIn: https://www.linkedin.com/in/manvisinghwal
