30 Creative Examples of Illustrations in Web Design

Mar 21 2009 by Jacob Gube | 41 Comments

Adding illustrative elements to a web design can take it to a whole new level. Illustrations add a uniqueness and character to a design, giving it the ability to make it truly stand out from the crowd. Designers and artists use them in various parts of a design: as backgrounds, as part of a captivating header, or as an accent within the content area.

In this article, you’ll be able to set your eyes on some of the best examples of websites that have chosen to use illustrated elements as part of the design.

1. The Great Bearded Reef

The Great Bearded Reef - screen shot.

2. iwit.nl

iwit.nl - screen shot.

3. MailChimp

MailChimp - screen shot.

4. Erguvan Platin Evleri

Erguvan Platin Evleri - screen shot.

5. Artgeex

Artgeex - screen shot.

6. Octwelve

Octwelve - screen shot.

7. meomi cloud house

meomi cloud house - screen shot.

8. the Octonauts

the Octonauts - screen shot.

9. Stuff and Nonsense

Stuff and Nonsense - screen shot.

10. Antiphrasis

Antiphrasis - screen shot.

11. Richard Stelmach

Richard Stelmach - screen shot.

12. volll

volll - screen shot.

13. Navigant Consulting

Navigant Consulting - screen shot.

14. Dean Oakley

Dean Oakley - screen shot.

15. DivVoted

DivVoted - screen shot.

16. Ian Wharton

Ian Wharton - screen shot.

17. Pointless Ramblings

Pointless Ramblings - screen shot.

18. The Alamo Basement

The Alamo Basement - screen shot.

19. UGSMAG

UGSMAG - screen shot.

20. Deborah Cavenaugh

Deborah Cavenaugh - screen shot.

21. JESUS RODRIGUEZ VELASCO

JESUS RODRIGUEZ VELASCO - screen shot.

22. Silverback

Silverback - screen shot.

23. Yes Insurance

Yes Insurance - screen shot.

24. Miki Mottes

Miki Mottes - screen shot.

25. We Are not Freelancers

We Are not Freelancers - screen shot.

26. Mike Poss’ Rock Guitar Blog

Mike Poss' Rock Guitar Blog - screen shot.

27. Happy Webbies

Happy Webbies - screen shot.

28. Next2Friends

Next2Friends - screen shot.

29. TAKE A BENYLIN® DAY™

TAKE A BENYLIN® DAY™ - screen shot.

30. Neweracaptalk

Neweracaptalk - screen shot.

What’re you thinking?

What do you think about illustrative elements in web design? What are the benefits and what are the downsides? What types of websites should and shouldn’t have illustration? Sound off in the comments!

Related content

41 Comments

Chris Wallace

March 21st, 2009

Very cool, Jacob. I love Ian Wharton’s.

Matt

March 21st, 2009

I think illustration really provides a great professional affect. But I prefer to use it in bits rather than the whole site because it tends to lock you into that illustrated/cartoonish look. Which for some sites is a good thing.

Kayla

March 21st, 2009

I love illustration in web design. Wish I had my own scanner so I could do more of this stuff on my own sites.

Andrew Houle

March 21st, 2009

Nice compilation, inspiring choices!

Richard

March 21st, 2009

They all look the same. The internet is making us boring as hell.

EngineHere

March 21st, 2009

Very nice. Wish I could draw like this..

jack

March 21st, 2009

I know you’re trying to be fresh, but you gotta include some of the twitter stuff! They do a good job with their 400 pages and busy pages and etc. Anyway, thanks man!

Bob

March 21st, 2009

What do you think of ours?

Tyler Norris

March 21st, 2009

We just recently launched this site for a University in Wichita, KS. It’s made of illustrations, but with a grunge look to give it an edge that the client needed for the site. I think the grunge keeps it from looking cartoony, while still using all illustrations. But I was the designer, so I may be a bit bias ;)

http://www.freethecamels.com

Great article though!

loswl

March 21st, 2009

Very cool illustrations, I love all the different effects and styles displayed here ;0)

Two Socks

March 21st, 2009

Nice round up thanks!

Soh

March 21st, 2009

Very cool!

tnomeralc design

March 22nd, 2009

hi,
nice to know you, now days many people like to creat animated pages but they don’t have a creative thougth, so do I. I usually just mix some related pics in my photoshop template then put them in my blogs. some illustration blogs can illustrated me too.

Ellie

March 22nd, 2009

A great selection of web designs here. I agree, adding illustration to a website adds a personal touch that sometimes seems to be missing.

James Martin

March 22nd, 2009

Check out rittenhousepet.com as well!

Alex Vorn

March 22nd, 2009

Yeap, very nice collection. Thanks and keep the great work.

jack

March 22nd, 2009

@Bob – love the illustration style! however it loses energy and becomes a bit repetitive though.

N_Lite

March 22nd, 2009

Pretty Illustrations! :)

Patternhead

March 22nd, 2009

Some great original work here, nice collection

Paul

March 22nd, 2009

Thanks for the great examples.

Charles

March 22nd, 2009

I love the illustrated and animated header on the top of this British site:
http://www.bestmortgagedeals.co.uk/

Jacob Gube

March 22nd, 2009

@Charles: I normally hate animated GIF’s, but that actually wasn’t bad. Great find!

Claire

March 23rd, 2009

I love illustration, i am not particularly good at it myself, and a lot of the web designs i do, don’t really require me to be that creative. I have attempted a few and, yes they look pretty good actually, but creating characters – i cannot do!! I would like to know how those guys create such amazing illustrations, and how long it takes them!!

Lee Munroe

March 24th, 2009

Nice post, I love illustrated characters in web design like MailChimp and Silverback.

Ofer

March 24th, 2009

Have to say : WOW!!!!
It looks very good, complete and artistic.

svsen

March 24th, 2009

Very Nice Kamal

sivas

March 25th, 2009

very good, thank you

Mason S.

March 26th, 2009

#3, #12, and #22 are probably my favorite illustrations on websites.

Leena Ajwani

March 29th, 2009

Cool. can see lots of efforts put in these websites and design.

Callum Chapman

April 2nd, 2009

great stuff, some real creative illustrations there! I love the octonauts is amazing, and ian whartons portfolio is unbelievably good! cheers!

z.Yleo77

April 9th, 2009

great stuff。。。 tnx。。。 beatuiful

Don Anthony Murray

April 12th, 2009

Amazing work, loving the Mail chimp!!

evan

May 19th, 2009

I love vectors although it takes a lot of time just for 1 :/

Ashely Adams

September 10th, 2009

Wow….some real great illustrations. I really love characters like MailChimp, and Ian Wharton. Next2Friends and Deborah Cavenaugh are also good. Keep up the good work.

Zulu

September 22nd, 2009

very good exaples, thank you

Cara Dixon

October 20th, 2009

I love the ‘Jesus Rodriguez Velaso’ illustration! Its really creative and intricate! Love the ‘Mail Chimp’ too! Thanks for sharing!

C P

January 19th, 2010

These are great, please show some more. Any photography related illustrations?

CP

t.b.b.

August 28th, 2010

Sweet collection. Thanks for the inspiration.

Sam

October 25th, 2010

Wow! What a way to express imaginations. Great collection.

vita

September 7th, 2011

interesting approach. I think some things can make a note.Thanks.

Leave a Comment

Subscribe to the comments on this article.