Visual hierarchy can make or break your designs. Send your message to the user or leaves them in an overwhelming state where they get lost on what action to take. To improve hierarchy you need to understand the basics of it
What is Visual Hierarchy?
Visual hierarchy helps direct user’s eyes to the information they need to know and accordingly take action. Quickens decision making and translates more intended results.
A brief understanding of Gestalt Design Principles will provide a solid foundation on how users perceive elements together and relate to it.
So, what creates a Visual Hierarchy?
I would say Contrast. Contrast created by size, color, type, style. Basically, physical difference of UI elements. Let’s go in details
Visual Hierarchy tools
Tools that create physical difference in UI elements to establish the priority in our content
1. Size
Size is probably one of the most used and most important tool. We as humans psychologically think as bigger objects have higher importance than smaller ones, hence our eyes are directed towards big text, picture or any visual quicker.
Let’s take typography for example:
As soon as you land on this page, you get a quick introduction on where you are at. The definition or identity of the product. same applies for further components you use within a page.
Your eyes know where to look at and this is Hierarchy 101.
2. Color
A basic understanding Color psychology is required to apply this tool to create hierarchy.
With some high contrasting colors you can create hierarchy. Using this colors with background with lighter color or vice versa, colors are added tool even if you keep your text size small.
For example, here the button for “Apply to drive” quickly grabs attention because of color. The entire tone of this page, including the image is saturated hence the CTA color pops-up
3. Negative Space
In a very not so common but necessary technique used is adding Negative space/white space. It isolates the subject, bringing more focus to it.
In the below screenshot, entire first fold has white space with a brief intro in the centre. It gives the power to the message and reduces the cognitive load
4. Type weight
Along with type size, type weight matters plays a crucial role. A Bold font for at 30px would grab more attention than the same in Regular. Combining Bold & regular in a component brings more contrast and defines the priority of the content
5. Drop Shadow
It is something I learned along the way. How in a crowded page of multiple datapoints, we used shadow to bring about the card component in focus. Adding a wider shadow gives more depth and a visual hint of more uplifted on z-axis
Now, you designed everything, used the required tools to establish hierarchy but how to test your own designs. Well one way is to give your eyes a break of 2–3 minutes, take a break and come back but squint your eyes while seeing them.
Another my personal favourite way is to add a Layer Blur to a white rectangle with a li’l opacity. Keep it over your design and voila, the darker patterns are the one that user will be seeing. Now, judge your designs if thats what you intended to do.
Principles & basics for understanding Hierarchy better
Gestalt Design Principles
https://www.interaction-design.org/literature/topics/gestalt-principles
Color Theory
https://www.interaction-design.org/literature/topics/color-theory
Color Psychology — though this perceived emotion could vary from different cultures around the world, a basic understanding to perceive things as a designs you can read below article
https://medium.com/ux-trends/color-psychology-brilliant-helping-hand-in-ux-design-cdca6b783f43
Any questions or have a thing to discuss on why I said what I said, write me up at anjalicgdesigner@gmail.com
