In this week’s inspirational roundup, we’re going to put smiles on our faces by looking at friendly illustrations from around the web.
It’s Been Emotional
Emotion is a hugely important part of UX; help users feel something when they visit a website, and they’ll likely be more engaged, focused, and relate better to whatever you’re trying to communicate. If you’ve read Designing for Emotion, you’ll recall the idea that emotion within design offers
“an experience for users that makes them feel like there’s a person, not a machine, at the other end of the connection”. – Aarron Walter
Happiness is one such example; a feeling of well-being, of joy, delight. If your web design can provoke these feelings, your users will quickly be put at ease, paving the way for a good relationship.
How can you promote happiness among your users? A good old-fashioned grinning cartoon face is one way, so let’s see some examples!
Happy Faces
Clik here to view.
How happy is this guy?! He’s part of the Google Translate community; young, tech-savvy, and contributing. The use of simple geometric forms is something you’ll see recurring often in this roundup. They’re fun, easy to interpret, and put users at ease.
Also worth noting: these illustrations are implemented as PNG files–the rough texture would make SVG too heavy to be practical here.
Clik here to view.
The “World’s easiest decision” is a website launched in the run up to the 2015 UN Climate Change Conference. It uses a similar textured effect to the Google Translate illustrations, which lends a welcoming atmosphere, dripping in personality and positivity.
Closer inspection reveals a huge collection of images which have gone into building this page–including sprites for some lovely animation further down:
Clik here to view.
Clik here to view.
More geometric shapes and another PNG here. This simple illustration can be found on the 404 page of castle.io, helping to relieve frustration from users who’ve followed broken links. No smiles, but that wouldn’t be appropriate in this situation.
Clik here to view.
If I was going to be brutally honest, I’d say this octopus could look slightly more impressed with the prospect of signing up, but the Carbonmade logo makes up for any lack of joy here. This is the first of our examples to use SVG.
Clik here to view.
These guys, however, are really happy in their work. Mascots for Neat, the company which comes in to clean up when you move house, they’re tooled up and ready for action. This illustration is also implemented with SVG, along with foreground and background scenery, which moves, resizes, and rearranges depending on the viewport.
Clik here to view.
Google have received great acclaim, year after year, for their Santa Tracker. More geometric shapes and sack loads of feel-good.
Clik here to view.
The chimps on stuffandnonsense.co.uk, inspired by a classic TV ad campaign from the 1970s, won’t fail to raise a smile. Illustrated by Josh Cleland and implemented by Sara Soueidan, this is the latest in a series of responsive illustrations featured on the Stuff and Nonsense website. Squish your browser and you’ll notice (thanks to SVG filters) the color saturation dial down, adding to the nostalgic feel.
Clik here to view.
Clik here to view.
More moving scenery now, take a look at this cheery sprite from bysusanlin.com! Scroll down the screen and you’ll see the main 8bit-like character merrily walk over and through the landscape. The sprites and the scenery are all PNG images, positioned with CSS. Some custom jQuery changes the positioning at certain scroll points–stay tuned for a tutorial about this technique coming soon..
Clik here to view.
The expressions on www.passweird.com might not suggest a feeling of well-being, but this grotesque comic book aesthetic certainly evokes emotions of some sort! Its humor and design raise a smile, albeit an uncomfortable one.
Clik here to view.
That’s more like it: high-fives and happy community members on the Dropbox forums. In fact, Dropbox have always been advocates of this kind of thing–illustrations play an important role in their branding, visual language, and tone of voice.
Clik here to view.
Clik here to view.
Australian book store Readings is dotted with energetic sketches of people reading, the work of Oslo Davis. The main banner at the top is built from a series of blocks, each using the same single sprite PNG as the background. When the viewport shrinks, blocks are removed, neatly adapting the background to the available space.
Clik here to view.
Clik here to view.
If you’ve ever used Basecamp (why wouldn’t you?!) you’ll know their love of sketched illustrations too. Here are some team members, showing off their pearly-whites:
Clik here to view.
Envato Market
Need some more inspiration? Checkout these files available on Envato Market:
Clik here to view.
Clik here to view.
Clik here to view.
Interesting Reading
- Cartoon Fundamentals: Create Emotions From Simple Changes in the Face
- Not Just Pretty: Building Emotion Into Your Websites on Smashing Magazine
- Cultivating Trust Through Web Design
Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.