Beautiful Bitcoin / Ethereum Exchange Desktop Dashboard — A step by step detailed .NET redesign tutorial
“To create something that’s genuinely new, you have to start again, and I think with great intent, you disconnect from the past.” — Jonathan Ive
With the futures market remaining an uncharted area in the digital currency turf, the Internet of Money nevertheless proves no doubt that amidst it all, the worth of its enormous risk-takers and investors takes leaps and bounds in its unprecedented growth. Bitcoin, Ethereum, Ripple and the growing plethora of cryptocurrencies has seen traders, corporates and investors accrue more in value than in assets as the trading market unfolds. Yet this really is not the end of the story. We may just be launching to an era of untold economic upsurges or cataclysmic downfalls; it’s only for us to wait and see what will follow in the coming years…
Today, we shall be looking at and re-designing Nick Taylor’s beautiful Bitcoin/Ethereum Exchange Dashboard — Crypteo, and as always, we shall be using Bunifu UI Framework to craft the Dashboard. So before we begin, let’s take a quick look at what’s before us:
I am definitely impressed by it… So let’s kick off!
The Design Process…
Here we take a look at the UI elements that we’re going to use as a replacement for the elements in the design inspiration:
And now let’s jump into the crafting process with Visual Studio.
Before you begin, please ensure that you have your copy of Bunifu UI. 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 displayed hereafter. These are handy tools that will help you design faster.
- As always, we begin by creating a new Windows Forms Project in Visual Studio — VB.Net or C#; in the newly created Form, add a BunifuEllipse and set the “EllipseRadius” property to 1. To note also, we’ll be using Lato as the main font for the entire UI so feel free to download and install it:
If you encounter an error at first-time use with Bunifu UI (for example while dragging the BunifuEllipse component), this is usually due to reference issues. Therefore ensure that you Add Reference to the Bunifu UI Library (“.dll” file) located within your Desktop folder as a shortcut to the library.
- Set the Form’s color to 241, 242, 246. Add a panel control, set its color to White and dock it to the Left; add another panel, set also its color to White and dock it to the Top; and finally add another panel, set its color to 53, 151, 250 (“DodgerBlue”), and add it to the Top without docking it — resize it to a width of 136 and a height of 72. On completing this, your form should look similar to this:
- Add a BunifuDrag component and select the TargetControl property to the top panel, e.g. in my example the top panel is named Panel1:
- Next, add six BunifuTileButtons that will be used as the navigation buttons in the Dashboard; set their individual properties for each BunifuTileButton to: color: White, colorActive: WhiteSmoke, ForeColor: 136, 144, 157, Font: Lato, 9pt, Cursor: Hand, ImageZoom: 17. Also, add the appropriate images and texts on the buttons as well.
- Add a BunifuSeparator and set its Vertical property to True. A design of this section should finally look similar to this:
- Now go selecting all the six BunifuTileButtons and double-click on any one of them to generate the Click event; once generated, add the code below:
' VB.NET
indicator.Location = New Point(indicator.Location.X, CType(sender, Bunifu.Framework.UI.BunifuTileButton).Location.Y + 71)// C#
indicator.Location = New Point(indicator.Location.X, ((Bunifu.Framework.UI.BunifuTileButton)sender).Location.Y + 71);
- Next, add a BunifuImageButton and set a search image for it through the Image property; then add a BunifuMaterialTextbox that will be used to type-in searches by the user and set the following properties: Font: Lato, 9.75pt, ForeColor: Black (or 64, 64, 64), HintForeColor: Silver, HintText: Search transactions…, LineFocusedColor: LightGray, LineIdleColor: White, LineThickness: 1, LineMouseHoverColor: Gainsboro. The section should finally look similar to this:
- We can then finish up the top section by designing the top-left section with the appropriate controls (and icons); here, we’ll mostly get to use BunifuImageButtons and only one BunifuCustomLabel to provide the name of the user which in our case is “Eddie”; this will be a very straight-forward section to design. Here’s a preview of it:
- And we’re now done with both the left and the top sections. Let’s move on swiftly to the body section where the “meat” of our Dashboard design will surely be tested.
- We begin from the left side going over to the right; so let’s design the first section — the “profile” section in our body area. Here’s a preview of it:
- Add a BunifuCard in our form body to the left and set its properties to: BorderRadius: 3, color: White, TopShadow: False, BottomShadow: False, LeftShadow: False, RightShadow: False; add a BunifuCustomLabel and set its properties to: Font: Lato, 8.25pt, style=Bold, ForeColor: 136, 144, 157; add a BunifuImageButton and set an avatar/user profile image for it; add another BunifuCustomLabel and set its properties to: Font: Lato, 9.75pt, style=Bold, ForeColor: Black. Below is a preview of the output:
- Next, add another BunifuCard with the same card properties as detailed in the above “profile” section; below is the section we’ll be designing:
- For the “Need Help?” text, we’ll use a BunifuCustomLabel with the following properties: Font: Lato, 9.75pt, style=Bold, ForeColor: Black; for the small comments text, we’ll use the same label control with the following properties: Font: Lato, 8pt, style=Bold, ForeColor: 136, 144, 157; finally, add a BunifuFlatButton and set the following properties: ActiveColor: 53, 151, 250, BackColor: 53, 151, 250, BorderRadius: 3, Cursor: Hand, NormalColor: 53, 151, 250, OnHovercolor: LightSkyBlue, OnHoverTextColor: White, TextFont: Arial Rounded MT Bold, 8.25pt.
- We now move to the other area where we also have two large sections: the “verification” section, and the “entries” section. We’ll begin by designing the “verification” section; here’s a preview of the design we’ll create:
- For the section’s title, add a BunifuCustomLabel then set the following properties: Font: Lato, 14.25pt, style=Bold, ForeColor: Black; for the remaining texts, also use a BunifuCustomLabel and set the following properties: Font: Lato, 8.9pt, style=Bold, ForeColor: 136, 144, 157. Notice that for the text “Estimated day”, the color is quite different from the others; therefore set its ForeColor property to Gray.
- We can then design the main control in this section which is a “verification process” control. So create a new User Control by going to: Project →Add User Control… and set its name to VerificationProcess (don’t remove the extension). Below is a preview of the control with the Size and BackColor set to White and 766,55 respectively:
- Ensure you have the following images when designing this section; these images will also be used when writing code, therefore ensure that you’ve placed them within your project’s directory — inside the Debug folder:
- So now add a BunifuImageButton and set its Image property to the “in-waiting” or “new step” image.
Please note that all BunifuImageButtons’ Image property should be set to the “new step” image when designing.
- Add a BunifuSeparator and set it at the end, right at the center of the BunifuImageButton; likewise, set its properties to: LineColor: 209, 212, 221, LineThickness: 2. Below is the first verification step when designed:
- You can then copy-paste the first step of controls to cater for the remaining steps. Below is the complete design of our control:
- One additional thing… for the sake of the code we’re going to use, ensure that the controls are named as follows:
- Now paste the code below in your control’s code-view — both VB.Net and C# are provided:
- Once you’re done pasting the code and ensuring that there are no errors whatsoever, continue to Build your project in order for the control to be generated and added to your Toolbox automatically. You will notice a new Toolbox Tab that will be created based on your project’s name and there you’ll find the control VerificationProcess added.
- Now add the control to our Dashboard form inside the section we’re designing and change the property CurrentStep to Third; you won’t need to type the value, simply select it from the drop-down list that will be displayed on clicking the drop-down icon. Once you run the project, the VerificationProcess control will highlight the steps completed with our previously set images till the third step. Below is the section completed:
- In the very last and final section, I won’t touch much on every control as much of it contains inputs which we will substitute with the control BunifuMaterialTextbox. Here’s the section’s preview:
- For each BunifuMaterialTextbox, there’s a BunifuCustomLabel added on top of it for a description of the input required; to note, you can also use the Property HintText in BunifuMaterialTextboxes to describe the user-inputs required.
- For the drop-downs, you can use BunifuDropdown control or, as I did just to show you some flexibility, you can use the standard ComboBox control in WinForms with the following properties: FlatStyle: Flat, BackColor: White, Font: Lato, 9.75pt, style=Bold; then add a BunifuSeparator right below the ComboBox control ensuring that they both have the same width, and likewise set the following properties: LineColor: 136, 144, 157, LineThickness: 1. You can also go an extra mile and add a list of Countries, Cities, Days, Months, Years, and Mobile Country Codes in each respective ComboBox Items list.
- Finally, let’s get to the Tabs section. As of this writing, there is no BunifuTab control to work with in adding tabs to this section. Therefore, as a very simple and straightforward way of replicating this design idea, we will use only two BunifuCustomLabels and a BunifuSeparator that will act as an indicator whenever a “Tab” is selected.
- So, design the sub-section as displayed with two separators; one underlying and another as the indicator; set the indicator’s properties as follows: LineColor: 53, 151, 250, LineThickness: 2; the other separator’s properties are: LineColor: 209, 212, 221, LineThickness: 1. Once complete, the sub-section should be similar to this:
- And now let’s add some code; paste the code below inside your Dashboard’s code view and then attach the Click event for the above two custom labels to point to the event named “TabsClicked” if you’re using C#; for VB.Net, change the event’s Handles clause to point to the names of the two custom labels added. Also, ensure the names of the two custom labels have been set inside the method as depicted in the code below:
Now that was a load of code written… But we’re done! Ensure there are no errors on pasting the code before running our Dashboard project.
Finally…
This marks the end of our inspirational design… Below is the final output for all the job done both in design and in code:
No words can describe its beauty…
Conclusions
“A willing heart never lacks the positivity to progress.”
The milestones achieved would, in some sense, be unachievable or to an extent lengthy had this nice little UI Library not come into play. We’ve managed to replicate the same Dashboard UI however far-reaching it seemed or even felt, and I’d like you to try it out too.
As always, I do hope that this article has inspired you in building beautiful products with .NET and Bunifu UI.
Happy coding and designing!
