How I redesigned Bitcoin MacOS app UI Dashboard — Part 1

“Simplicity is the ultimate sophistication.” said Leonardo da Vinci. Make no mistake, simple doesn’t mean empty, primitive or monofunctional. Instead, it means clear, intuitive and helpful. Really simple products not only solve user’s problems but also do it in an optimal way in the aspects of times and effort.

Well, today we will be redesigning a simple yet beautiful User Interface by Sergey Pikin. The Bitcoin Dashboard we will be redesigning is the light color scheme dashboard, then later we will write some code to convert it to the dark version. As usual, we will be using Bunifu UI Framework.

Lets have a quick look at what we aim to design first.

LightColor Scheme MacOS app UI

A Quick Look (Controls and Components)

Let’s map all the controls and components we need to re-design the Bitcoin dashboard.

All controls and components

The Design Process

Before we begin, you therefore need to have the tools we need to achieve the task. You’ll need a copy of the Bunifu UI Framework library. You can download a free trial here. Likewise, please have a copy of Icons8 software for “all-things-icons” and Just Color Picker utility for picking colors from any area of the UIs. These are the tools that will help you design this Dashboard.

Just like in my previous articles, I will take you through designing this dashboard step by step. Lets now dive into designing this.

• Open Visual Studio and create a new Windows form project and give it a name of your choice. From your toolbox, look for bunifuElipse and drop it on the newly created form to make it borderless. Also accompany this with bunifuDragControl to make the borderless form draggable. In the properties section, set the targetControl to your form. Set the form Backcolor to rgb(231, 231, 239).

borderless and dragable form

• Next, we will design the Left panel on the dashboard. Clearly, we need a bunifuCard with the property LeftShadow set to true

Left card

Drop bunifuCard to your form and set the dock property to Left. You also need to set the leftshadow property to true while bottomshadow and rightShadow are set to false.Shadowdepth should be set to 20. Set the backcolor and color of the card to (235, 238, 243). Now drop bunifuImageButton and choose a circular avatar. From the property section, set zoom property to 30. Add two bunifuCustomLabels and set their text to what is shown below. Note that all through we will use Segoe UI font.

• Add seven bunifuFlatButton that will be used as navigation buttons in our dashboard; set their individual properties to backcolor, normalcolor, onHoverColor: 247, 248, 250; forecolor, onHoverTextColor, Textcolor: 96, 111, 137; IconMarginLeft: 10; textFont: Segoe UI. The final section should look like this:

added navigation buttons

• This section is now complete. We move on to our next section. Add a panel and set the backcolor of the panel to 242, 242, 244. On the panel, drop bunifuCustomLabel to the form, set the following properties forecolor:96, 111, 137; Font:Segoe UI and finally the text:Overview.
• Add bunifuFlatButton and set backColor to 244, 245, 248 and the forecolor to 96, 111, 137. Now add bunifuSeparator and in the properties section, set the linecolor to 232, 234, 240 and Linethickness to 1. Add two more bunifuCustomLabel and bunifuImageButton.

• Having successfully achieved this, we can move on to the next section which houses a graph. Add a panel to the form and set backcolor to (242, 242, 244). Add a BunifuDataviz component inside the panel control, then add a Timer control (which will default to the name Timer1), set the timer’s Enabled property to True, and then add the code below related to running the Spline_chart method:

C# code

VB.NET code

Lets have a look at what we have created:

bunifuDataviz Component

• Ooh, dont forget to add the color codes of the two spline charts. Here is the code to do that. Ensure you add it to the Form_Load event.

//lets change the colors of the spline line chart from the default colors
bunifuDataViz1.colorSet.Add(Color.FromArgb(84, 119, 199));
bunifuDataViz1.colorSet.Add(Color.FromArgb(250, 102, 143));

• Now let’s move to the lower section of the form. On the form, add bunifuCustomLabel and set the text property to Asset Distribution. Add a panel and set the backcolor property to white. On the panel add bunifuDataViz component which houses doughnutChart graph that shows asset distribution. In the function that we previously had, add the code below:

C# code

VB.NET code

• The bullet “.” Unicode character will be used to style the bottom part of this section containing the bulleted-labels for the Doughnut chart (as preferredin this example): So add bunifuCustomLabel and paste the unicode character in the text property.Complete section looks like this:

Isn’t this just beautiful?

//we need to change the colors from the default
bunifuDataViz2.colorSet.Add(Color.FromArgb(54, 185, 103));
bunifuDataViz2.colorSet.Add(Color.FromArgb(250, 102, 143));
bunifuDataViz2.colorSet.Add(Color.FromArgb(253, 207, 73));
bunifuDataViz2.colorSet.Add(Color.FromArgb(84, 119, 199));

• Finally lets work on the final section. Add another panel and change backcolor to 244, 245, 249 .Here we will just need to use bunifuCustomLabels and bunifuSeparator.

• The complete designed section looks like this.

• We have come to the end of our design process. In my next article, we will see how we can use a button to switch to a darker version of the same. Lets have a look at the complete design.

Beautiful MacOS UI dashboard

Conclusion

UI design is what makes an interface beautiful while UX is what makes an interface useful.

In the design process, it is always important to establish Visual hierachy (color, fonts, spacing) and observe Gestalt principles. This enables us to create beautiful yet simple User Interfaces that will later result in good User Experience.

Happy designing and coding!