Inspiration: Character Illustrations in Website Design

Inspiration: Character Illustrations in Website Design

The use of character illustration in web design is a great and easy way to increase the amount of visual appeal your website has. Not only does it brighten things up and make your site a bit more captivating, but it also, if pulled off well, helps your visitors remember your design (and therefore your website). Although your website’s content is extremely important, a beautiful and engaging design helps to bring everything together.

Below, we have a beautiful selection of web designs that make use of character illustration – from design blogs, to agencies, search engines, to internet applications, and even candy brand websites, to food nutrition repositories.


DesignGiveaways

DesignGiveaways uses a hand-drawn style vector illustration of the website’s masters to jazz up their minimalistic design and add a splash of color. It adds a personal touch to the overall site, and makes it more welcoming to new visitors.


Ewout Van Lambalgen


Silverback

Silverback uses a detailed and quite adorable vector graphic of a gorilla to spice up their website aesthetics, and uses the character as a mascot, making it incredibly easy for users to link the character to the application and website.


SR28


Krolikov

The three-dimensional approach to the Krolikov web design is brough to life with a cheeky and full-of-life rabbit illustration in the top left of the design. Like Silverback (above), the character is used like a mascot.


Moshi Monsters


Foxtie

Another design that uses a character illustration not only to brighten up their design and to make it more appealing, but to also act as an easily recognizable mascot for their website/product.


Adelacreative


Kung Fu Productora

This minimalistic and simplistic design is simply brought to life by using a character illustration; although the character itself is very minimal, too. It adds color, brings the best out of the headings, and is just cute!


Ignaty Nikulin


Sixonefive

Sixonefive uses a character illustration to back-up its tagline “Madness, Chaos & Creation” by using a mad-looking scientist with blue hair. The character is also used next to the website’s header/logo, helping the character to represent the site.


Joseph Payton


The Color Cure

The Color Cure is a highly-illustrated design, using vector-style images in the background, and a colorful palette to represent different services that they offer. The illustrations top the design off, filling some empty space and allowing a good way to ask possible clients to send them an email by the use of a speech bubble.


Siringa


Sean Halpin

Sean Halpin is a colorful but fairly simplistic design that makes use of a simple character illustration to engage with new visitors as a way to introduce whose portfolio they are looking at.


eAnka


PSD Rockstar

PSD Rockstar is highly textured and quite a “grungy” design. Using a clean-cut character illustration in the header spreads things out a little and makes the site more appealing and friendly.


Stoodeo


Fatburgr

Fatburgr is one of my favorites in this showcase, mainly because its mascot-style character illustration suggests what the site is about, puts a smile on your face and automatically makes for a friendly and calm environment.


Creamscoop


Think Orange

As well as being hilarious, the two simple but equally mind-blowing character illustrations on Think Orange’s minimal design fill the white space, and set a good standard for the rest of the site.


Moourl


Cyclops

When it comes to character illustration, aliens and monsters are a big hit, although we don’t see as much of them as most of us would like to when it comes to web design. Cyclops pulls off this monster illustration tremendously well and, as well as brightening up the site, acts as a great mascot.


Elitist Snob


Mail Chimp

The Mail Chimp character mascot illustration is one most of you have probably seen before, whether you use their service, have seen their site in other showcases, or have seen the adorable chimp illustration plastered on advertisements all over the web. It’s perfect, and is enough to make anyone smile!


M&M’s China


Old Loft

Old Loft uses various character illustrations, and helps represent their slogan “let’s work together”; after all it isn’t every day we see an elephant, crocodile, rabbit, lion, bear and eagle working together to place a “WWW” flag in the ground!


Branded07


You Might Also Like…

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Victor

    Best post EVER!!!!

  • Justin
  • http://www.scottcorgan.com Scott Corgan

    OH where would we be without vector capabilities. These are beautiful characters. Would love to see them turned into costumes!

  • MrShish

    Sigh..

    These inspirational post are always about designer pages.
    It would be much more interesting if the sites were real corporations. And maybe some in depth comment on the page also.

    I dont know. It would be much more informative.

    These feel like fast food posts…

    • Justin

      why is it bad that they are not real corporations? there are plenty of corporations out there that have mascots too, but, that just isnt was was posted here today. As a matter of fact, the 4 ones i posted above are for corporations.

    • http://designgiveaways.com/ Callum Chapman

      We appreciate where you’re coming from. “Real” corporations just don’t have the same edge that us designers put into our own sites. I’ll have a think about an inspiration article I could write with “real” corporations. Oh, and these definitely aren’t fast food posts – they take a tremendous length of time to put together!

  • http://www.code-pal.com Sumeet Chawla

    Pretty nice collection of sites which use illustrations.. There are many out there who use pretty cool illustrations and are not included in the list though..I forgot their names. Will comment, once I get them again :P

  • http://wildanr05.student.ipb.ac.id/ wildanr05

    perfect example.. hope our cartoon designer can inspired by this post :D

  • http://www.persoenlichkeitsentwicklung-seminare-trainings-vortraege.de/ Oliver Rumpf

    Cool, I like it.
    Wish I could do things like this …

  • http://mattwooddc.com Matt

    I have always enjoyed your tutorials. This post however, does little to teach the community anything new.

    Please don’t turn into Smashing Magazine.

  • http://blog.creative-webdesign.info Andi

    Nice collection, they looks pretty cool.

  • http://www.jsxtech.com Jaspal Singh

    Cool collection of inspiration character illustrations in web design.
    Thanks for sharing.

  • flyingfox

    At least eAnka, PSD Rockstar and Stoodeo use vectors of chihhang from iStockphoto.com. I think this takes away a lot of the design effort. And PSD Rockstars seems a 100% Photoshoplady clone for me (which also uses a chihhang vector.

    I think any serious website should come up with their very own mascot, not a stock illustration. Especially when you are in the design business.

    If I call myself a designer and show a bought stock vector on my very own website for branding, now WHAT DOES THAT SAY ABOUT MY CREATIVITY AND DESIGN SKILLS?

    Makes me shudder.

    • http://415s.de blacktea

      PSD Rockstar uses a template provided by SmashingMagazine. Not worth taking it into an inspirational post.

  • http://webstandard.kulando.de Webstandard-Blog

    Awesome collection, but if you visit some japanese websites you will find them on nearly every website!

    • http://designgiveaways.com/ Callum Chapman

      I never thought of that! I should have, everyone knows character design is a huge thing in Japan. Maybe that could be a future post. ;)

  • http://www.tagexpert.be BenJamin

    Great! I’m looking for someone who can create great characters for our new website.

    Any name or idea ?

  • http://www.nouveller.com/ Benjamin Reid

    Great collection Callum. Foxtie and MailChimp are my fav’s.

  • http://www.upgraphics.nl Pete

    Nice collection, missing mij website in this ; )

    http://www.upgraphics.nl

    cheers

  • http://www.kapkoi.tk aziq

    Wow.Just that….wow.

  • Dean

    There are a few real large companies in this post, like Mail Chimp for example! Very reputable ESP company.
    Try taking a closer look!

  • http://www.homebuyerexpert.com/ Jordan Walker

    Those are great sets of illustrations.

  • http://logoworks.com Clayton Shumway

    Love the ‘branded 07′ penguins! A good character illustration can have as much affect as a good college mascot…memorable and personable.

  • http://www.daydesignz.com Dayday

    Simply amazing sites very inspirational. Thank you for the post!

  • http://www.takingweb.com Takingweb

    great collection…but where’s mine? ^_^

  • http://vpsgeek.info Vamsi

    Very Nice illustrations :D

  • http://www.vectelligence.com Ilie Ciorba

    I laso always include mascots in all my designs, I like them so much. I like that they give your websites a much ore casual look which obviously has a positive effect on the reader.

  • http://www.xplorestudio.co.za Xplore Studio

    I am not a huge fan of characters in website design, but I must honestly say that your blog article plus the great illustrations really did something for me and I am ready to explore the web design world of characters.

  • http://arieff06.student.ipb.ac.id arieff

    Love the ‘branded 07′ penguins! A good character illustration can have as much affect as a good college mascot…memorable and personable.

  • http://www.upliftingdesign.com Matt

    Hmmm… PSD Rockstar looks an aweful lot like the free WordPress Fun theme listed and given away for free on Smashing Magazine: http://www.smashingmagazine.com/2008/07/16/wordpress-fun-a-free-wordpress-theme/

    Not much originality there…

  • http://tric06.student.ipb.ac.id utari

    great post..thanks for sharing

  • Sai

    http://tapbots.com/ also has some great character illustrations.

  • http://bambang.wijonarko08.student.ipb.ac.id wij

    hmm.. that’s amazing illustration…
    thanks for inspiring…

  • http://karimul.makhtidi08.student.ipb.ac.id dety

    great POST! very inspiring me

  • http://oki.maulana08.student.ipb.ac.id oky

    wowh … great information.. thanks for sharing….

  • http://ignatynikulin.com/ Ignaty Nikulin

    You can check out my redesigned website ;)

  • http://itthinker.wordpress.com Alex

    Wow. These are great works. Love to see for of them. How i wish i’m like that superb in creating vectors !!

  • http://www.sarkarinaukrisearch.com Sarkari Naukri

    i am doing animation course , i knowledge this graphic and web designing and multi media. i m searching jobs in this field plz some information ………..

  • http://www.bestemailextractor.com emailextractor

    What about the others?

  • http://www.rxpillspharmacy.com Caverta

    very good for that post
    Caverta