If you want your website to be on-trend, bringing in some illustration is the perfect way to keep things looking bang up-to-date.
It pays to do things properly, though, and to remember that illustration's more than just decoration. Adding some flat cartoon figures might make your website layout look nice, but it'll also make your site look the same as about a million others out there; for a site that stands out you'll need to go the extra mile.
The best use of illustration online can be seen when the designers have clearly put a lot of thought into how it can work with – and even enhance – the site's content or a brand's message. Here are six recent examples that have wowed us with their effective use of illustration. (See our map illustration guide to create your own gorgeous maps to add to your site and also how to use illustration to create colourful worlds that tell a story).
01. Otis Studios
Otis Studios (opens in new tab) makes music – for adverts, films, games and dance floors – and also specialises in sound design. The studio prides itself on writing, recording and re-recording until everybody's stoked, and its passion for music and sound comes across in the very first thing you see when you hit its site.
Created by Feral (opens in new tab), it opens with an illustrated splash screen stating in rough brush strokes that OTIS MAKES MUSIC, accompanied by scratchy ink sketches of music gear that we're not going to even attempt to name. The real kicker is how the elements in the composition are arranged in 3D and move in response to the mouse, bringing the page to life and making it near-impossible not to scroll down to find out more.
02. The Food Dispensary
Canberra's Food Dispensary (opens in new tab) produces a tiny range of ready-made meals that are a cut above the rest. It describes itself as a kitchen of real people working with real ingredients, and goes to great pains to point out that everything it produces is handmade, from its pasta to its ricotta and pancetta.
The Food Dispensary's site, built by Swell (opens in new tab), reflects that handmade ethos; a swish parallax site peppered with mouth-watering photography, it's grounded with simple pencil sketches of ingredients on a background reminiscent of rough, recycled paper. The restrained use of illustration provides a feel of tradition and authenticity, all wrapped up in a thoroughly modern site.
Judicious use of illustration can really help get your message across quickly, and USELESS (opens in new tab), built by Nice and Serious (opens in new tab), does an excellent job in that regard. It uses illustration to highlight the problem of single-use plastic, opening with a torrent of plastic cups, bottles and carrier bags that pile up at the bottom of the page (and that you can try to shift with your cursor), accompanied by horrifying stats on the amount of disposable plastic thrown away in the UK every year.
Got the idea? Great, because USELESS has a map of London's zero-waste shops, as well as a guide to cutting down on your daily waste, with plenty more illustrations to show you the way.
04. A Map of Myth, Legend & Folklore
In an online world where it's all too easy to just bang in a boring Google map, we love this beautiful illustrated map of myth, legend and folklore (opens in new tab) from English Heritage.
It's an engrossing guide to some of England's historic sites and the fascinating stories behind them, showcasing a small sample of the 400 sites in English Heritage's care, and also featuring local myths and legends as well as upcoming events across the country. The map was illustrated by fine artist Clive Hicks-Jenkins, and the whole site was put together by Gravitywell (opens in new tab).
Sparky (opens in new tab) is a marketing agency that promises to provide a fresh set of eyes for powerful brands to help them maximise moments, elevate experiences and ignite innovation, and its new site by Angle2 (opens in new tab) uses illustration to really drive that point home.
The opening page is scattered with pairs of adorable cartoon eyes in various styles that animate when you mouse over them; a neat gimmick that doesn't feel forced, and which should encourage visitors to scroll down and discover how Sparky can help their brands.
06. Finding ctrl:
With the World Wide Web having celebrated its 30th birthday in March, and the internet itself coming up for its 50th in October, Nesta has put together Finding ctrl: (opens in new tab), an 'online visions' book for the European Commission's Next Generation Internet initiative. It's a collection of essays, short stories, poetry and artworks from over 30 contributors, addressing the questions of where did we come from, and where do we go next?
It's a weighty subject, and it's made more inviting thanks to a site built by ToyFight (opens in new tab) that brings in illustrations and particle-based 3D objects to set the tone for each article and provide visual interest.