How to Design a Sleek Dashboard UI
Welcome to the step by step UI guide. Please note, that this is not a “legit” process on how to create a product. We will focus on creating a clean, consistent UI, and we skip all the research/user experience/whatever you like to call it/steps. Basic idea & rough wireframe Let’s start with an idea for a dashboard.We are going to create a dashboard for a healthcare industry, preferably doctors, who have daily shifts, different patients and other duties (my aunt is a doctor, and actually she is not only saving lives, but as she says “there’s sh*tload of paperwork to do”). I will use Sketch for the whole process. Usually, I start with a very low-key wireframe. I create a rectangle and some other rectangles, and I change their sizes and arrangement until I’m happy with the result. I choose some random but similar colors so I actually see where the rectangles are. At this point, I also have in mind what kind of content I want to show and where. In the next step, I’m choosing fonts, colors, and styles that I’m going to use. So, as in my previous article, we are going to create a little design system/stylesheet/call it as you like. Font(s) For this dashboard, I chose “Sofia Pro” as my main font. Only this one.Actually, you don’t really need many fonts to create a nice UI.I prefer to work with one font, or maybe two (one for headings, one for text blocks). Instead of using many fonts, try to differentiate the same font with such parameters as size, weight, and color. As you can see in the picture above, I’m using only four font sizes (52p/32p/24p/18p) and two font weights (bold and medium). I’m also using three main colors — vivid blue (accents), dark blue (regular text), light blue (detailed info, it is actually dark blue, but with opacity around 30%!).If you have problems with choosing the right font sizes, try using the golden ratio method. Color palette For colors, I rarely use color wheels or premade palettes. I like to choose colors by hand. Yet, they are very helpful if you are not feeling very comfortable with color-picking. It’s quite important to know the basics of color psychology and have the ability to choose the color palette that will be suitable for a certain kind of a product/industry. We are creating a dashboard for healthcare, so the suitable colors would probably be blues and greens, as they are the most popular, likable colors, they are soothing, relaxing, and they create a feeling of professionalism and trust. I choose my main color — for this project, a vivid, bold blue. I lower the opacity and I get my second color — for example, for backgrounds. I’m choosing my dark blue from the same color map (HSL). I also lower the opacity of that color and that’s how I get another, less saturated color which I can use for background. And then I choose my favorite color, the color of empty space and harmony, which in the designer world is white, of course. We also need some other accent colors to differentiate content. I pick them only by slightly changing the Hue (H) parameter on the color map. They will look good with each other, unless you won’t mix the cold with the warm ones. UI element styles We also need some other accent colors to differentiate content. » Read More
Like to keep reading?
This article first appeared on prototypr.io. If you'd like to keep reading, follow the white rabbit.