As a front-end engineers, we may not give a deep focusing to UX Design, but understanding the basics will help us to discuss and improve the workflow between us ( Front-end engineers ) and UX/UI engineers.
In this article, we will take a look at the Visual Hierarchy and its importance in the UI Design.
Have you ever encountered a busy web apps where the UI Patterns ( elements ) are competitive or unordered?
If yes, I'm sure that you struggled to get your task done, or even where to start if its your first usage.
These web apps have a lack of visual hierarchy, but what's the definition of Visual Hierarchy?
The Visual Hierarchy is the organization of UI Patterns in the page or the screen which guides users eyes to the most important element and controls the delivery of information for the end users.
We can create the visual hierarchy by using:
1. Color and Contrast.
2. Scale.
3. Proximity.
1. Color and Contrast
- Applying bright colors for important items, and less saturated colors for lesser important items.
- Use heavy-weight typefaces to attract attention
- Don't use too many colors which makes users overwhelming. It would be better to use between 2 to 3 colors.
- Don't use many contrast variations. This will lead to competitive elements.
2. Scale
- Bigger elements stand out and attract users's eyes.
- Use less then 3 variations for the size.
3. Proximity
- Implicit and explicit grouping help us discovering the content easily.
- Give much space between the UI elements.
Top comments (0)