Visual hierarchy is a tool most designers use to separate the elements of your design and create an order. By doing this they easily focus the viewer’s attention on the most important aspects. To achieve this kind of effect, you have to understand how this design principle works and how you can implement it. You can read more about other design principles in this post.
Related post: The basics of good design
What is visual hierarchy and how to create it?
The way in which you display certain elements in your design works like a guide. So how can you guide the viewer? Essentially visual hierarchy is created through contrast. Contrast lets the viewer make out easily what is the most important element/ information in your design, what comes second, third, and so on.
How to create contrast in your design?
The bigger the better. When it comes to the size of different elements inside your design people tend to think the bigger in size the more important it is. Like in this blog post headlines and subheadlines have a different font size to make them stand out.
There are many ways you can create contrast through color. Color can really make special elements of your design pop out.The bolder the color the more intention we give it. Here are some ideas to use color to build contrast:
- Red: The color red says “attention” and usually stands out from other colors. By using red in a design you can easily put the focus on something important.
- Neutrals: In a neutral design e.g. black & white or grayscale, every colored element attracts attention.
- Saturation: Bright colors are eye-catching. If you use darker or more transparent colors in the back of your design, the more saturated colors build a nice contrast.
Talking about placement, you need to know about the Z-pattern. The Z-pattern basically describes the movement of the eye when reading a page. Your eye wanders from the top left corner to top right to bottom left and finally bottom right. You can implement this in your design by putting the most important element in the top left corner.
White space is a great way to achieve contrast. If there is nothing distracting the eye, you automatically focus the attention on the main elements.