Project analytics UX/UI dashboard Design
“Beauty is more consequential in computing than anywhere else in technology because the software is so complicated. Beauty is the ultimate defense against complexity.” — David Gelernter.
In this article, we’ll be making an uplifting work area dashboard. This Analytics Dashboard can be utilized to assess the potential benefits of a speculation or to impartially survey the estimation of a business or resource. We will be using the latest version of Bunifu UI Framework that has new improved controls’ set.
Let’s have an expeditious look of what we shall be working on:
Controls Featured
Here’s the controls’-set featured on the dashboard.
The Essentialities required
We’ll be utilizing Bunifu UI Framework for WinForms and Bunifu Dataviz for the charts. Also, you require having the Icons8 software and Just Color Picker for icons and picking colors respectively. Having downloaded Icons8, you require to create a folder for the icons in your Documents or Pictures folder where we’ll be dragging the icons selected and then later importing them to our Visual Studio project where applicable.
The design process:
- The first thing we need to do is to start a new project in Visual Studio, then choose a C# or VB.NET project and name your project “Project Analytics”. Once the form appears, drag the BunifuElipse towards the form.
- The next step is to right-click on the BunifuElipse component that you dragged in the form; select Properties and then change the property value ElipseRadius to ‘9’:
- The next move that we need to perform is to set our layout structure first using the panels. So we add two panels, dock one to the top, and the other to the bottom using the Dock property. Then apply the appropriate colors from our sneak preview with the avail of Just Color Picker:
The top panel
- Add five bunifuLabels and a pictureBox aligned side by side, and two bunifuImageButtons to the top panel.
- In these bunifuLabels we can set common properties right from the design window without moving to the Properties tab.
- Having set the right icon to the PictureBox, here’s a preview of a sample property set to the bunifuLabel from our preview:
- Repeat the same procedure for the other four bunifuLabel controls.
- For the close and minimize icons, we need to utilize the bunifuImageButtons by setting the Image property with appropriate icons.
The final output for the top panel should look similar to this:
Let’s move to the next frame…
- We can start by adding the labels on the frame and customizing their texts using HTML tags!!. Yes, you read right. 😄
- Add a bunifuLabel to that frame.
We need to achieve this format of text by just using one label with the help of HTML tags!
- In the Text property is where we’ll put the HTML and CSS tags.
- Here’s an HTML code snippet that we’ll put in the Text property to achieve the above format.
- Copy the code to the Text property of bunifuLabel. Here’s the preview:
- Repeat the same procedure for the other two labels.
- Note that from our dashboard view the labels have their own icons. So we need pictureBoxes to place those icons. It would be ideal if you note on the location of the pictureBoxes when placing the icons.
- Next, we’ll drag three Bunifu Progressbars to the form and align them horizontally, then position them as per each label above.
- The new Progressbar has cool design stuff such as setting a gradient color to the progress color. This progress bar can be used to set the label we constructed to have different random values from the progress value.
- Here’s the preview:
- Let’s set some properties to all the bunifuProgressBars. Navigate to its properties tab and set the following properties:
ProgressBackColor: 39,53,85. ProgressColorLeft: lavender blush. ProgressColorRight: 255,192,128. Animation: 2
You can set other property colors to the other bunifuprogressBars.
- Next, we’ll require a timer to perform the above activity. As usual drag the timer to the form. Double click it to navigate you to the code view. As always, it will explore you to the timer_tick event.
- We should type the accompanying code to make the bunifuProgressbar get some random value:
And we’re now done with that task. Here’s a preview:
- Drag a bunifuCircleProgressBar to the left side of the form. The intention of this control is to show an average progress from the three tasks displayed by the bunifuLabels, i.e. Back-end, Front-end and Design.
- But First, let’s set the following properties to the bunifuCircleProgressBar: ProgressBackColor: 94, 104, 132, ProgressColor: GainsBoro, ForeColor: Silver.
- Also, note that there is a text above the bunifuCircleProgress. Place one bunifuLabel to have that text and set the following two properties: ForeColor: white, Font: Courier New.
- Add the following code to the timer_tick event
//C# code
int Average = (num1 + num2 + num3) / 3;
bunifuCircleProgressbar1.Value = Average;//VB.NET code
int Average = (num1 + num2 + num3) / 3
bunifuCircleProgressbar1.Value = Average
- Build the project and run it. Here’s its preview:
Adding Bunifu Dataviz
- The procedure is exceptionally straightforward. Drag the bunifuDataviz control to your form and position it beneath the above controls then resize it.
- Next, set the accompanying properties: AxisLineColor:transparent, AxisXFontColor:transparent, AxisXGridColor: transparent,AxisXThickness:0, AxisYFontColor:transparent, AxisYGridColor:transparent, AxisYThickness: 0.
- We’re going to make a function in the code-view to display the charts and later call the function in the timer_tick event.
- We are now able to call the above function in our timer_tick event and pass the random values to its parameter:
- Now that was a heap of code composed… But we’re finished! Guarantee there are no blunders in the code before running our Dashboard venture 😅.
And now here’s our preview:
- Next, we need to put Legends right beside the chart. Legends, give a short portrayal of data being displayed using charts. They enhance lucidness and understanding whenever there are numerous information-focuses.
- Likewise, we have to mark the DataViz in the X and Y-axis.
- This should be effortlessly possible using Bunifu Labels and panels. The panels can be resized to a small size, then set their back color property to the colors displayed on the Dataviz control.
Note:
For the bottom panel, we should set a PictureBox, a Bunifu Label and a Link Label then set the suitable properties.
Finally…
The grand and final interface should mirror this magnificence:
Conclusions
That would have been a ton of work with normal controls available in .NET but has been simplified with help of Bunifu UI tools due to it’s flexibility and ability to customize further. I really hope you have learned something and if you have feedback or suggestions please leave me a comment below. If you like the tutorial some claps will go a long way!
Cheerful coding and planning! 👊
