In this tutorial we’ll be designing a Finance Desktop Dashboard application in Sketch. This will serve as a good foundation for anybody who’s looking to improve their knowledge of how to design in Sketch or get a better understating of general UI design practices.
What We’ll Need
Before getting started, we’ll need a couple of assets and tools, such as:
- A good-looking sans-serif font that will be both modern-looking and robust. For example: Graphik, Maison Neue, Roboto, Proxima Nova etc.
- An icon pack that we’ll use for the sidebar and within the application. There are a multitude of icon packs out there you could use, my choice of premium icons being the Streamline Icons set. If you’re looking for something free then using the IconFinder or Icons8 platforms could be of great help.
- A design tool of your choice. For this tutorial we’ll be using the Sketch App, but using Adobe XD or Figma for design won’t make following this tutorial any harder.
We’ll begin setting up our working space and will create an artboard by using the presets inside our application. By clicking the A tab we’ll access the artboard creation tool. Select the canvas size that best fits your needs.
2. Add the Most Important Elements
In order to make things easier when it comes to working with repetitive UI elements and styles, we’ll be creating a small style guide with the most important things such as colors, buttons, text styles, and other base elements.
Do not go over board with this; stick with the essentials in order to avoid over-cluttering your style guide. You’ll be able to find all of these things on the left side of the sidebar under the components category.
For a better understanding of how symbols work use this tutorial which describes how different interaction states work within symbols.
3. Start With the Base
We’ll start by creating two rectangles on a light grey background. The rectangle that’s on the left side of the canvas will serve as the foundation of the sidebar and the rectangle at the top will serve as the foundation of the top-bar.
In a previous tutorial where we created mobile onboarding screens, we set a certain style and used a mock logotype.
Given the fact that we’ll be using the same font families, colors and design patterns, I’ll be using the same mock “myfinances” logotype for this tutorial as well.
We’ll move forward with defining the button styling, both the primary and the secondary buttons. Create two rectangles of the same size; we’ll attribute our primary accent “green” color to the main button and we’ll design the secondary button in a subtle and minimalistic style by making it white with a subtle grey border.
We’ll make the button links 14px with a semibold weight in order to have more visible/pronounced text strings.
For the primary green button we’ll make the text white and for the secondary button we’ll be using the outline color attributed to the button as the color attributed to the link. We’ll add these buttons in the right corner of the top bar.
Use the same font size and light grey color for the top navigation links, with the exception of the currently active link, which for us is “Budget Overview”. For this link we used a dark shade of grey.
The next step, is to add the sidebar navigation links which will be responsible for the main navigation functionality in the app.
In order to make the navigation easier from a UX-standpoint, it’ll be a good idea to add suggestive icons to the links as they help with making identification of the desired link easier. The size of the icons should be correlated to the size of the text. In our case, the text size is 15px.
As with the top bar navigation, the active navigation link in the sidebar needs to be emphasized.
We’ll be creating a hover effect by using our active/shade colors, which means that both the text string/link and the icon associated with it will receive the active green color we’re using throughout the interface.
We will also create an additional rectangle as the background of that link with the purpose of giving it even more accent. Give that rectangle an opacity of 20% off the main green color, bringing in just the right amount of color.
This is what things look like at the moment.
4. Creating the Header of the Page
In order to design the welcome message that will be right at the beginning of our content area within the dashboard, we’ll be using a headline paired with an avatar. This will serve as a means of identification of the user that is logged in alongside a salutation message.
For the avatar, we’ll be creating a circle that will act as the foundation of a mask. Straight away, we’re creating a separate folder for the mask in order to isolate it from other elements. After that, we’ll be importing the necessary image over the circle area and the mask will be automatically created.
Upon doing that, we’ll write down our welcoming message with a paragraph alongside it. In order for the text to be more prominent, we’ll be using bold styles and bigger sizes (our headline being 26px and the paragraph is 13px).
To the right of the headline welcome message we also have a tab that is made of a rectangle with a separation line and a slightly colored half-background (#f9f9f9) that provides the visual cues that show a certain tab being as active/inactive.
We’re also adding a 13px-sized text string of two different colors which will help better understand which tab is the selected one and which isn’t (the black one representing the active link). Adding a slight shadow effect to it will add some pleasant depth.
5. Design the Dashboard Content and Tables
Due to their complexity, dashboards very often use the first graphics or content sections they display on the primary pages as tables or modules displaying general or overview information.
From a UX standpoint, that’s a good approach to simplify complex information and provide a glimpse of important data points straight away. I’ve decided to follow the same pattern and have designed a Quick Stats View graphic at the top. This tab will contain information about expenses, the account balance or expenses.
We’ll need to style the shape that will serve as our background which will lay at the foundation of all the tables on this dashboard. This will be a white-colored rounded rectangle with a corner radius of 6px and a shadow effect that’s similar to the shadow style above (the one which we have attributed to our tab element). Whenever possible, try to maintain consistency in style and effects attributed to UI elements.
The content-holding blocks in our design will have a title. For that, we’re using a dark-colored (#E3E8ED) typeface that’s 17px in size and is divided by a 1-pixel grey line.
For the quick view information blocks, we’ll be using for proportional boxes that will be identical in size and will be placed at a distance that’s equal between them. We’re giving these a 20px padding. The boxes within the container will be grey, subtle and one of them will be considered as primary and will have an accent green border color of 2 pixels.
Add Content to Blocks
The last phase is to add content to these boxes which consist of icons, statistics and a description of that stat. The pronounced number is 28 pixels in size and of the active color just like the primary box. The label text will be 13px in size.
6. Graph table
At the foundation of the container with the graphic will be the same content-container used in the previous sections. In the header of the container, we’ll display status information and its name. We’ll also add in the graphic lines which will serve as the base of the graphic.
We’ll select the Vector tool and will start drawing the direction of the graphic. Each graphic that will overlay on the other has to be slightly darker than the other in order to make them both noticeable. We achieve that by giving them different opacity percentages, in our case we’ll give the bottom graphic a 70% opacity and the upper one 80%.
The tooltip part is simple as well. We’ll be using a circle that will serve as the chosen data point and that will be made of a green circle with a 2px white outline/stroke. There’s a vertical grey line that intersects the tooltip and the graphic and a dark grey (#4A4D50) background with a more detailed breakdown.
Here’s the result so far:
7. Bottom Part, 3 Sections
All tables within the bottom three sections will have the same styling as the ones we already have. The only exception is the first box which will have its colors inverted. The base color is green with a paragraph of text, a headline, and a call-to-action line. The headline is 24 pixels in size, the paragraph is 15 pixels in size with an opacity of 70% off white.
The piechart in the next box will be slightly more complicated to create (but not impossible). We will need a circle with no fill, but a border. A 15px border is what we’ll use here to which we’ll apply a gradient styling, giving us the tri-color effect.
The labels near the piechart follow the same text styling as the other elements within the design.
The content for the last container consists of a quick stats view shown as three progression bars, all of the different colors and depicting different fill levels. The progression bars have faded versions of themselves in the background which helps achieve the same stylistic effect as observed in other design components throughout the design.
Add headlines, relevant icons made out of outlined rectangles turned at 45 degrees, and other informative descriptions for the headlines corresponding to each of progression bars.
Here’s how the final design looks!
That’s it For Today!
This concludes our tutorial on how to design a finance dashboard UI. We hope it has been helpful and that you’ve learned something new. If you have any questions we’ll be happy to answer them in the comments section below!
Learn Sketch With Tuts+ Courses
No comments:
Post a Comment