Step by Step — How to design an Invoices Dashboard
In this article, we will take a look at the Invoices Dashboard designed by Hrvoje Grubisic as we go ahead to designing a mock-up of the same with the beautiful and snappy Bunifu UI Framework.
Before we begin our design process, lets have a look at the end result…
A Quick Look (Controls and Components)
Let’s map all the controls and components we need to re-design the Invoices dashboard.
We are now set to begin…
Design Process
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.
Let’s begin by opening visual studio and create a Windows Form Application with a name of your choice and click OK.
- First we need to add the BunifuElipse component to our newly created form in order to remove borders:
- Now let’s add two panels, dock one to the top and the other to the left using the Dock property.
- Next, add 9 BunifuCustomLabels and set the forecolor property to white and texts as shown below:
- Now lets go ahead and add BunifuTileButtons and set the icons as shown. These are added on the navigation panel that we docked to the left.
For the icons used, you can get them all for free using Icons8!
- Add any resizable control, for instance PictureBox control which will act as an indicator whenever a user navigates through the icons, and set its color to rgb(122,117,195). Use the Location property to set the control’s X and Y positions simultaneously.Results are shown below.
- Add BunifuCustomLabel, Link Label and BunifuSeperator to the form and in the Properties section, set the text to what is shown below:
- Now add two Panels , set backcolor to white and add BunifuCustomLabels to the Panel on the Left.The complete section should look like this:
- Add this to the panel on the right. For the green and blue bullets, add BunifuCustomLabels and on the text property, add the bullet “.” Unicode character.
- Add the Bunifu DataViz component to the panel on the right and write the code shown below in order to draw the chart (Bunifu Stacked AreaChart). You can run to see the results. You notice that there are default colors for the graph.
- Now change the colorset to the colors we want using the code below.
- The complete section will look like this:
- Now that we are done with the upper section, we can proceed to the lower section. Here we will use a different User Control that has BunifuCustomDataGrid. We will load data to the DataGrid with rows and columns.
- Go to Project > add User Contol. Add 2 BunifuFlatButtons and on the text property, set to what is shown below. Drag BunifuCustomDataGrid control onto the User Control.
- Finally, lets add data to our BunifuCustomDataGrid. Right click on the BunifuCustomDataGrid and select add column. Add five columns and ensure you set the ColumnType to DataGridViewTextBoxColumn except for the first column (Status) whose type is DataGridViewButtonColumn.
- Now return to the Form design part and drag the user contol onto the lower section of the form. Run the project and see if you have the result shown below.
- Well now the final step is to add the rows onto our BunifuCustomDataGrid. Double click on the user control and in usercontrol.cs (Load event)add the code shown below.
- Now save changes and run the project and if what you have is the result shown below, congratulations you got it right.
Resource Link
Conclusion
Visual design is the process of transforming your wireframe ideas into mock ups. This is exactly what we have done here. At first this seemed challenging but with the help of Bunifu UI Framework, it wasn’t hard to achieve. Hopefully this inspires you to do more mockups using Bunifu UI Framework.
Happy coding and designing!
