⚡️ UI design tip - Create a clear visual hierarchy
Aim to present information in order of importance by making more important elements look more prominent.
Some quick tips to create a clear order of importance or visual hierarchy 👇
#design #uxui #ui #productdesign #ux
Aim to present information in order of importance by making more important elements look more prominent.
Some quick tips to create a clear order of importance or visual hierarchy 👇
#design #uxui #ui #productdesign #ux
Create a clear visual hierarchy using variations in:
1️⃣ Size - make important elements larger.
2️⃣ Colour - use brighter, richer, warmer, or higher contrast colours for more important elements.
3️⃣ Contrast - style important elements differently to help them stand out.
1️⃣ Size - make important elements larger.
2️⃣ Colour - use brighter, richer, warmer, or higher contrast colours for more important elements.
3️⃣ Contrast - style important elements differently to help them stand out.
4️⃣ Spacing - surround important elements with more space.
4️⃣ Position - place important elements toward the top of an interface or first in a row of multiple items.
6️⃣ Depth - elevate important elements so they appear closer to users.
Here are some examples from the book 👇
4️⃣ Position - place important elements toward the top of an interface or first in a row of multiple items.
6️⃣ Depth - elevate important elements so they appear closer to users.
Here are some examples from the book 👇
Example 1
The following hero banner example lacks a clear visual hierarchy.
Because all interface elements have similar prominence, our eyes don’t know what to focus on first.
This lack of order can cause confusion and increase cognitive load, plus it looks messy.
The following hero banner example lacks a clear visual hierarchy.
Because all interface elements have similar prominence, our eyes don’t know what to focus on first.
This lack of order can cause confusion and increase cognitive load, plus it looks messy.
We use size, colour, and contrast to create a clear visual hierarchy.
This makes it quicker and easier for people to find the information they need and take the appropriate action.
This makes it quicker and easier for people to find the information they need and take the appropriate action.
Example 2
Depth, or different levels of elevation, can also be used to help create a clear order of importance or visual hierarchy.
More important things should be elevated higher to make them more prominent.
Elevation can also make interface elements feel interactive.
Depth, or different levels of elevation, can also be used to help create a clear order of importance or visual hierarchy.
More important things should be elevated higher to make them more prominent.
Elevation can also make interface elements feel interactive.
In the following example, adding depth makes the visual hierarchy clearer.
The primary button is elevated highest, as it’s the most important element.
The top header sits on a level of elevation under the button, as it’s less important.
The primary button is elevated highest, as it’s the most important element.
The top header sits on a level of elevation under the button, as it’s less important.
A quick and easy way to test whether your visual hierarchy is clear is to use The Squint Test 😑
Simply squint your eyes and look at your design. You should still be able to tell what the most important elements are and recognise what the interface is for.
Simply squint your eyes and look at your design. You should still be able to tell what the most important elements are and recognise what the interface is for.
This is just 1 of over 100 logic-driven design guidelines from my book 📘
Get 20% off for a limited time only👇
practical-ui.com
Get 20% off for a limited time only👇
practical-ui.com
If you found this thread useful:
❤️ Follow me @AdhamDannaway for daily design tips
🔁 Retweet the below tweet to share it 👇
❤️ Follow me @AdhamDannaway for daily design tips
🔁 Retweet the below tweet to share it 👇
جاري تحميل الاقتراحات...