Dribbble is an awesome place to get dashboard UI design inspiration.
No matter if you’re working in Sketch, Figma, InVision Studio, etc., this is a great way to ignite some initial ideas and get your mind in a state of flow.
That being said, a lot of these designs build off of each other.
Within the community of designers, you’ll find many similar techniques and visual designs.
For example, you’ll tend to find a lot of rounded edges and fun UI backgrounds (like the orange background in the first in our list).
It’s important to remember that many of these designers are showing their visual prowess, rather than UX.
That’s why, in this article, we’ll share seven dashboard UI designs we love along with how they can be improved from a UX design standpoint.
- This food delivery concept tries something different by showing the food types available in the application (e.g. Pizza, Asian). It’s fresh, and it’s a smart idea having “All” be the first option to show users what’s available.
- You can tell that this app is playful, not only from the background but also from the orange highlight color for buttons–visually communicating “orange fresh.” Not only that, but they use some emojis here and there. Very fun!
- This app uses space wisely with the checkout/delivery information to the right. Seeing that while seeing the restaurants encourages users to keep shopping for food.
- Each restaurant tile includes the estimated delivery time for users. This is great to have because it’s upfront, which doesn’t require the user to go to every restaurant detail page to see the time when they’re in a rush for food.
Room for Improvement:
- This app has a missed opportunity. They should have taken advantage of having data on the restaurants, like the estimated time of delivery and cost, to allow users to filter the restaurant choices.
- While the food types choices are really neat, the app should have included search functionality so that expert users or users who are starving and know what they want can more quickly find their choice of food.
- The banner that says “$0 delivery for 30 days!” takes up a bit too much vertical padding. It’s great that the app is showing users this awesome deal, but, in my personal opinion, I think they could have tightened the vertical space some more in order to show the meat of the app–the restaurants and their food–more immediately.
- I’m not sure if this is because it’s a single page UI design, but hopefully users will be able to scroll down to see more than just 3 restaurants at a time on this page.
By Vlad Ermakov
- Apps like digital storage apps can easily become complicated. The temptation might be to allow users to do as much as possible with a ton of features. However, this scares away new users. Vlad did a great job of keeping the app design simple while showing a number of features.
- On the top-left UI, users are creating a new storage folder. Part of the challenge for UX designers is how much to show users upfront when they’re making a new project. This app kept it nice and simple by only showing three fields–the most important ones. Users can then later add and edit details.
- This app nicely uses native phone affordances. In other words, users are able to swipe in order to interact with the app, which shows that this app takes its medium into account. It looks like when a user swipes left on a file, they have a few options: downloading, copying the link, and deleting.
- They use blue and grey shadows to create a 3D effect, which makes the app look visually stunning.
Room for Improvement:
- Continuing on about the app affordance where the user can download, link, and delete, I’m actually not sure if the “X” means trash. In this case, it could also mean to hide these three choices instead of deleting. If the app meant deleting, they should have gone with a trash symbol instead because people recognize that to mean deleting more than an “X.”
- If you have trouble seeing, this app won’t make it any easier to look at. They use some grey text on a grey background. The bell icon in the top right corner of some pages looks washed away. If you aren’t ever sure if something is hard to see, then use this color contrast checker to check. As UX designers, we must always keep accessibility in mind. At the very least, the button isn’t surrounded by other calls to action (CTA’s), so they have that going for them.
- This interesting desktop dashboard, like many of the users we listed, uses colors sparingly. Blue and teal are the primary/secondary colors, and this is a crisp combination that caters well to businesses and professionals especially. It also helps create a contrast with the orange color that represents a worse, lesser percentage.
- Unlike almost all of the other dashboard designs in this article (and on Dribbble), this application uses more square-ish shapes instead of rounded ones. It made this app stand out. Plus, it contrasts well when it uses the rounded shapes under “Salary Target.”
- Graphs are a great way to show statistics to users, especially on a dashboard. When it comes to numbers, graphs provide a great way to visually communicate information that users might otherwise have trouble understanding. On top of that, it visually breaks up the content very well.
- The “Income” and “Spending” are great features to show the users on the dashboard. Though they should probably label it as this year, or for the past 365 days, it’s not something I’ve come across yet on a dashboard (feel free to link one in the comments if you’ve seen it). A lot of banks and investing apps are missing out on this feature that users would love.
Room for Improvement:
- At least in English, there seems to be a typo with the word “Salary.” They spelled it “Sallary” instead of “Salary.”
- The second Visa card listed is really blending in with the blue background. I’m not sure if this is because we’re only looking at the first card’s details or not. Even if that’s the case, I feel they should add another visual representation to show that only what card is being viewed at a time. For example, they could put a vertical bar to the left of the card to highlight it. They could even create a white border around the card.
- I’m seeing $28,520 on the left side and $280,520 on the right. Are these numbers supposed to be different? From a hierarchy standpoint, I would think the left number under the profile would show the overall total because all the cards are listed over there.
- This visual exploration for a finance app nicely puts important actions near the top of the page (on the left UI). Because they limited it to only four calls to action (CTA’s), it should be effective without being overwhelming.
- The app shows the hierarchy of information very well. The “Recent Transactions” is separated from the top CTA’s and general profile information through the blue background on top and grey background underneath.
- Because blue is the dominant color, we can see the contrast very well with other colors on the UI, like the orange and green. It’s a great way to call attention to important, time-sensitive information.
- The app shows the card settings in an appealing way using icons and a white background. It also fills up space that would have otherwise been left empty.
- The app uses the mobile affordances well, just like the previous app we covered. Instead of showing the cards in a vertical format on the right UI, it lets the user swipe while showing a carousel of how many items there are underneath. It’s a very effective use of space.
Room for Improvement:
- It’s pretty hard to see which navigation tab you’re on (the left UI shows Home, the right UI shows Cards). If a new user is viewing this on a sunny day, they’ll have trouble seeing where they are in the app.
- This app greys out buttons that are not currently being viewed. For example, on the left-hand side, “Income” and “Expense” are greyed out. This makes them look like they’re disabled, not that they’re not selected. A better solution would be to invert the colors of used and not used tabs. Since we’re looking at “All”, have the background be blue and the text white. For the buttons to the right of it, have the background white and the text blue.
- This is not bad as much as it’s an opportunity, but for the left UI, maybe the top blue section disappears as the user scrolls down. They’ll be able to see more of the transactions this way, and then when they scroll up, the blue background section maximizes to this height again. The shape of the grey background for “Recent Transactions” is already suggestive of this possibility. What do you think?
- This fun dashboard remake of Counter-Strike: Global Offensive is really fun to look at. It uses rounded shapes to look more user-friendly and playful, which is perfect for a gaming community.
- This app knows its users. Many gamers play in low lighting environments, and so this dark-mode will surely be easier on their eyes.
- Due to the darkness of the background, it’s easy for users to see the bright colors that are supposed to grab their attention. It’s clear that the three boxes in the center are the main focus of this page because of their popping colors and, well, they’re in the center.
- With any gaming platform that’s multiplayer, you want to create a sense of community. That’s why it’s great they put the chat to the right-hand side. The user can also minimize the chat, creating space for the content while always allowing users to interact with the community.
- To increase engagement, it looks like the app has a Youtube icon in the top-left corner. Connecting the game’s social media without being super in-your-face is a great addition to the page.
- With any game, you need to have appealing visuals. We can see the items in the UI which, thankfully, stand out due to the background. I feel like they could have made the weapon on top a little bit bigger, but it’s not the biggest concern.
- It looks like there’s a help/support icon at the top. You want to make it clear to the user that you’re there to help when it comes to any app that can be complicated or large. I’m sure many gamers would appreciate this, especially when it comes to spending their money.
Room for Improvement:
- Probably the biggest issue here is that the app’s dashboard is missing a lot of labels. If I was new here, I wouldn’t know why that red weapon was showing at the top. Was someone giving it to me? Was it on sale? Is it a gift? The same goes for everything on the left-hand side of the UI. Why are they showing me these on the dashboard?
- I feel like the left-hand column and the chat on the right could have a more clear visual separation from the middle column’s content. The shades of blue still blend together too much, so they could at least try using more differentiated shades.
- Judging by the American flag symbol on the top-right corner, this is the view for an American audience. I find it a bit weird that the dollar symbol is to the right of the amount it’s describing. Like us Americans are used to, they should probably move it to the left.
- The designer has decided to let the content pop by using softer pastel backgrounds – but without it feeling white and empty as can sometimes be the case.
- Because this is a gaming platform, the usual interface elements are made to be fun by using background graphics that feel like a video game location.
- Cards are spacious and are easy to read. The layout is a standard pattern that makes it obvious that these cards are clickable content that will take you to detail pages.
Room for Improvement:
- The navigation bar can be a little difficult to discern. Double left-hand panels are growing to be popular, but from first glance the icons aren’t completely obvious on where they take you. The second-tier white hand panel is using a lot of space as well for two icons, so it seems a little wasted.
- Both side panels (navigation and Group chats) don’t seem to be collapsible panels. They take up substantial room on the page.
- It’s not often we get teal user interfaces that don’t feel dated. The designers choice of color combinations is refreshing, but still feels modern by using them in color-block style on the card.
- The hierarchy of the page is standard and clear. We know the left hand side is reserved for dashboard items, while the right is explicitly for calendar.
- Even though there are two layers of tabs with the same style, it’s absolutely fine here because of their distance from each other.
Room for Improvement:
- The calendar is visually wonderful, but a lot of interaction questions could be asked. For example, if there are multiple events in one day, which color gets priority on the month-view?
- The yellow color compliments the teal as an accent, but for font it is becoming too light for easy-reading.
- Do we need the calendar on every tab in this view? Allowing it to be collapsible would bring some much needed space.
Understand UI Design with our short walk through tutorial.
As designers, we’ve all been through some wild obstacles that tested our sanity and patience. The bright side is we can learn from every situation. Here are some stories from designers we know!
We all want to make those pixel-perfect mockups, right? However, choosing the right color combination isn’t always easy. You