EVERYTHING you need to know to build a Dashboard UI in 8 minutes (beginner friendly) transcript

Dashboards are a staple of any design portfolio, but most suck. Not because they're ugly, but because they're disorganized and messy. So, in this video, I'm going to show you how to design your very first dashboard UI completely from scratch in a way that's simple, aesthetic, and actually usable. And by the end, you won't just have a great-look layout. You'll understand why the best dashboards feel effortless to use.

It starts with the sidebar, which houses most of the persistent and globally relevant elements. Think about it as the spine of your product. Elements like navigation, profile management and search are typically in here, but sometimes profile management and search can go in the top bar, too. Starting from the top, sometimes a logo is put up here, but I find this a more convenient spot for profile management. A profile picture makes it easy to identify, and the arrows indicate that this is clickable.

Next, links. We want to start with a recognizable icon and a short title. This is especially helpful if you plan on making your sidebar collapsible, like this. And it's also helpful if you want to add a notification number or a new chip to it. Navigation is all about reducing cognitive load. To do that, we'll want to group our links by what's relevant. And then since settings and help center are rarely used, we can send them down to the bottom.

As the amount of links expands, you'll want to start nesting links into drop downs. And make sure to have an active state. We're using this rectangle as an indicator. This is optional, but if you want to highlight features, search or integrations, this would be a good place to put them in. Finally, also optional, but with all this empty space, we could add in some notifications. Companies like Dub and Linear have already started doing this sort of thing.

And just like that, you've built an aesthetic, but also functional sidebar super easily. If it wasn't clear already, we're building a link tracking software for this demo. So, let's get into it. Sidebars are relatively hard to screw up. The same cannot be said about dashboards. This dashboard feels like someone emptied a drawer onto the screen. If your dashboard looks like it requires a PhD to operate, then it's too complex.

Just do one thing well with your dashboard. First, I want to point out a few important considerations. If you compare a dashboard to a landing page, you'll see the features of a dashboard are much smaller because we're trying to shove in many more things. These are the textiles for the landing page, and these are the textiles for the dashboard. We've got a lot of smaller font sizes without much spacing in between sizes.

Grids and layouts are also much more strictly followed for dashboards than landing pages because we're using most or all of the space on screen. Third and final, what you put in this main section of the dashboard reflects what is most important to the user. For example, if you're building a project management dashboard, displaying the project status would be very useful. Or if you're building a financial dashboard, you should show investments right at the top.

Taking all of that into consideration, we'll be using a very simple two column, two row grid with link management at the top and a few important metrics down below. The very top of the dashboard is generally reserved for important page actions or simple navigation. For our relatively simple dashboard, we'll have a drop down and a button to make a link, which seems pretty important. For any data displayed on the homepage, you'll want to keep it super simple.

So, we'll just have the favicon, the shorten link, the actual link, and when it was made. We'll also add how many clicks each link has gotten. Since we still want to have a good amount of space in the middle, we can add a brief description, kind of similar to GitHub. If we wanted visual separation, we can make each link have its own border. But for less clutter, we'll stack them into a list. This layout also makes it easier to add an empty state when there are no links to display, which is important to be thinking about.

Now, this static list is looking great, but in real world applications, we need to manage data efficiently. This is where a small micro interaction comes in. Letting the user select multiple links which reveals a new contextual button, bulk actions. Moving on to the charts below. Let's do it properly. First, don't make weird like this. I don't know what these are, and neither does anyone else. Instead, let's start with a basic line graph.

Add some grid lines and numbers since everyone forgets those. Pop in a quick summary and date selector, and we're good to go. For the other one, we'll have a bar chart to break down by each link with the favicon on the side to make them easily identifiable. We'll add the same range selector and give the user access to signups and conversion on this chart, too. There's no reason that charts can't be simple and informative, but also aesthetic.

But sometimes you need some inspiration first. And one tool I use all the time for this is Mvin, who curates hundreds of thousands of beautifully organized screenshots from real apps. things like project management tools, banking dashboards, and even admin panels. You can search by element like charts or even filter by industry or device type. And it's not just pretty UIs. It helps me see how real teams design flows like how they onboard users or structure complex settings pages.

You can check out Mobin using my link in the description to get 20% off. However, most of the functionality of a dashboard isn't actually here in what we've built. We're displaying a lot of information, but we can't do anything yet. That's where modals, popovers, and even new pages come into play. A popover is something like this, and best used when the context is simple, like these display settings, and are nonblocking, meaning the user can click away without any consequences.

A modal is best used when the context is more complex, but you still want to keep the user on the same page. This is because creating a link is directly related to the links that are displayed on screen. A modal is considered blocking because you need to click create or cancel before dealing with other things. And since you can't see the page when the changes are being made, a toast notification confirming the changes is generally a good practice.

Speaking of toasts, they're the notification system of your dashboard. Anytime you want to make the user aware of something without taking over the entire screen or prompt them to take action, you use a toast. We talked about empty states earlier, but toasts are great for a warning or error states, which frequently get missed. Finally, if the context is more permanent or is very large, like clicking on an existing link, it's reasonable to direct the user to a new page.

If you're going to do that, having a back button or breadcrumb is pretty much required. We've just built the bulk of one page on a dashboard, but laying out other pages are fairly trivial since there are really only four main dashboard components. First, lists and tables. These are the most common, and we've used several of them already, from our link table to link details or even the sidebar. Making a good list mostly comes down to separation with three ways to do it.

The first is just space. The second is lines or dividers. And the third is with color. But making a good table is more about functionality where displaying the data is only half the battle. Giving the user the options to search, filter, or sort the table transforms it into an interactive tool. Next is cards. This includes our charts and toast notifications. Most dashboards are comprised of many cards together. Keep the margins well spaced so content isn't too tightly packed.

Also, you can choose between a border or background colors. I prefer outlines on dark modes and background colors on light mode, but that's totally up to you. User input is another common one. We've used these making our link modal and any sort of settings pages has them. Or if you're lucky, you'll get tables with forms inside of cards like here on Versel. Fourth and final are tabs. These are fantastic for essentially adding new pages without cluttering the sidebar.

For example, in notion, we get different views of very related tables without leaving the context of the page. Breaking Notion settings down a little more, we've got mostly lists with some user inputs and some cards once we get to connections, all inside of a modal. So once you master these four elements, you can build virtually any dashboard page. Finally, animation and interaction on dashboards is pretty tame and user focused when compared to some websites and landing pages.

Starting with our chart animations, here is where we can get a little more creative. For example, on this chart, when we hover, we get the number as well as a bubble with a percent in it. Or on our other chart, when we hover, all of the other bars dim out. But what everyone wants is a snappy, fast dashboard. That's where optimistic UI comes into play. For example, on Gmail, when I delete an email, it disappears instantly, assuming that the server request will succeed.

The app is optimistic that it will succeed so you don't get these awkward pauses before your link disappears. And with that, you have the majority of a functional aesthetic dashboard, which is more than most designers can say. If you're interested in checking out Mobin, it'll be the first link down below. And I also have the design files listed down there, too. Thanks for watching, and I'll see you in the next one. [Music]