Design Principles: Hierarchy

Design Principles: Hierarchy

Hierarchy is one of the principles that can make or break your designs. To understand what it means and how you can implement it correctly, read along!

Jay Kadam

Jay Kadam

Oct 05, 2023 4 min read

Hello there design enthusiasts, welcome to my first article! I’m writing this special series of articles where we will revisit some design fundamentals and talk about how you can improve your visual design skills, and todays topic is the word that I mis-spell every frickin’ time - “Hierarchy”

So, what even is hierarchy?

Creating visually appealing and user-friendly layouts are among the fundamental goals of UI Design. One key aspect of achieving these is understanding and implementing hierarchies effectively. Hierarchies help users navigate through information, emphasising what's important and guiding them seamlessly. In this beginner's guide, we'll explore what hierarchies are and how you can use them to improve your UI designs.

Why should you care about hierarchies?

A hierarchy, in the context of UI design, is a structured arrangement of elements that conveys the importance and relationships between those elements. Think of it as a way to tell your users, "Look here first, then here, and finally here." Hierarchies create visual order and guide users through the content or functionality of your interface.

The ABCs of hierarchy


Bright, contrasting colors can make elements stand out. Reserve bold colors for primary actions or your main CTAs.

Peerlist Jobs- highlighting the Apply with Peerlist button
Even though there are 2 buttons side-by-side, the “Apply w/ Peerlist” button captures more attention because of the contrasting color


Bigger things grab more attention. Use larger fonts, buttons, or pictures for the important stuff.

a screenshot of's projects details page on Peerlist
Peerlist Projects - Because of their sizes, you can clearly discern that the image and the name have the highest precedence


Elements at the top and the center grab the most attention. So, put the important stuff there.

a screenshot of the freeCodeCamp company profile on Peerlist
An example for how positioning of the elements help in setting up the hierarchy.


Use different fonts styles and weights to distinguish them from each other. Just don't go overboard - keep it consistent.

an image showing different styles of text used in the Projects Details page in Peerlist
Using different text styles makes it easier to understand which content is of the most importance.


Use adequate spaces around your elements to create separation and focus. Think of your design like a cozy room; don't clutter it up.

An image showing how generous Peerlist is with it's use of whitespace in the commments section
Use Whitespace. Lots of it. It keeps things clean and reduces the chances of users feeling distracted.

Implementing Hierarchies in your designs:

Think Conent First

Understand the content you want to present and prioritise it. What's most important? What can be secondary?

Group similar elements together, like navigation menus or related options. You can use whitespace or visual cues like shapes, boxes and borders.


Make use of color and size contrast to differentiate between primary and secondary elements.

a screenshot of the prizes section from the hackathon page
A screenshot of the prizes section from the Generative AI Hackathon Page

Keep it consistent

Maintain a consistent design style throughout your interface. Consistency in hierarchies helps users predict what to expect. Creating a set of reusable components and spacing rules will help with maintaining consistency. We religiously follow the 8pt grid and even our devs are super strict about it.

a screenshot of the freeCodeCamp company profile on Peerlist
We engage in a mild amount of tomfoolery once in a while hehe

Test the Waters

Once your designs are ready, test them with your friends or co-workers to ensure they work as intended. Get their feedback and iterate! I (sometimes) like to share screenshots on our team slack and get quick feedback on the designs.

a screenshot of our team slack
A serious design discussion between me and Akash

In a Nutshell

Understanding hierarchies is a crucial skill for UI design. It's about creating a logical order in your design that guides users, making their interaction with your product more intuitive and enjoyable. It helps your design look tidy and helps your users find what they're looking for without going on a treasure hunt.