Step by step — How I designed Smart Home UI Dashboard
“Very often, design is the most immediate way of defining what products become in people’s minds.” — Jonathan Ive.
In this article, we’ll be taking a look at the SmartHome UI Dashboard and designing a mock-up of the same with the fast and beautiful Bunifu UI Framework.
But before we begin, let’s take a look at what we’ll be designing, from the very ground-up:
Quite an intuitive design, but… where exactly do we start?
We’ll now take a quick look at all the elements we can definitely work in regard to the set of visuals displayed in the dashboard.
A Quick Look — The Elements
And now let’s map out all the elements we’ll be able to work with in order re-design Smart Home’s UI Dashboard:
We’ve now identified and mapped out the list of elements we will use in designing the Dashboard.
And now, let us begin…
The Design Process
Before you begin, please ensure that you have your copy of the Bunifu UI Framework library. (Use the discount code WK20 when purchasing to get a 20% discount!) 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. These are handy tools to help you design faster.
- Let’s begin by adding the BunifuEllipse component in our newly created project form:
- Add a BunifuCard as the form’s header and dock it to the top using the Dock property:
- Next, we add a BunifuCustomLabel to the BunifuCard we docked to the top:
- Due to the grid-like sections as previewed in the Smart Home Dashboard, the best controls to use in mimicking the same design are BunifuCards. They come with a subtle shadowy effect separating each other using the LeftShadow, RightShadow or BottomShadow.
- We then add the controls as specified before inside the first panel at the top-left corner; the Bunifu Dataviz component is needed here. The code for generating the charts shown before will be viewed later:
- We can then proceed to completing the top-right section. As said earlier, we shall be using the BunifuTileButton control:
- Below is the complete preview of the entire section as designed:
- Now that the two upper sections are completed, we can proceed to designing the lower sections. As described earlier, the bullet “.” Unicode character will be used to style the bottom-left section containing the bulleted-labels for the Pie chart (or the Doughnut chart as preferred in this example):
- The complete section with all the bullet labels and percentages should look like this:
- We then add another Bunifu Dataviz component inside the “Consumption by room” section to the left-most area; at this point, we can now add our charts-generation method for creating and rendering all the charts:
Note: The Bunifu Dataviz component acts as the drawing canvas for all types of charts. This therefore allows for developers and designers alike to embed multiple charts within one Bunifu Dataviz component. The colors will also be automatically rendered at run-time in a beautiful mix, making it easier and faster for you to model out your data any time.
- Area, Line, and Doughnut charts-generator method in VB.Net:
- Area, Line, and Doughnut charts-generator method in C#:
- On adding the charts-generation method in the Dashboard’s code view, we can finally complete the last section which is at the bottom-right area. We will use the BunifuCustomLabel to do so:
- We can now drag-and-drop the BunifuCircleProgressbar to our form and set the relevant properties required:
Next, modify the following properties of the control:
* BackColor: 43, 63, 83
* ForeColor: 115, 230, 148
* ProgressBackColor: 73, 97, 108
* ProgressColor: 115, 230, 148
* Value: 82
Also note that you can copy all the existing chart-generation code inside a new method and call it once the program has been run, that is, during the Form_Load() event. As another preferred option, you can choose to embed the new function inside a Timer which can be initialized after a few milliseconds (preferably 100 milliseconds) once the form is loaded. The Timer can then be stopped once the method has been called to avoid re-rendering the charts.
An example from the above note is shown below — please ensure that you’ve dropped a Timer control inside your Dashboard Form to use the code below:
- For VB.Net:
- For C#:
Next, we can include the colors listed below to be rendered with the charts at the form-loading event:
- For VB.Net:
- For C#:
Finally…
After all is set and done, we can see the final mockup as designed using the Bunifu UI Framework:
Conclusions
I hope you’ve been able to wrap your head around the design-bliss with this UI Framework… And it doesn’t end here. Such visually stunning ideas can be incorporated into Desktop systems and tools with a craft so unique your users won’t have to hedge around visibility and/or design issues.
Happy coding and designing!
