If you spend enough time online, the chances are that you’ve earned an untold number of badges. You might even be earning one at this very moment.
Social media services, retailers, and even Google Maps provide them for completing all sorts of otherwise-mundane tasks. They represent an easy way to make things fun and keep users engaged.
Badges can also produce some exciting examples of design. They can be anything from a plain graphic to a fully-animated experience. Plus, they challenge us to see how much goodness we can fit into a small space.
That’s So Font Awesome by Olivia Ng
Font Awesome icons are a perfect centerpiece for a badge. With the number of available icons, you can create one around literally any subject. Here we have some beautiful hexagon-shaped badges that include the popular font icon library. They’re incredibly slick and colorful, and it makes you want to collect them all.
Ever Been to Berlin? by Antoinette Janus
There is a simple beauty in this Berlin skyline badge. First, the retro gradient color scheme looks like it would make for a terrific t-shirt. Then there are the subtly animated features that bring a sense of calm. The attention to detail makes it all come together.
No, But I’ve Been to Tatooine by LukyVJ
While this example is a few years old, it holds up really well (as does everything Star-Wars related). Again, the designer chose simplicity rather than jamming it full of extras. But the result is still compelling. Plus, the included “Night Mode” makes for a cool change of scenery.
It’s a Material World by Rasmus Bergström
Google’s Material Design has become a pretty big hit with designers. Here, we see a “verified” badge inspired by the design language. It shows great color and depth, making this example very easy on the eyes.
Everyone Gets a Gold Star by Joey Hoer
One of the simplest pleasures of school was earning a coveted gold star sticker on a test. This snippet provides a fun online equivalent. Each star does its own little dance as you hover over it. No matter how old you get, you still want to collect those stars.
I am Holographic Batman by Pixelmort
Who doesn’t want to be Batman (other than The Joker)? If you don’t get to be a caped crusader, earning this badge would be the next best thing. It sports a nice “hologram” effect as you move your cursor over the symbol. This is an excellent take on those old 3D stickers that were sold in vending machines.
You’re an Explorer by Chris Johnson
Designed as a way to reward those who contribute to an online community, this spaceship badge is more than meets the eye. Hover over it, and the spaceship takes flight, complete with an alien pilot. The look is modern, crisp, and detailed.
A Compelling Landscape by Christine Clark
Here’s a travel-inspired badge that is great fun and well put together. It starts out relatively blank, and then animation fills in the various components. It’s a different approach than others in this collection but is effective in grabbing a user’s attention.
Gamifying the Web
As silly as it may sound, earning a badge can evoke a smile and provide a tiny bit of satisfaction. There’s definitely an emotional effect that keeps us coming back for more.
In some cases, it may even be healthy. Setting small, achievable goals is a realistic path to success, and badges can play a role in helping us get there.
In terms of design, badges afford us the freedom to have fun – because that’s part of their purpose. We have permission to create something that can brighten someone’s day. There are no hard-and-fast rules.
Hopefully, the examples above inspire you to let your imagination go wild. Go ahead, you’ve earned it.
- 10 High-Quality Free CSS Button Libraries & Frameworks
- 8 Pure CSS Code Snippets for Creating Stunning Border Effects
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019
- Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018
- 10 CSS Code Snippets for Creating Tooltips