Designing A Minimalist .NET Countdown Timer
“Every great design begins with an even better story.” — Lorinda Mamo
Minimalism is probably one of the most thrown-around terms in the UI/UX creative space. Well many get the idea of minimalism — but really, putting it into practice is the tough part… But we’re still getting there. Ideally the question we often need to ask ourselves is:
What does the user need to see, and when?
Well, with that question in mind, let’s kick off and get our design gears ready to build a Countdown Timer from scratch!
We’ll be using Bunifu UI to craft some awesome experience here, so please don’t be left out. 😊
Let The Craft Begin!
- Start by launching Visual Studio and create a new .NET Windows Forms Project (You can target of .NET v4.0 to v4.6); name it anything — in my case I used “ProTimer”.
- Once your project is loaded and ready, we can go ahead and customize the Form’s design. We’ll need to do a few things:
1) Make the Form borderless and draggable.
2) Set the background color to an RGB value of 121, 125, 151.
- First, add the top-right Title Bar icons:
- Next, add the main labels, that is, the Countdown and Countdown Target or Countdown Time labels. Here, I used Bunifu Labels since they provide HTML support to help us customize parts of the text to our liking.
- The fonts used here are Arial Rounded MT for the Countdown Time label and Product Sans for the Countdown label.
- Now we’ve got to the heart of the UI: the call-to-action (CTA) buttons! Here, we can choose to work with two types of Bunifu UI controls:
1) Bunifu Button — It can accept text and/or icons, with some really awesome features built right into it. It simply packs a punch! But we won’t need all it has to offer for now.
2) Bunifu User Control — It one of the simplest controls I’ve come across within the UI Kit (as of version 1.11.5.0), but has some convenience features we’ll need; with hover/press animations support and applying icons, I knew this would be the right control for the job… - So, let’s go ahead and add the three CTA buttons using three Bunifu User Controls:
- Next, let’s add the app’s brand-name down below the Form; I used ProTimer, but you can use your own app’s name instead:
- We will also need to add ToolTips for each control featured in the Form. For this, we’ll definitely go for Bunifu ToolTips, and just like in Bunifu Labels, Bunifu ToolTips also provide HTML support for texts — you can even embed image URLs within texts!
- Once all is set and done, run your project…
You can then include Timer countdown features for the application, or get a copy of my ready-made Countdown Timer App. I’ve also managed to add some few more features such as:
- Timer-step configuration (milliseconds, seconds, hours).
- Start, Stop and Reset countdown options.
- Provides shortcut keys for priority features e.g. Play/Pause.
- Provides inbuilt settings for saving users’ preferences.
- Default app icon and other resources are included.
- And well, all the heavy lifting is simply done for you!
Here’s a preview version of my working app:
You can further extend it by adding your own About window and other nitty-gritties you think users may need in the long-run.
It’s a wrap…
One thing I’ve learned over time is that beauty has no limits, never does — that’s why we renovate, come up with, and try out new ideas to see what we may have left out along the way…
Well I really hope you got a few things from this article that you can definitely apply in your projects.
Till next time…
Yours designfully,
Willy Kimura.😉
Resources
- You can checkout Bunifu Framework to get your own license or request for a free trial.
- Also you can visit my store to get your own full working copy of the .NET Countdown Timer.
