Illustrations on a website are first and foremost an aesthetic enhancer. Many sites today will feature an illustration, besides a logo, at least somewhere. Illustrations are a great tool in giving a rudimentary site a hefty injection of personality.
Patrick McNeil of Web Designer Depot explores the uses of illustration as an element of web design that has two separate functions: “Illustration is an incredibly versatile tool that can find many different uses in design. And when it comes to web design we can find an extremely wide variety of implementations. Let’s begin someplace I seldom do, with a basic definition: Illustrated: 1) To make clear; 2) To make clear by giving or by serving as an example or instance; 3) To provide with visual features intended to explain or decorate. It seems that in the real world of web design, illustration tends to perform both functions at one time. It beautifies while it clarifies. And if it is only doing one of these you might need to ask yourself why. Perhaps by putting illustration to work fulfilling both roles is the way to truly leverage the design element for all it is worth.”
For choosing a theme or a particular style, the best way to find inspiration is to look around at what others have done, with some going for a full technicolor extravaganza and others going for a more minimal approach; working with black and white sketches, for example. It’s always best to do your research and really solidify what’s going to complement your brand before jumping in feet first.
Awwwards.com have compiled a cool list of sites that have gone all out in the illustrations stakes. Interestingly, they also discuss how flat design has helped increase the popularity of site illustrations: “When talking about illustration and web design, a term that immediately comes to mind is, our friend, “flat design”. Yes, it’s being done to death, but we still aren’t tired of admitting that this isn’t just a passing trend; flat design is playing a vital role in the responsive era. It reigns supreme across desktop and mobile design for it’s tremendous interface versatility and it couldn’t be easier to integrate into our responsive projects.”
Animate your illustrations
Whether you want to give your site a colourful boost, or clarify something in a non-traditional manner, an illustration, like all things if done right, will make your site stand out from the crowd. For those of you wanting something more eye catching, however, then an animated illustration would fit perfectly.
There are a lot of ways to animate on the web and there are even more ways to create animations which you can then export to web animations. The best programs to design with, which also give the most benefits, are Adobe After Effects or Animate CC, which you can easily import files from Illustrator and Photoshop too.
When compiling the completed animation, there are two sets of capabilities, which include limited interaction capabilities – GIF, Sprite and Video, or for the fully interactive – Canvas, SVG, CSS, DOM based animation and WebGL.
If you’re a brand that really wants to make an impression on your potential customers, then animation is a definite winner. For inspiration on animated websites, check out The Best Designs 22 Websites with Impressive Illustrations and Animations.
Artwork, illustrations & infographics
Illustrations and infographics are a great way to get instant visual engagement, but they require clarity, purpose and accuracy to shine and stand out from the rest.
