YouTube Transcript:
EVERYTHING you need to know to build a Dashboard UI in 8 minutes (beginner friendly)
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
Available languages:
View:
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]
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
Works with YouTube, Coursera, Udemy and more educational platforms
Get Instant Transcripts: Just Edit the Domain in Your Address Bar!
YouTube
←
→
↻
https://www.youtube.com/watch?v=UF8uR6Z6KLc
YoutubeToText
←
→
↻
https://youtubetotext.net/watch?v=UF8uR6Z6KLc