How I redesigned Museo Desktop App UI dashboard.

“Good artists copy, great artists steal.” — Pablo Picasso .

I think what copying means is doing the same thing while stealing means learning from the great designs of our masters. Well this is a contradictory yet debatable phrase but today we will copy what was designed earlier by Steve Fraschini.

Today we will be redesigning a beautiful User Interface by Steve Fraschini, Museo Dashboard. As always, we shall be using Bunifu UI Framework to craft the Dashboard, so before we begin, let’s take a quick look at what we aim to design:

Credit : Museo Desktop Dashboard by Steve Franschini

The Design Process

Before we dive into the design section, lets first map all the controls we will need for us to achieve this:

mapping controls

If you’ve read my previous articles, you probably know what we are about to do. If not, please check out on other inspirations here…

Before you begin, please ensure that you have your copy of the Bunifu UI Framework library. You can download the one-week free trial to have feel of it. 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 displayed hereafter. These are handy tools that will help you design faster.

• As always, we begin by creating a new Windows Forms Project in Visual Studio — VB.Net or C#; in the newly created Form, add a BunifuEllipse and set the “EllipseRadius” property to 1. Set the back color of the form to white.

Newly created form

• Add one panel to the form and set the Dock property to left. Also, set the BackColor to rgb(242, 242, 240). On this panel, we are going to design the navigation part of the dashboard. From the mapping, we need to use a few controls namely: bunifuCustomLabel, bunifuFlatButtons, Panels and a Treeview.
• First, add a panel and dock it to the top, set the backColor to rgb(255, 94, 58), and on it add bunifuImageButton which will be the logo:

Panel with logo

• Add bunifuCustomLabel to the panel and set its foreColor property to rgb(196, 196, 196), font to (Segoe UI, 11.25pt), and the text to navigation.
• Under the navigation part, we will use bunifuFlatButtons and a treeview. Knowing that, drop bunifuFlatButton to the panel and set its backColor to that of the panel. Set text to profile and choose an icon that matches that.
• Now add a treeview contol with its parent node text as My Museo, forecolor black, font(Segoe UI, 9pt), and an image for it. Incase you are wondering where to get the image, you will need to add an imageList control and choose a collection of the images you wonna use from your local machine. The treeview has 5 child nodes with no images. So under the ParentNode, add a child node and change the properties to what you see below:

treeView window

• Note that the Treeview control is not included in our current version of Bunifu Framework but we shall have it in a future release of the framework. The final part will look like this:

panel1 design.

• Having done this, we now need to repeat what we did for the first navigation item. Add bunifuFlatButtons and design just as the previous one; hope you achieve this…

Complete navigation part

• Now let’s move onto the next part where will create a user control that helps us add a list of friends.
• Let’s look at what we aim to design first…

• Add bunifuCustomLabel and set Text to Friends and ForeColor to rgb(196, 196, 196). Now add a Panel that will contain the list of friends. Go to Project > Add User Control. Name the control “FriendsList”. Set the BackColor of the control to that of the Panel.
• Add bunifuImageButton to the control and name it “bunifuImageButton2”. Add bunifuCustomLabel and name it “FriendsName”, set the Text property to “Name”, Font to Arial Narrow, 9.75pt, style=Bold and ForeColor to rgb(199, 199, 198). For a preview of the output, take a closer look at this:

friendsList control

• In “friendslist.cs”, add the following method with the two parameters.

C# code

VB.NET code

• Now in the “form.cs”, add the code below. This allows us to add the list of friends (friendslist control) to the panel.

C# code to add friends to the panel

VB.NET code to add friends to the panel

• Ensure you add the friends() method to your Form_Load event. Build you project and check what you have achieved. Also remember to set the ScrollView property of the panel to True. This should be what you have:

Section 1

• Having done this part, we move onto our next section. Add a Panel, dock it to the top and set its backColor to white; add bunifuCustomLabels and bunifuThinButton to the panel to achieve this:

top panel

• Add another panel which will have bunifuImageButton, bunifuFlatButton and bunifuCustomLabels to look as shown below:

• Now let’s dive to the most interesting part of the dashboard.Why am I saying it’s the most interesting part? Well,this is because its an interactive part. Let me show you what we will be designing first and explain a little of what we aim to achieve.

• At the top, we have buttons which when you click on each, it loads a different set of images. The transition will be animated and when you hover on each image, we too will have an animation. Now let’s get to work…be ready to write some few lines of code too.
• Add a Panel, and on it add bunifuFlatButtons. Set the text property of each to what we have above.(you can have a few, say 5 buttons.) The BackColor of each button should be set to white, ForeColor, onHoverTextColor to rgb 222, 219, 217 and ActiveColor to rgb(255, 239, 235).

• Add bunifuSeparator and set the LineThickness property to 1, the LineColor to rgb(239, 239, 241).
• Now add a FlowLayoutPanel that will contain all the images and set its backColor property to white. In you project location, navigate to Project > bin > Debug, add a newfolder named “images”. Ensure that you have atleast 20 images and each group of 5 start with the same letter. This is because we will be comparing the first letter of the image to the letter of the button clicked and if the bool value is True, then display those images. We will achieve this through code.
• In the “form.cs” , create a function called ListImages that has one parameter of type String. Add the code below:

C# code

VB.NET code

• When you run your project, you realize that there are no images in the panel. This is simply because you have not clicked any button. But we want “S” to be the active button. Hence you need to add the function to the Form_Load event with parameter “S”.This is what I mean.

Now run your project and see what we have.

added images to flowLayoutPanel

• Now we move onto our final section. Here we will create a different User Control, and design it to look like this.

• Navigate to Project > Add User Control. Name that control “musicList”. Set the BackColor of the control to rgb(38, 46, 79). We will use the controls, namely bunifuCustomLabel, bunifuProgressbar and bunifuImageButton.
• Add bunifuCustomLabel and in the Name Property, change it to “music_name”. For the ProgressBar, name it progress and finally add the imagebutton and leave the name as its default.

musicList control

• In the “musicList.cs” add the code below.

C# code

VB.NET code

• Now we just need to add the controls to our panel using the code shown below.

C# addItem code

VB.NET code

• Ensure that you have added the AddItems() method to the Form_Load event.That marks the end of our design section. Now run your project and look at what you have achieved. Isn’t it just amazing?

final Dashboard

Conclusion

When I started learning design, I did not think I am creative enough to come up with beautiful designs. And I believe that is why many programmers don’t get into design.

But then I realised that becoming a great designer actually takes years of hard work, experimentation, and failure. With the help of Dribble’s rebound feature,where you can check out your favorite UIs, and try to copy them pixel for pixel and finally give credit to the original designer, I have managed to hone my skills in design. Hope this inspires you to try out design.

Happy designing and coding!