Designing UI Dashboards: The Beginner’s Approach
Tags: Beginner, Learning Dashboards, User Experience Design, Dashboard, UI

This article is for people who are ‘relatively’ new to designing UI dashboards, this article will not teach you how to become a UI/UX/Product Designer(I will cover this in a different article), this article will not make you an overnight master at designing dashboards. Also ‘dashboard’ in this context is referring to Desktop/Web Dashboard.

I have gotten a number of DMs on twitter asking for guide on how to design dashboards of recent, so this article aim at highlighting(not literally) my fundamental approach to designing them.

So Let’s Dive Right In

Dashboards, like every other UI design follows the basic Principles of Design such as Alignment, Hierarchy, Typography, Direction etc. Contrary to what you might be thinking that there is a special rule or secrets to designing them, there isn’t but there are careful approach to it. You must have mastered your basics in UI as you wouldn’t get away without being solid in your fundamentals before working on a dashboard UI.

So how are dashboards different and what is the buzz all about?

Unlike mobile app designs where you have a smaller screen and you get to fit your content into that small space, for dashboards the reverse is usually the case; you have a wide/large empty space that you get to place your content into.

Now this is good as it affords you the freedom and flexibility on how you want your content and UI to look but this won’t be as good as it sound if you are not a solid(or average) in the basic techniques of UI. These techniques/approach include but not limited to: Grid System, Alignment, Typography, Information Architecture, User Persona, Hierarchy, Effective use of White Space, Prototyping etc. I will highlight briefly how each of these affect your end product(the dashboard design).

Grid System: You should never attempt to design anything UI without using a grid system talk less of a dashboard. Why are grids important to your design? Well, here is an article explaining grid and its importance. Sorry but I won’t be covering Grid in this piece.

Alignment: Aligning objects horizontally and vertically might sound simple like a basic thing(many still haven’t gotten it) in design but it is the basic things that compounds with others to make a great product. We(humans) view in an imaginary vertical and horizontal line format, so any item not inline with the rest is automatically classified as out of place(floating). Dashboards have a lot of space to use so if any element isn’t aligned to others(vertically or horizontally) on the screen, it makes things a tad difficult for users to grasp visually; it just seem odd to the eye.

Typography: Content on the dashboard is to be presented in a clear and simple way, this guides in the selection of the right typeface for your dashboard design. Each font category have their use and peculiarities(I won’t be talking much on this so I won’t deviate from the original topic) but San-Serifs lead the way in its usage for dashboard design due to its straight, simple and clear characteristics. Popular typefaces like Inter, Gilroy, Poppins, Montserrat etc fall into this category.

Use one font family when you’re just starting out in design and a maximum of two(usually pairing a San Serif with a Serif typeface as used in this article) when you are more established with type. Anything more than two different font family/typeface is an overdo and might mar your design. Things to pay attention to after selecting the suitable typeface is the Kerning, Tracking and Leading of the type to aid adequate readability for all type of users.

Information Architecture: A solid understanding and practice(I mean usage) of IA is needed to design a proper dashboard, content needs to be classified into proper categories to aid users find items faster on the product, this also help to reduce mis-classification of content.

User Persona: Designing for Personas is what makes the difference in most products, especially for products with more than two categories of users. For instance, the dashboard/homepage of a consumer dashboard is different from that of an admin dashboard, the metrics displayed are different and so is their approach to the product. This is why it is a good practice to go through the proper process of designing UI before jumping on a design tool to design dashboards.

Hierarchy: Information have degrees/level of importance to users, making top info more visible and accessible is paramount so users won’t be frustrated while interacting with your product. Though this isn’t peculiar to dashboards but to design generally, it is an integral part of designing great products.

Effective Use Of White Space: An effective way to utilize the white space in your designs is needed to design a good dashboard. There is more than enough space for content on the dashboard most times so if you are stiff on utilizing those space for hierarchy, clarity and aesthetic purposes then your UI might end up looking stuffed and choked. See examples of good use of White Space in the images below 👇

Prototyping: Many people think designing dashboards end at the visual design(the pages), but the interaction between those pages also matters. While designing UI, always put into consideration how those pages will interact with each other. From modals to micro-pages to in-page, how these pages interact matters in the overall UX of the product; paying attention to these is a critical step in designing an overall great product.