Animated Splash Screens with Bunifu UI & Windows Forms
“The catastrophe of visual flow without animations… How impossible for one to see the direction of things and by so doing connect with the occurrences.” — UX Prodigy.
There are remarkable things that happen once you get to mix-and-match those image frames together, and then begin to shuffle them as fast as you can… It gives life to those images, to your design story. That’s what animations deliver in an application however mediocre or simple it is; they depict activity and life. And trust me… They do count!
“From a design perspective, the splash screen sets the scene for the rest of the app, inviting your users in from the cold, sterile apps that they use on a daily basis, and immersing them in your vision for the next 3 or 4 minutes that you have their attention. Get this right, and your users will enter with great expectations and anticipation. Get it wrong and they’ll drop your app before you have a chance to even strip them of some key analytics.” — From the article Building the perfect splash screen.
We’ll be taking a quick look at some sample animated splash screen designs crafted in Windows Forms (.NET) and sugar-coated with Bunifu UI, a remarkable piece of UI Toolkit designed by Bunifu.
Use the discount code WK20 to get a 20% discount!
Take #1: Logitech-inspired Splash Screen
Fonts Used:
- Product Sans (in “continue” button).
Here’s a simplified borderless Windows Form styled using Bunifu Form Dock’s shadow effect, with a top-right closing icon using Bunifu Image Button (they can fade-out when inactive — that does come in-handy), and finally a bottom-placed Bunifu Button. Oh, and not forgetting the Tooltip; that’s Bunifu Tooltip displaying with a shadow effect whenever a user hovers over the closing icon. The Tooltip is pretty neat as it could incorporate HTML-style tags just like in browsers. You can check-out its docs if you’d like to know more.
The shadow effect also brings-in some style and uniqueness to the Form as compared to a standard borderless window. The Logitech logo placed on top with a light shade of the blue background color adds some professional touch to the overall design of the splash screen, and so does the choice of colors applied.
Always try playing with shades of colors when designing interfaces…and play well. 👌
This makes for a good head-start splash screen for use when creating a revamped Windows support software for Logitech’s devices. 🙂
Take #2: Opera Browser-inspired Splash Screen
Fonts Used:
- Product Sans (in “continue” button).
- Montserrat (in “Opera” title label).
For this revamped Opera Desktop Browser splash screen, the colors were pretty straightforward and clear — a red/crimson-shade with a white background. Every other warm color was secondary and could blend-in well with the brightly-packed UI, so I decided to stick with a blue shade for the Bunifu Button placed right below it with a border-radius of 3. The closing icon here I thought should change, so I included an door-exit style icon just to have a different feel for the design. This produced an overall professional look and feel for the splash window.
“Blue, has a way of bringing calm, profession and loyalty into applications — the sky lives to tell us the same.“
Could Opera consider this? Well, we can only wait and see. 😎
Take #3: Cub Studio-inspired Splash Screen
Fonts Used:
- Product Sans (in “continue” button).
- Rush Hour (in “Cub Studio” title label).
- Segoe UI (in subtitle below the title label).
After seeing this logo animation by Fraser Davidson, I was really impressed by the flow of imagery, so much so I sought to know what the company does, and I did.
Cub Studio is an animation and motion graphics studio that deals with advertisements and promotional, broadcast and branded video content.
In this splash screen, colors were not as readily available as the other two we’ve covered. I had to pull some strings and decide which color(s) could bring-in a neat coherence of visibility, beauty, and utter consistency within the UI. So I ravaged the color palette for some — from blue, to khaki, to maroon, to silk-brown, butI finally resorted to looking at variants of the brick color due to the need for a naturally drawing color in this very straightforward animation. That’s how I ended up picking crimson for the simple reason of drawing some level of attention in this very basic splash screen example.
“Red is a benevolent dictator(ship).” — James Jannard
Take #4: Dropbox Business-inspired Splash Screen
Fonts Used:
- Product Sans (in “continue” button).
This was a major one, and one that took me more time designing due to the mix of background colors that have been seamlessly combined into making it. It was quite a long animation so I had to decide concerning the standard color that should go into the Form and button once it’s done — a white or a blue background? Eventually after some consideration, I decided a white shade such as whitesmoke or an RGB alternative of between 242 and 245, would do — and it actually did! 🙌
As the animation plays out, you’ll notice that some UI elements are actually changing their colors to match with the animation’s overall color at that moment-in-play. This I did by monitoring the colors each time a color-transition was made, and this I did using a Windows Timer that was set to record the animation’s flow per-second until the animation was over. It definitely brings a flow and seamless transition to every element within.
Sometimes when dealing with such animations, it’s a good practice to consider which color should be the overall standard and why.
“Always and always ensure you choose colors that bring clarity to the underlying UI elements, maintain consistency with the overall look, and are easy on the eyes.”
Conclusion
Hope this short set of inspirational designs has triggered some innovative ways for you to bring out that ideal splash screen into your applications.
To know more on building great splash screens, please read this very awesome article: Building the perfect splash screen, by Duncan Campbell.
And hey, you can also visit and download this project’s entire source-code on Github to get you started from where I left off… The sources will require you to have a Bunifu UI license in order to build and/or extend the splash screens, so do purchase or start with your free trial to continue on with the fun.
Lastly, keep designing, keep building — and have fun while at it.
Yours designfully,
Willy Kimura. 😉
