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.
Bigger things grab more attention. Use larger fonts, buttons, or pictures for the important stuff.
Elements at the top and the center grab the most attention. So, put the important stuff there.
Use different fonts styles and weights to distinguish them from each other. Just don't go overboard - keep it consistent.
Use adequate spaces around your elements to create separation and focus. Think of your design like a cozy room; don't clutter it up.
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.
Make use of color and size contrast to differentiate between primary and secondary elements.
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.
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.
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.