Step by Step — Redesigning Sales UI DashBoard

A sales dashboard is a software application that is used to track sales KPIs and metrics, and that displays them to your team using easy-to-read graphics such as charts, gauges, and other visualizations.

In this article, we will take a look at the Sales Dashboard designed by Farzad Ban for 3drops in Quotebox as we go ahead to designing a mock-up of the same with the beautiful and fast Bunifu UI Framework:

Sales Dashboard courtesy of Farzad Ban

Well, I seek to show the capabilities of dataviz and Bunifu UI Framework WinForms Controls.

Before we begin, it’s required that you have a copy of the Bunifu UI Framework library. You can download the one week free trial . 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.

The Design Process..

• Lets begin by creating a new Windows Forms Project in Visual Studio; in the newly created Form, add a BunifuEllipse in order to remove borders;

• Add bunifuCard and set the dock property to fill. In the properties section, set the BottomShadow to True.

bunifuCard with BottomShadow set to True.

• Next, add another bunifuCard and set the RightShadow to true with thickness of 1, set its backcolor to rgb(247, 250, 252) to mimick the inspiration dashboard.

Form with two bunifuCards

• Having successfully done that, we can now begin designing the elements on the left-docked bunifuCard. Add two bunifuCustomlabels and set text to 3drops and general respectively. Set the forecolor to the colors shown below

• Now let’s add bunifuFlatButtons with an icon to the left and text. Set texts and colors to what is shown below.

bunifuFlatButtons

• Add any resizable control, for instance bunifuSeparator control which will act as an indicator whenever a user navigates through the icons. Use the Location property to set the control’s X and Y positions simultaneously. To achieve this, you need to add the following code.

C# code

VB code

• Add bunifuCard and dock it to the Top. Set the backColor to rgb(46, 124, 206).

• Now add three bunifuFlatButtons to the card. Set the IconVisible property to False. Set the text to what we have below.

• Let’s now proceed to add a BunifuDataviz component inside the BunifuCard 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 line chart method:

C# sample code

VB code

• Finally, we need to add bunifuCustomDataGrid and add four columns to it. Drag BunifuCustomDataGrid control onto the form. Right click on the grid and select add column. The first columnLabel is Recent Leads, second and fourth has no text while the third columnLabel is Quotes Sent. Ensure you set the ColumnType to DataGridViewTextBoxColumn. Well now the final step is to add the rows onto our BunifuCustomDataGrid. In the form_Load method, add the following code.

C# code

VB code

• Run the project to see what we have achieved so far. If this is your outcome, congratulations you got it right.

Resource Link:

• Source code: https://github.com/bunifu-framework/Inspiration-Sales-UI-Dashboard

Conclusion

UX design is what makes an interface useful, and UI design is what makes an interface beautiful. It is amazing what we can achieve with the help of Bunifu UI Framework. Visual design is the process of transforming your wireframe ideas into mock ups.

I really hope that this inspires you to do more mockups using Bunifu UI Framework.

Happy coding and designing!