Design Principles: Hierarchy

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

Color

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

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

Size

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

Peerlist Projects - Because of their sizes, you can clearly discern that the image and the name have the highest precedence

Position

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

An example for how positioning of the elements help in setting up the hierarchy.

Typography

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

Using different text styles makes it easier to understand which content is of the most importance.

Whitespace

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

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 Related Elements

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

Contrast

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

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.

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 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.