5 Tricks To Spice Up Your User Interfaces

The trend is to take a minimal approach to user interface designing — but every now and then wouldn’t it be nice to add some flare? You know, those subtle features- like the power light on a Macbook, that don’t necessarily have a purpose, but it’s mere presence gives it that special feeling. Yea. You know what I’m talking about.

1. Adaptive Backgrounds

Adaptive Backgrounds

Notice how the background color is adapted from the primary color of the main image.
This is something I’m always fascinated to use in some form or another every chance I get! But it only applies to user interface designs that allows users to upload some form of image (avatar/background images/featured image). Won’t it be nice if the UI extracted the primary color from that specific image and adapted it to the page design? Whatever the interface is, it would have it’s very own unique style based on the primary color of the image uploaded!

It’s quite easy to accomplish this effect using a bit of jQuery. This plugin on GitHub can be used to create a similar effect for the containers background — but can easily be edited to do more.

2. Try Material Design


Yes. I’m referring to the style introduced by Google Material Design. It might not be very original but it gives life to flat elements while maintaining that essential minimal quality. These effects can easily be replicated using a combination of CSS and JS — try this example at codepen or try this collection of free resources.

3. Simple Animations

I believe in the use of animations to reaffirm common notifications or actions. The best example of this is swipe.com — their payment widgets leverage heavily on animations; whether it’s to show that you accidentally left a field empty or that the payment was processed successful, they do a beautiful job of it. The initial logic from my introduction applies here too; it’s not an absolute necessity — it’s one of those features that makes a product feel more human.

AniJS is a useful plugin to accomplish a large variety of animations for your designs. You can also try this tutorial to add some cool loading effects to your images.

Be careful not to overuse.

4. Favicons


You may have noticed the favicon being used to display notification numbers on sites like Facebook. Well, you can actually do much more — try this amazing plugin on GitHub and make that 16px by 16px space count!

5. Beautify your notifications

This includes everything from popup windows to tooltips and notices. It’s the side of things you usually get to see when things go wrong. With the help of plugins like jBox you can style all these element in one go!

Get Creative (in general…)

Try new things — for example I recall once substituting the usual briefcase icon used to signify the job/position with a neat and uniquely playful looking bow tie icon. It gave that whole section a fresh and fun perspective. It’s nothing big and most wouldn’t even notice it, but it felt cool.

It’s those tiny details that make the big differences in the long run.
Think about it.

Want more awesome jQuery plugins? Try the repository at unheap.com

Did you find this article useful?
I write regularly about design, science, tech and all things I find interesting. Get my essays delivered right to your inbox by subscribing.