Member-only story

The fundamentals behind visual hierarchy

Pascal Potvin
UX Collective
Published in
9 min readApr 10, 2019

We live in a very busy time. Everything is screaming for our attention — our phones, laptops, television and so on. Yet, when we stumble across an App or a digital product something just feels and flows naturally, but we don’t always know why. It’s often the visual composition of elements coming together. When these UI elements are organized and structured properly, users can easily navigate and understand the product. The ability to create a compelling story through fonts and visual hierarchy is something every designer should have in their toolkit as it goes beyond visual aesthetic and has a large impact on user experience. When components are structured wisely, users can navigate and interact with a product without friction and effort, thus having an enjoyable experience.

Roman Shampanskii — Dribbble

Creating visual hierarchy is the foundation behind any successful product. It creates an order of importance to elements in order to direct a user’s attention and make information easier to consume. Through the use of colour, contrast, texture, shape, positioning, orientation and size the most important information is easily surfaced. Hierarchy helps to create a focal point, gives the user an entry point to start consuming designs, and guides them to the most important information.

So, what makes a powerful visual hierarchy? Of course, different kinds of products require…

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Pascal Potvin

I help founders and leaders translate vision into user experiences that drive growth and unlocks revenue. | Design Principal | MBA | Avid observer

Responses (3)

What are your thoughts?

Gestalt principles are a great way to provide maximum impact to your designs. It proposes laws of perceptual organization such as: simplicity, similarity (based on shape, size, colour),...

格式塔心理学
相近(Proximity):距离相近的各部分趋于组成整体。

What is the difference? The information is much easier to digest and our eyes easily scan through the information

I’d argue here that the first is actually easier to scan through, though the second more easily makes apparent the content of the following, smaller elements and allows the user to make a decision to ‘enter’.

Very good. Thanks for sharing. As a sturtup founder, I’m convince more than ever that design should come first — before product. Not sure if others agree. But poor design, no matter how good a product is makes it nearly impossible for users to use…