0:02 Dashboards are a staple of any design
0:04 portfolio, but most suck. Not because
0:05 they're ugly, but because they're
0:07 disorganized and messy. So, in this
0:08 video, I'm going to show you how to
0:10 design your very first dashboard UI
0:12 completely from scratch in a way that's
0:14 simple, aesthetic, and actually usable.
0:16 And by the end, you won't just have a
0:18 great-look layout. You'll understand why
0:20 the best dashboards feel effortless to
0:22 use. It starts with the sidebar, which
0:24 houses most of the persistent and
0:25 globally relevant elements. Think about
0:27 it as the spine of your product.
0:29 Elements like navigation, profile
0:31 management and search are typically in
0:33 here, but sometimes profile management
0:35 and search can go in the top bar, too.
0:36 Starting from the top, sometimes a logo
0:38 is put up here, but I find this a more
0:40 convenient spot for profile management.
0:42 A profile picture makes it easy to
0:43 identify, and the arrows indicate that
0:46 this is clickable. Next, links. We want
0:48 to start with a recognizable icon and a
0:50 short title. This is especially helpful
0:51 if you plan on making your sidebar
0:54 collapsible, like this. And it's also
0:55 helpful if you want to add a
0:57 notification number or a new chip to it.
0:59 Navigation is all about reducing
1:01 cognitive load. To do that, we'll want
1:03 to group our links by what's relevant.
1:05 And then since settings and help center
1:07 are rarely used, we can send them down
1:09 to the bottom. As the amount of links
1:11 expands, you'll want to start nesting
1:13 links into drop downs. And make sure to
1:14 have an active state. We're using this
1:16 rectangle as an indicator. This is
1:18 optional, but if you want to highlight
1:20 features, search or integrations, this
1:21 would be a good place to put them in.
1:23 Finally, also optional, but with all
1:25 this empty space, we could add in some
1:27 notifications. Companies like Dub and
1:28 Linear have already started doing this
1:30 sort of thing. And just like that,
1:32 you've built an aesthetic, but also
1:34 functional sidebar super easily. If it
1:36 wasn't clear already, we're building a
1:38 link tracking software for this demo.
1:40 So, let's get into it. Sidebars are
1:42 relatively hard to screw up. The same
1:45 cannot be said about dashboards. This
1:46 dashboard feels like someone emptied a
1:48 drawer onto the screen. If your
1:50 dashboard looks like it requires a PhD
1:52 to operate, then it's too complex. Just
1:54 do one thing well with your dashboard.
1:56 First, I want to point out a few
1:58 important considerations. If you compare
1:59 a dashboard to a landing page, you'll
2:01 see the features of a dashboard are much
2:03 smaller because we're trying to shove in
2:05 many more things. These are the textiles
2:06 for the landing page, and these are the
2:09 textiles for the dashboard. We've got a
2:10 lot of smaller font sizes without much
2:13 spacing in between sizes. Grids and
2:14 layouts are also much more strictly
2:16 followed for dashboards than landing
2:18 pages because we're using most or all of
2:20 the space on screen. Third and final,
2:22 what you put in this main section of the
2:24 dashboard reflects what is most
2:26 important to the user. For example, if
2:27 you're building a project management
2:29 dashboard, displaying the project status
2:31 would be very useful. Or if you're
2:32 building a financial dashboard, you
2:34 should show investments right at the
2:35 top. Taking all of that into
2:37 consideration, we'll be using a very
2:40 simple two column, two row grid with
2:42 link management at the top and a few
2:44 important metrics down below. The very
2:45 top of the dashboard is generally
2:47 reserved for important page actions or
2:49 simple navigation. For our relatively
2:51 simple dashboard, we'll have a drop down
2:54 and a button to make a link, which seems
2:56 pretty important. For any data displayed
2:57 on the homepage, you'll want to keep it
2:59 super simple. So, we'll just have the
3:01 favicon, the shorten link, the actual
3:03 link, and when it was made. We'll also
3:05 add how many clicks each link has
3:07 gotten. Since we still want to have a
3:08 good amount of space in the middle, we
3:10 can add a brief description, kind of
3:12 similar to GitHub. If we wanted visual
3:14 separation, we can make each link have
3:16 its own border. But for less clutter,
3:18 we'll stack them into a list. This
3:20 layout also makes it easier to add an
3:21 empty state when there are no links to
3:23 display, which is important to be
3:25 thinking about. Now, this static list is
3:27 looking great, but in real world
3:29 applications, we need to manage data
3:31 efficiently. This is where a small micro
3:33 interaction comes in. Letting the user
3:35 select multiple links which reveals a
3:37 new contextual button, bulk actions.
3:39 Moving on to the charts below. Let's do
3:41 it properly. First, don't make weird
3:42 like this. I don't know what these
3:44 are, and neither does anyone else.
3:46 Instead, let's start with a basic line
3:48 graph. Add some grid lines and numbers
3:50 since everyone forgets those. Pop in a
3:52 quick summary and date selector, and
3:54 we're good to go. For the other one,
3:56 we'll have a bar chart to break down by
3:58 each link with the favicon on the side
4:00 to make them easily identifiable. We'll
4:01 add the same range selector and give the
4:04 user access to signups and conversion on
4:06 this chart, too. There's no reason that
4:08 charts can't be simple and informative,
4:10 but also aesthetic. But sometimes you
4:12 need some inspiration first. And one
4:14 tool I use all the time for this is
4:16 Mvin, who curates hundreds of thousands
4:18 of beautifully organized screenshots
4:20 from real apps. things like project
4:22 management tools, banking dashboards,
4:24 and even admin panels. You can search by
4:26 element like charts or even filter by
4:29 industry or device type. And it's not
4:31 just pretty UIs. It helps me see how
4:33 real teams design flows like how they
4:35 onboard users or structure complex
4:37 settings pages. You can check out Mobin
4:38 using my link in the description to get
4:40 20% off. However, most of the
4:42 functionality of a dashboard isn't
4:44 actually here in what we've built. We're
4:46 displaying a lot of information, but we
4:48 can't do anything yet. That's where
4:50 modals, popovers, and even new pages
4:52 come into play. A popover is something
4:54 like this, and best used when the
4:56 context is simple, like these display
4:58 settings, and are nonblocking, meaning
5:00 the user can click away without any
5:02 consequences. A modal is best used when
5:05 the context is more complex, but you
5:06 still want to keep the user on the same
5:08 page. This is because creating a link is
5:10 directly related to the links that are
5:12 displayed on screen. A modal is
5:14 considered blocking because you need to
5:16 click create or cancel before dealing
5:18 with other things. And since you can't
5:19 see the page when the changes are being
5:21 made, a toast notification confirming
5:23 the changes is generally a good
5:25 practice. Speaking of toasts, they're
5:26 the notification system of your
5:28 dashboard. Anytime you want to make the
5:30 user aware of something without taking
5:32 over the entire screen or prompt them to
5:34 take action, you use a toast. We talked
5:36 about empty states earlier, but toasts
5:38 are great for a warning or error states,
5:40 which frequently get missed. Finally, if
5:42 the context is more permanent or is very
5:44 large, like clicking on an existing
5:46 link, it's reasonable to direct the user
5:48 to a new page. If you're going to do
5:50 that, having a back button or breadcrumb
5:52 is pretty much required. We've just
5:54 built the bulk of one page on a
5:56 dashboard, but laying out other pages
5:58 are fairly trivial since there are
5:59 really only four main dashboard
6:02 components. First, lists and tables.
6:03 These are the most common, and we've
6:05 used several of them already, from our
6:08 link table to link details or even the
6:10 sidebar. Making a good list mostly comes
6:12 down to separation with three ways to do
6:15 it. The first is just space. The second
6:17 is lines or dividers. And the third is
6:19 with color. But making a good table is
6:21 more about functionality where
6:23 displaying the data is only half the
6:25 battle. Giving the user the options to
6:27 search, filter, or sort the table
6:29 transforms it into an interactive tool.
6:32 Next is cards. This includes our charts
6:34 and toast notifications. Most dashboards
6:36 are comprised of many cards together.
6:38 Keep the margins well spaced so content
6:40 isn't too tightly packed. Also, you can
6:42 choose between a border or background
6:44 colors. I prefer outlines on dark modes
6:46 and background colors on light mode, but
6:48 that's totally up to you. User input is
6:50 another common one. We've used these
6:52 making our link modal and any sort of
6:55 settings pages has them. Or if you're
6:57 lucky, you'll get tables with forms
6:59 inside of cards like here on Versel.
7:01 Fourth and final are tabs. These are
7:03 fantastic for essentially adding new
7:05 pages without cluttering the sidebar.
7:07 For example, in notion, we get different
7:09 views of very related tables without
7:10 leaving the context of the page.
7:12 Breaking Notion settings down a little
7:14 more, we've got mostly lists with some
7:16 user inputs and some cards once we get
7:19 to connections, all inside of a modal.
7:21 So once you master these four elements,
7:23 you can build virtually any dashboard
7:25 page. Finally, animation and interaction
7:27 on dashboards is pretty tame and user
7:29 focused when compared to some websites
7:31 and landing pages. Starting with our
7:33 chart animations, here is where we can
7:35 get a little more creative. For example,
7:37 on this chart, when we hover, we get the
7:39 number as well as a bubble with a
7:41 percent in it. Or on our other chart,
7:43 when we hover, all of the other bars dim
7:45 out. But what everyone wants is a
7:47 snappy, fast dashboard. That's where
7:50 optimistic UI comes into play. For
7:52 example, on Gmail, when I delete an
7:54 email, it disappears instantly, assuming
7:57 that the server request will succeed.
7:59 The app is optimistic that it will
8:00 succeed so you don't get these awkward
8:03 pauses before your link disappears. And
8:05 with that, you have the majority of a
8:07 functional aesthetic dashboard, which is
8:09 more than most designers can say. If
8:10 you're interested in checking out Mobin,
8:12 it'll be the first link down below. And
8:14 I also have the design files listed down
8:16 there, too. Thanks for watching, and
8:18 I'll see you in the next one. [Music]
Chrome Extension