Step by step — Crafting TeamWave’s Organizational Profile Dashboard
Product design holds a great influence on the emotional aspect of every human.
The beauty of every hand-crafted product is on the effect it produces towards the very users for whom it is built for. Today, we will be looking at and designing TeamWave’s Organizational Profile Dashboard renovation as seen below — courtesy of Bilal Ck’s artistry. We will be using Bunifu UI Framework to model a desktop version of the product:
A Quick Peek— The Elements
Since we will be using Bunifu UI Framework, let’s get to know all the relevant controls and components that we will be using in place of the viewed UI elements:
With the mapped-out elements pointed out, we can now head over to designing the Dashboard in Visual Studio.
The Design Process
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. These are handy tools that will help you design faster.
- Let’s begin by creating a new Windows Forms Project in Visual Studio; in the newly created Form, add a BunifuEllipse.
- Next, we add a new panel as the navigation panel and dock it to the left of the form, then change the color to mimic the original dashboard; with it we’ll add a BunifuImageButton in place of the Dashboard icon:
- We can now complete the list of icons to be used on the navigation panel together with the BunifuSeparator acting as an indicator whenever a user is navigating through the icons; as seen below, the indicator is set to the left of the third navigation icon:
- Add two panels inside the form and arrange them as shown below (you can use BunifuGradientPanel for these):
- You can then go ahead and add the top-left navigation buttons. Notice that from the below preview we have two icons: the pie-chart icon and the next or forward icon; add these two icons as BunifuImageButtons right before setting the navigation buttons as shown below:
- Proceed to now adding the top-right navigation icons (each using a BunifuImageButton) and align them appropriately. Also ensure that you anchor the two lower icons (the settings and user-avatar icon) to the bottom-left of the navigation panel:
- After completing the navigation features, we can move to some “greener pastures” in the UI. We’ll first begin by designing the left panel section where the UI houses much of the descriptive content for data management motives.
- Let’s now add the pencil icon as a BunifuImageButton, the Stripe logo, and its corresponding name and web-address as shown below:
- At this point, resize the height of the form by increasing it in order to well contain the cards we’ll be adding to the panel. Drop a BunifuCard to the bottom of the logo and set the appropriate color for the same; add a BunifuSeparator at the bottom near the card-title as shown, together with an ellipse icon (“…” — as a BunifuImageButton). All the labels can be BunifuCustomLabels or Windows Forms Labels.
- Next, add another card at the bottom of the first and apply the very same colors as the first; likewise, design the card equally.
- Add a number of BunifuImageButtons within the card and choose user-profile or avatar images for each added image button. The final design for the card should look like this:
- Continue to add the final card of the left-panel and apply the same color as for the two previous cards. Now with this card, the items within it are also stacked or added inside as cards with the same card color. For this example, we will only use one card in our design. Below is an illustration of the inner cards and the elements to use:
- And below is the final output of the section with one card given as an example, together with the new deal button as a BunifuFlatButton; you can do the same for the rest of the inner cards:
Let’s now jump to the right-panel section…
- We’ll begin by designing the top-left navigation buttons; in our example, we’ll be using BunifuCustomLabels. The elements to use are as shown below:
- As shown in the inspiration, we want a scenario where once a user clicks on any selected option, or in our case label, we’ll highlight both the label clicked and the underlying BunifuSeparator together with moving the separator to the specific location of the label within the form. So, once you’ve ensured that all the controls in this section are added, we need to create a method that will be called for each label when clicked:
- Not forgetting our This week and Pipeline buttons which are BunifuThinButtons; below is one and the properties defined for it. Not that the same properties apply for both buttons:
Properties:
IdleFillColor: White, IdleForeColor: Black, IdleLineColor: 231, 231, 231.
- We continue now to the graph section, where we have the main chart and the axis labels. For the axis labels, we will use BunifuCustomLabels; for the graph, we will use BunifuDataviz. Below is a preview of the axis labels and the Dataviz spline chart as designed respectively:
As of version 1.0.1 of Bunifu Dataviz, to work with the Bunifu Dataviz component, you’ll need to add the component to your form. To do this, begin by going to the Toolbox section, right-click on it and select Choose Items, on the dialog that appears, click on Browse and locate the Bunifu Dataviz component shortcut in your Desktop folder. Thereafter, click on Okay; the component will be added to the Toolbox. You can then manually drag it to your form.
Below is the code written to generate the above spline chart:
- We will also need to customize the chart’s colors for a similar look as our inspiration. The Dataviz component works well with a Timer control which will allow the form to load first then generate the Spline chart. You can now call the above code inside your Timer control and once the form has been loaded, the method can be run and then the timer is set to stop automatically. Below is our code explaining the same:
- We now go to the deals section where three card-like elements as shown before can be used. Here, we will use BunifuCards to design a very similar model; below is one of the elements and the controls to use:
- Once you’ve designed the first card and arranged all the elements as shown, you may go ahead and do this for the remaining three cards. The final output should be similar to this:
- Finally in the last section, we’ll be adding three more cards for the activities and emails section. So let’s check on the controls that we’ll be using:
The labels Call, Email, Task, Meeting and Lunch will also be used as BunifuCustomLabels.
- In this example, only two items were designed; you can however include all in your design. Once completed, the section should look similar to this:
- Below is the section with all the three cards once completed:
Finally…
We've come to the end of our inspirational design! At the very last bit, we can run our project and see the crème de la crème of our craftsmanship…
Conclusions
You know honestly, at first, it seemed impossible to model out a design very similar to the original, but here we are… A touch of beauty with Bunifu UI Framework and our design is possible! Hope this inspirational article got you trying to imagine of what you’d truly achieve with this worthy design kit.
Happy coding and designing!
