How I designed a Cryptocurrency UI/UX Dashboard for Sales Management
In this article we will be creating an inspiration desktop dashboard inspired by Bragas Prayogo’s concept for Morva Labs. We will be using Bunifu UI and Microsoft Visual Basic PowerPacks controls that we will download and integrate it in visual studio.
let’s review our dashboard
Controls Features
Here are the controls featured in the dashboard. Let’s take a quick preview of them before we begin our design tour
![pcture 1](https://bunifuframework.com/wp-content/uploads/2024/07/pcture-1.png)
In the bustling world of cryptocurrency, where volatility is the norm and fortunes can change in an instant, CoinMate emerged as a beacon of stability and success. Founded by tech enthusiast Sarah Martinez in 2017, CoinMate aimed to simplify the complexities of cryptocurrency trading for everyday users. However, by 2020, the company faced a critical challenge: managing their sales pipeline effectively as their user base grew exponentially.
Sarah realized that traditional sales management systems were not equipped to handle the unique demands of the cryptocurrency market. Transactions occurred at lightning speed, regulations varied across regions, and the sales team needed real-time data to make informed decisions. Recognizing these challenges, Sarah set out to create a customized sales management system tailored specifically for the cryptocurrency industry.
Kickstart Your Journey
- Begin your adventure into creating a stunning Sales Management Dashboard by setting up the essentials.
- First, let’s set up our environment.
I will be using Bunifu Framework for WinForms in this example. If you do not have a license for Bunifu UI, don’t worry! Bunifu offers a free trial, allowing you to experience its full range of features before committing to a purchase. Visit the Bunifu website for more details on the trial. Also, you need to have the icons8 software and a just in color picker for selecting colors and icons respectively. Having downloaded icons, create a folder and copy them to the created folder.
How to Install Bunifu UI Framework.
- For you to add a professional touch with sleek UI controls, follow these steps to Install the Bunifu UI framework:
Open tools on top then open NuGet Package Manager then Accessing Your Palette: Go to Tools =>NuGet Package Manager =>Manage NuGet Packages for Solution. then Search and Select In the Browse tab, type Bunifu UI in the search box. then =>Add the Magic to your UI form by Install and Integrate: Choose Bunifu UI WinForms from the list and click Install. then Agree and Proceed: Accept the license agreement to complete the installation. if you need guidance on how to intall bunifu Framework, just go to youtube by clicking here
Great, Lets know design our dashboard.
- First thing we need to do is to start a new project in Visual Studio, then choose a C# project and name your project as Sales Management Dashboard UI. Once the form appears, set an appropriate size and properties that can fill your controls.
Set size: 1220,760
Backcolor: 246,248,250
![picture 2](https://bunifuframework.com/wp-content/uploads/2024/07/picture-2.png)
- Great! Let’s continue with the next step in our Sales Management Dashboard UI design process. We’ll be working with the Bunifu UI controls, specifically the BunifuPanel.
- Adding bunfuPanel is simple, go to toolbox and search for bunifuPanel then Drag in the BunifuPanel and set properties as;
Dock: left.
Backcolor: 13, 13, 18,
Size: 314,720,
BorderColor: 13, 13, 18
![picture 3](https://bunifuframework.com/wp-content/uploads/2024/07/picture-3.png)
“With Bunifu UI, developers can easily implement modern, sleek interfaces that enhance the overall user experience.”
- After you have set your bunifuPanel, Let’s create our buttons for the menu and provide properties;
- First let’s drag our bunifuButton from toolbox then we set properties to;
Size: 261, 44;
Text: Insight;
location 29,93
- Click on the plus sign on the OnIdleState property then set,
Padding: 10,0,0,0;
BackColor: Transparent;
BoarderRadius:8;
ForeColor: white;
FillColor: Transparent
-
And iconLeftImage property, click and a pop up will appear then import the image from the folder where you save your icon.
- OnHoverState property, click the plus sign on OnHoverState then you set properties as follows;
BorderColor: 32,32,37;
BorderRadius: 8;
FillColor: 32,32,37;
ForeColor: white;
- then click iconLeftImage and import appropriate icon same in OnhoverState property.
![picture 4](https://bunifuframework.com/wp-content/uploads/2024/07/picture-4.png)
- For the other buttons follow the same procedures above and finally you will arrive to desired solution.
- Your final solution will look like this;
![image 5](https://bunifuframework.com/wp-content/uploads/2024/07/image-5.png)
- The next move, lets drag bunifuPanel from toolbox and set the properties as;
Size: 261,227
BackColor: 32,32,36
Size: 261,227
Location: 29,477
![image 6](https://bunifuframework.com/wp-content/uploads/2024/07/image-6.png)
- Now drag in the bunifuPictureBox and then choose image and select your Pro version image inside our folder,
![image 7](https://bunifuframework.com/wp-content/uploads/2024/07/image-7.png)
- Then, drag bunifuLabel from toolbox and set its properties as;
Forecolor: white
![image 8](https://bunifuframework.com/wp-content/uploads/2024/07/image-8.png)
- Drag bunifuButton from your toolbox and set properties.
Text: Learn More
![image 9](https://bunifuframework.com/wp-content/uploads/2024/07/image-9.png)
Add navbar
You are doing great, lets now create our navbar, so first drag the bunifuPanel from toolbox and set its properties with help of just color picker;
BackColor: white
Dock: top
![image 12](https://bunifuframework.com/wp-content/uploads/2024/07/image-12.png)
Add bunifuTextBox
- Drag bunifuTextBox from toolbox and set properties as;
BackColor: Transparent
IconLeft: import from your folderBorderRadius: 8
location: X: 25, Y:26
![image13](https://bunifuframework.com/wp-content/uploads/2024/07/image13.png)
Add bunifuPictureBox
- Drag your bunifuPictureBox and set its properties as;
size: 45, 45
borderRadius: 35
![image14](https://bunifuframework.com/wp-content/uploads/2024/07/image14.png)
Add bunifuDatePicker
- Drag bunifuDatePicker from your toolbox and add in your form.
![pic1](https://bunifuframework.com/wp-content/uploads/2024/07/pic1-1.png)
Add bunifuButton
Drag bunifuButton from toolbox and set its properties;
text: view report
borderColor: 47,47,47
fillColor: 47,47,47
forecolor: white
![pic2](https://bunifuframework.com/wp-content/uploads/2024/07/pic2.png)
Add TableLayoutPanel
- First, Drag the tableLayoutPanel from the toolbox to your form and set the following properties to it;
- On the right side of your tableLayoutPanel click the play button and set the appropriate properties for your tableLayoutPanel;
- Set, column Percentage to 25% as shown below;
![pic3](https://bunifuframework.com/wp-content/uploads/2024/07/pic3.png)
- After you have set your tableLayoutPanel, then drag your bunifuPanel from toolbox and dock: fill. Do for the rest of columns in the table.
- Wow, now drag in the label from the toolbox and set the properties to;
Dock: fill
backColor: transparent
- After that drag your panel from toolbox and set its properties as follows;
- Your tableLayoutPanel must look like this;
![pic4](https://bunifuframework.com/wp-content/uploads/2024/07/pic4.png)
Add bunifuPanel
- first drag in the bunifuPanel to our form, then set your appropriate size and properties to:
BackColor: white
BorderRadius: 8
Location: 17, 236
![pic5](https://bunifuframework.com/wp-content/uploads/2024/07/pic5.png)
Add label and bunifuButton
- First drag in your bunifuLabel and set your properties to
Text: Top Products Sales
foreColor: black, bold
- Then drag your bunifuButton from toolbox and set appropriate properties;
iconRight: select the icon from your folder
borderColor: grey
fillColor: transparent
![pic6](https://bunifuframework.com/wp-content/uploads/2024/07/pic6.png)
Add bunifuDataGridView
- First drag in the bunifuDataGridView1 to your bunifuPanel and edit columns and insert the properties.
- Click on the Edit columns
![pic7](https://bunifuframework.com/wp-content/uploads/2024/07/pic7.png)
- Then, you add column and click ok.
![pic8](https://bunifuframework.com/wp-content/uploads/2024/07/pic8.png)
The code for adding rows and data into our dataGrid;
![Designing a seamless Cryptocurrency UI Dashboard using Bunifu Framework in C# and VB.NET Designing a seamless Cryptocurrency UI Dashboard using Bunifu Framework in C# and VB.NET](https://bunifuframework.com/wp-content/uploads/2024/07/last.png)
Add bunifuPanel
- Next step is to drag bunifuPanel from your toolbox and set properties to;
backColor: white, borderRadius: 8
backColor: white
location: 552,236
size: 314,256
![pic9](https://bunifuframework.com/wp-content/uploads/2024/07/pic9.png)
Add bunifuCircleProgress
- Drag bunifuCircleProgress in your toolbox, set its properties;
- Then drag in the label and and set properties to;
- Then drag the bunifuButton and delete the text then set properties to;
- Your UI will look like this
size: 108,108
foreColore: black
backColor: black
size: 8, 8
![pic11](https://bunifuframework.com/wp-content/uploads/2024/07/pic11.png)
- Add bunifuPanel from toolbox then set its properties:
Backcolor: white
borderRadius: 8
location: 552, 400
size: 317, 214
![pic12](https://bunifuframework.com/wp-content/uploads/2024/07/pic12.png)
- Add bunifuPictureBox to the bunifuPanel and set its properties to;
Size: 20,20
bordersRadius: 35
- click on the player button then select then image from your folder
![pic13](https://bunifuframework.com/wp-content/uploads/2024/07/pic13.png)
- Drag in the bunifuProogressBar from the toolbox then set its properties;
borderRadius: 9
![pic14](https://bunifuframework.com/wp-content/uploads/2024/07/pic14.png)
- Then drag in bunifuLabel and set properties to;
Text: 50%
Color: light grey
- Then follow the same procedures for the rest of the text and progress bar.
![pic15](https://bunifuframework.com/wp-content/uploads/2024/07/pic15.png)
Conclusion
- Implementing an effective sales management system is crucial for driving business growth and improving customer relationships. The Bunifu Framework offers a robust and user-friendly set of tools that can help streamline your sales processes, enhance your team’s productivity, and deliver insightful analytics.
- If you haven’t already explored the Bunifu Framework, now is the perfect time to get started. Visit the official Bunifu website to learn more about their product offerings, access comprehensive documentation, and explore tutorials that can help you get up and running quickly.
- Stay Connected for my next article;
- To ensure you don’t miss out on any updates, subscribe to our newsletter to get the latest articles and also follow us on youtube and have fun
Leave A Comment