Is this the year of illustration?

Illustration dates back long before the invention of writing. We are talking cave painting—Lascaux and Altamira to be precise. With at least 40,000 years of history, it seems clear that human beings (irrespective of culture or background) have a deep and abiding connection with the illustrated image.

dog signage
Dog-related signage

While writing was often a tool for the elite, for most of history illustration has been the best method to communicate to what was a mostly illiterate population.

Paintings, carvings, stained glass windows and mosaics served to record history, entertain and inform the masses about laws, dangers, morals, and other practices.

In fact, the way illustrations has been used since ancient times isn’t very different to the way they are used now even in modern design.

Recent trends in illustration

illustration-trends

For the early part of this century we saw a lot of colorful artwork in the shape of icons and vibrant mascots. Heavily shaded, three-dimensional characters, and richly rendered forms were all the rage.

Now, illustration is heading for a more authentic and organic experience. Low-color, hand-drawn looks that are specifically created for a single-site use are becoming more common and are expected to stick around.

Custom designs will more often take on a unique, loose and even childish feel. Websites will feel more personable compared to the copy and paste looks we have been seeing thanks to the prevailing flat design/minimalism bandwagon.

The big picture

large image

There are many places in your web design where you can employ illustration. To quickly engage your audience the hero-style illustration may be your best bet.

Large hero illustrations will suit some niches better than others. For example, a design agency or surf shop using the illustrated hero will typically work more readily than a law firm or government department. Then again, there are no set-in-stone rules.

under climate pressure
Climate Under Pressure

The great thing about the hero-style illustration is that you can include much more detail than you would if you were created something like icons.

Quick tips:

  • DO go for relevance. Unrelated designs have no place in the hero section let alone your site.
  • DON’T forget the detail. You want to grab the visitor’s attention and impress them so don’t be afraid to put more effort into your look.
  • DO keep it clean. While details are good you need to keep an eye on how much you use to avoid clutter.

Be iconic

icon illustration

Sometimes finding the right place to use illustrations can be a challenge, especially if your site isn’t as rich or colorful. Luckily, if you want to add illustration it is as simple as looking at your icons.

Icons and similar UI elements are a great place to inject personality and energy into your site design though it’s important they gel with your existing elements. As DesignBundle shows, it’s possible to add small, simple, personality There are lots of styles you can go for and while ‘flat design’ is still in vogue, don’t be afraid to go for some textures and depth.

icon illustration
Designer Bundle

While you can and should customize your icons, don’t go overboard with it. This is not a time to sacrifice clarity of meaning for artistic expression.

Quick tips:

  • DO customize. Don’t be afraid to think a little outside of the box when it comes to your icons, different is good.
  • DON’T go overboard. Icons shouldn’t rely on fine detail to be recognisable.
  • DO remain consistent. Though icons are a good place to try new things remember to build them around your site’s design.

Make it move

illustrated website
Peaky Blinders

The great thing about trends is that you can mix and match them at will and get some really eye-catching results. Tasteful animation and illustration can go hand in hand so it’s no surprise we’re seeing more websites incorporating this combo into their work.

There are many areas where animated illustrations can be employed but the best place to apply them is with those interactive hand-drawn elements. DHL’s Slovakian site only needs 3 or 4 simple animations to add a touch of life to their site. They also delay the animation long enough to avoid distracting users who know where they are going.

illustrated website
DHL Slovakia

Though, I must admit I do worry about those driverless DHL vans.

Of course, you need to keep this animation subtle and not over complicate things. If you haven’t dived into adding animation to your work yet, I suggest you check out my 4 Tips for Using Animation in Design.

Quick Tips:

  • DO use hover. Hover animations are always a welcome addition to sites, plus you’ll know immediately what’s interactive or not.
  • DON’T over-complicate it. Your illustrations should be animated in a purposeful way. Avoid animations that surpass 5 seconds for one cycle.
  • DO experiment. Don’t be afraid to try something beyond a garden-variety fade in or bouncing animation. Loops can be maddening like a dripping tap, so vary your timing on different elements to obscure their repetition.

Customize that type

illustrated typography

Bold typography is back in a big way this year, so as with animation, it only makes sense to blend this trend with illustration.

The great thing with large typography is that it can be used in lieu of images. The addition of a hand drawn look will make an already captivating type demand the attention that you want.

illustrated typography
Circles Conference

When you decide to illustrate your custom type remember that color, shape, and size does matter to your particular design. A hand-drawn pencil look might work better for a bohemian shop than a web source website. Keep things like this in mind.

Quick tips:

  • DO your research. Before you try your hand at the hand-drawn typography you should look around at sites that use this technique and font resources like Dafont and Font Squirrel.
  • DON’T use multiple styles. Illustrated typography is a bold choice on its own so you want to avoid mixing and matching no matter how compelling it is, stick to one typeface – two at max.
  • DO get fancy. Don’t just leave your typography plain. Try gradients, outlines, and textures for a cool effect.

The bottom line

Incorporating illustration into a design can sometimes be a ‘hard sell’ because it is more of an unknown. It’s simply easier for stakeholders (clients/managers) to imagine a standard photographic/text layout, so getting sign-off to begin work on a new illustration feels riskier for managers. It might take some hand-holding.

Nevertheless, as the examples above show, the opportunities to create a deeply original, distinctive look and feel are so good that it’s almost crazy to ignore them. Just follow the quick tips above and give it a shot.

What do you think about adding illustrations to your designs?

The author

Guest Blogger
Guest Blogger

99designs loves to share design how-to's directly from design professionals themselves. Reach out to share your thoughts, ask questions, or thank these experts for their awe-inspiring tips!

Related articles

The amazing stylistic history of comic books

The amazing stylistic history of comic books

In a time when audiences were racing in droves to catch the latest talkie and hand-drawn animation was just finding its legs, a new medium brought kids (and adults, let’s be honest) back to reading. Comic books began as a dime-store novelty, and since then, they have gone through countless transformations, artistic explorations, public excises,…

The surreal and stylized illustrations of Kuziola

The surreal and stylized illustrations of Kuziola

Andrzej Kuziola is a full-time, self-taught artist who joined 99designs to explore new creative challenges and experiences. We first discovered him when he was nominated—and then won—our first 99awards competition this year with his stunning illustration for a fantasy novel. Born in Poland and now residing in the United Kingdom, Kuziola began his career as a dentist…

Current Design Contests

Designers, check out these contests so you can start building your career.