Smashing Magazine - we smash you with the information that will make your life easier. really.

40 Excellent Illustrations In Web Designs

Advertisement

In website design, there are an endless amount of possibilities, styles and techniques that can be used to make a beautiful design that flows with the content. One of these styles is an illustration-heavy layout, which can take a website to a whole new level. Illustrations are becoming more and more popular, and some designers are really pushing the limits with some beautiful ones.

Below you’ll find 40 designs that feature skillful and beautiful illustrations, integrated properly to create a visually pleasing style.

Also consider our previous articles:

Beautiful Illustrations In Web Designs

DivVoted
An all-around beautiful layout, with some beautifully colored illustrations to accompany it.

Divvoted in 40 Excellent Illustrations In Web Designs

The Alamo Basement
A nice, colorful illustration that has a comforting air.

Alamobasement in 40 Excellent Illustrations In Web Designs

StrawPoll
StrawPoll has a beautifully illustrated landscape, with an extremely clever layout.

Strawpoll in 40 Excellent Illustrations In Web Designs

Green Globe Ideas
A high-quality and very creative illustration in the header.

Greenglobe in 40 Excellent Illustrations In Web Designs

old loft
A very nicely illustrated layout, with good coloring and contrast.

Oldloft in 40 Excellent Illustrations In Web Designs

Pixele
Pixele has a colorful and rather funky header that works well with the rest of the website.

Pixele in 40 Excellent Illustrations In Web Designs

Radu Ceuca
Another very colorful and grungy layout, with a painted effect.

Radu in 40 Excellent Illustrations In Web Designs

ten24 Media
A beautiful yet simple illustration that looks excellent against the brown background.

1024media in 40 Excellent Illustrations In Web Designs

Silverback
A very skillful and detailed illustration on a nice green layout.

Silverback in 40 Excellent Illustrations In Web Designs

Banjax
A simple but powerful illustration in the header, amidst a minimalist layout.

Banjax in 40 Excellent Illustrations In Web Designs

Neweracaptalk
A unique, flowing illustration that doesn’t detract from the content.

Newercap in 40 Excellent Illustrations In Web Designs

Dean Oakley
This is a great portfolio with a very creative horizontal layout. The illustration looks very nice with the layout.

Deanoakley in 40 Excellent Illustrations In Web Designs

K4 Laboratory
A very colorful illustration mixed with interesting moving Flash objects and some cool effects.

K4lab in 40 Excellent Illustrations In Web Designs

Visit Cascadia
A very detailed header background illustration.

Cascadia in 40 Excellent Illustrations In Web Designs

Galan
A beautiful and brightly colored portfolio, with nice hand-drawn illustrations.

Galan in 40 Excellent Illustrations In Web Designs

Branded07
A very clean website with some blue minimalist illustrations and really cool penguins.

Branded07 in 40 Excellent Illustrations In Web Designs

WP Coder
A very clever design with a nice, detailed, semi-realistic illustrated machine.

Wpcoder in 40 Excellent Illustrations In Web Designs

Africa Tour 2008
An excellent mixture of grunge and clean styling.

Africa in 40 Excellent Illustrations In Web Designs

45royale Inc.
Another elegant header design that looks great with the clean layout of the rest of the website.

45royale in 40 Excellent Illustrations In Web Designs

Fatburgr
A few skillful illustrations in a very cool overall layout.

Fatburgr in 40 Excellent Illustrations In Web Designs

Drink ZZZ
This Flash website uses grungy illustrations and smart Flash effects to create a fun user experience.

Zzz in 40 Excellent Illustrations In Web Designs

Ali Felski
Another website with grungy textures and fancy colors.

Ali in 40 Excellent Illustrations In Web Designs

DrupalCon DC
A colorful background graphic with a unique style.

Drupalcon in 40 Excellent Illustrations In Web Designs

LightCMS
The LightCMS website is known for its awesome coloring, textures and graphics.

Speaklight in 40 Excellent Illustrations In Web Designs

Sourcebits TangledDecals
A very beautiful website, with colorful illustrations across the background, great type and grungy graphics.

Sourcebits in 40 Excellent Illustrations In Web Designs

GoMediaZine
A nicely detailed and colorful illustration the doesn’t detract from the content. This is also a good example of how colorful shapes can be mixed with black and white graphics.

Gomediazine in 40 Excellent Illustrations In Web Designs

STUDIO7DESIGNS
One more very popular website, because of the breathtaking background illustration.

Studio7 in 40 Excellent Illustrations In Web Designs

Phizz
A mainly black and white illustration mixed into a colorful website.

Phizz in 40 Excellent Illustrations In Web Designs

answerJam
A very colorful minimalist website with simple shapes for illustrations.

Answerjam in 40 Excellent Illustrations In Web Designs

Adit Shukla
A cool illustration that uses many different shapes but not too many colors, thus achieving a perfect balance.

Adit in 40 Excellent Illustrations In Web Designs

Iceberg
Nice shapes and beautiful blue colors create a flowing design.

Iceberg in 40 Excellent Illustrations In Web Designs

Marchand de Trucs
A quite stunning and extremely realistic illustration.

Marchand in 40 Excellent Illustrations In Web Designs

Erguvan Platin Evlri
A stylish watercolor background and a realistic illustration with interactive features.

Erguvan in 40 Excellent Illustrations In Web Designs

Starbucks
Hand-drawn and illustrated graphics in a beautiful Flash-based layout.

Starbucks in 40 Excellent Illustrations In Web Designs

Viget Extend
A colorful and creative header illustration.

Viget in 40 Excellent Illustrations In Web Designs

Vimeo
A few simple graphics on a peaceful blue background.

Vimeo in 40 Excellent Illustrations In Web Designs

Go Glamping
A cool layout with distinctive shapes and good color scheme.

Glamping in 40 Excellent Illustrations In Web Designs

Twither
Subtle cloud illustrations on a nice layout, with a great landscape illustration in the footer.

Twither in 40 Excellent Illustrations In Web Designs

IL FRUTTETO
Simple shapes, great colors and gradients combine to make a completely illustrated website.

Ilfrutteto in 40 Excellent Illustrations In Web Designs

Umbrella Today?
Very realistic and detailed graphics with a great background design.

Umbrella in 40 Excellent Illustrations In Web Designs

Further Resources

You may be interested in checking out these further articles and related resources:

(al)

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags: ,

Advertising
  1. 1
    DKumar M.
    February 19th, 2009 3:38 pm

    Nice one…. I personally a big fan of using Illustrations into modern designs. Although it’s not to easy to create these type of Illustrations in general but it all depends upon the priority level.

    Thanks Matt for this selection.

    DKumar M.

  2. 2
    Brian Gottier
    February 19th, 2009 3:42 pm

    Some of this stuff seems recycled from other SM articles, but I like that Alamo Basement Illustration.

  3. 3
    Ben Debnam
    February 19th, 2009 3:57 pm

    A very inspiring list as always. Thank you for listing WPCoder, I really enjoyed working with WPCandy on that project.

  4. 4
    Nick
    February 19th, 2009 4:29 pm

    What’s up with the ugly, aliased Windows font rendering in all your screenshots? It really takes a way from a lot of the cool designs you post.

  5. 5
    Eli
    February 19th, 2009 4:37 pm

    Excellent examples. Thanks for the inspiring roundup :)

  6. 6
    Brian Herbert
    February 19th, 2009 4:42 pm

    I hate being “that guy” who points out something left off the list but the little illustration on http://ushahidi.com/ is quite nice.

  7. 7
    WillxD
    February 19th, 2009 4:52 pm

    very inspiring illustrations.

  8. 8
    sergi
    February 19th, 2009 5:04 pm

    an inspiring list. i’ve always liked vimeo’s. and now i’m a fan of twither (those moving clouds rock)(and did you notice you can’t right click on them – does that mean they are not flash?) and dean oakley.

  9. 9
    Jonners
    February 19th, 2009 5:05 pm

    Those are puffins, not penguins on Rob Palmer’s site ;)
    Otherwise, very nice piece and rather inspirational designs :)

  10. 10
    ChiefWakambi
    February 19th, 2009 5:11 pm

    I love cartoons and I like this kind of illustration. My daughter and son love it too. Technically I know how to do it but to come up with a creative idea, I’m blank at this point. I’m a System guy but I like creative things.

  11. 11
    Matt Cronin
    February 19th, 2009 5:17 pm

    @ sergi

    Twither does in fact use an embed flash object to create the cloud movement.

    @ Jonners

    Sorry, I’m a designer not a zoologist! I wouldn’t know the difference :)

  12. 12
    Floris Fiedeldij Dop
    February 19th, 2009 5:23 pm

    MacHeist web site is always gorgeous – graphic wise.

  13. 13
    Simon Harlinghausen
    February 19th, 2009 5:28 pm

    I love this article.

  14. 14
    david
    February 19th, 2009 5:59 pm

    so apparently you have to illustrate in vector to be “excellent”

  15. 15
    Casting
    February 19th, 2009 6:28 pm

    I like those

  16. 16
    Josh
    February 19th, 2009 6:30 pm

    Wanna know a secret? Go to the Silverback site and resize the window horizontally. You’ll see the vines move in perspective.

  17. 17
    Gis
    February 19th, 2009 7:08 pm

    What a wonderful selection, and great source of inspiration :D
    Take care guys!

  18. 18
    Kim
    February 19th, 2009 7:24 pm

    I dunno, speaking as an illustrator I have really mixed feelings about this post. On one hand, it’s awesome to see illustration get some recognition, especially as used in web design where it’s not as commonly seen. On the other hand, the similarity in style here is depressing. I know vector illustration is the big thing with web 2.0 style, but after a while it all starts to look the same to me. There are a few examples that don’t fit the norm, but overall there’s a lot of sameness here. Throwing a texture on a vector illustration may make it a bit grunge, but it doesn’t make it look natural. Some different styles would be awesome to see, and if there not out there, well… maybe they should be.

  19. 19
    Mar
    February 19th, 2009 10:05 pm

    Really rich websites being showcased here. Extremely mesmerising and informative. Thumbs up for the listing!

  20. 20
    Sandie Sørensen
    February 20th, 2009 12:18 am

    Nice examples

  21. 21
    Radu Ceuca
    February 20th, 2009 12:21 am

    Thanks for the feature guys! :)

  22. 22
    jean-marc
    February 20th, 2009 12:45 am

    So inspiring!

  23. 23
    Quakeulf
    February 20th, 2009 1:03 am

    As great as many of these designs are I can’t shake off the feeling that they are designing “learn how to read”-books for children and not a-ok sites adults. It’s like the dreaded kindergarten-like Windows XP’s theme all over again. It’s so cute and cuddly and childish in all the wrong ways, like Vimeo, Twither (lol title), IL FRUTTETO, old loft and many others.

    Design needs to grow up here IMHO.

    Radu Ceuca on the other hand, manages to avoid this and still stay fresh. Look at what he is doing if you want inspiration from this article. :3

  24. 24
    MATHIZ
    February 20th, 2009 1:11 am

    sorry guys I’m a big fan of SM but almost all of these webiste already featured on your website…….. maybe it’s time to find some new websites

  25. 25
    Luke's Beard
    February 20th, 2009 1:20 am

    I love this stuff , thanks :)

  26. 26
    Ozbon
    February 20th, 2009 1:28 am

    Just for future reference, the cool “penguins” in the design for Branded07 are actually puffins.

    Close, but no cigar…

  27. 27
    liebesiech
    February 20th, 2009 1:40 am

    Arghhhh, why I’m not talented enough to create such beautiful stuff! Anyway, like it!

  28. 28
    jurica
    February 20th, 2009 1:56 am

    Poor & recycled

  29. 29
    Alok Jain
    February 20th, 2009 2:00 am

    Why most of your articles keep repeating same designs?

  30. 30
    Quakeulf
    February 20th, 2009 2:05 am

    Alok Jain:

    Because it’s colonthree-time! :3

  31. 31
    Creamy CSS
    February 20th, 2009 2:49 am

    All those illustrations can make any website really nice and creative, wonderful collection!

  32. 32
    StaticVoid
    February 20th, 2009 4:47 am

    Beautiful, just beautiful

  33. 33
    dram
    February 20th, 2009 4:53 am

    Hey, thanks for featuring our work (NewEraCapTalk)! Greetings from e1k!

  34. 34
    Gary H
    February 20th, 2009 6:05 am

    Many of these won’t have universal appeal, especially of you’re already a designer or illustrator, but that’s more a matter of personal taste than anything.

    You may want to reconsider the compulsion to write a caption for every sample included as it may not be necessary to explain what’s probably quite obvious to the viewer already. Let the visuals speak for themselves.

  35. 35
    Biffy
    February 20th, 2009 6:53 am

    I’d love to use some images like these for my website.
    Is there a place with ready-made ones available (preferably free :D)?
    Alternatively, are there any decent tutorials for creating images like that? I can create a simple web design but I wouldn’t know where to start with something like that without doing some tutorials first.

  36. 36
    Timothy
    February 20th, 2009 7:13 am

    Nice list! I especially like the sheep wearing a rocket pack…

  37. 37
    serinfather
    February 20th, 2009 7:24 am

    Gooooooood! design!

  38. 38
    IndyIllustrator
    February 20th, 2009 8:50 am

    Props to the few sites listed here that actually allowed their illustrations to determine the layout of the site. All too often these days, everything is web 2.0 CMS, with graphics thrown in and around a template or theme.

  39. 39
    Drewster
    February 20th, 2009 9:01 am

    I can’t help myself:
    A very clean website with some blue minimalist illustrations and really cool penguins. They aren’t penguins but are called Pufins, just so you know…

  40. 40
    Tom
    February 20th, 2009 9:34 am

    Wow! Some really amazing illustrations – just wish I had the time to something like this in my work!

  41. 41
    Fiachra
    February 20th, 2009 9:57 am

    Great post, and many really beautiful sites. Well done.

    One small point of fact – I think that the “really cool penguins”… are actually puffins. :-)

  42. 42
    ron evans
    February 20th, 2009 10:58 am

    To echo another poster: -> so excellent illustration means a lot of vector-ish web 2.0 Illustrations?

    Is there any other style out there? Same thing with the grunge… the grunge pages are like web 2.0’s gothic twin sister…

    Yawn!

  43. 43
    JohnnyC
    February 20th, 2009 11:21 am

    NOT PENGuIN, PUFFIn

  44. 44
    Jessica
    February 20th, 2009 1:23 pm

    Ron Evans: “grunge pages are like web 2.0’s gothic twin sister…”

    Quote of the Year…. lol

  45. 45
    Quakeulf
    February 20th, 2009 1:38 pm

    “Let the visuals speak for themselves.”

    THIS.

    /thread

  46. 46
    Jeff Finley
    February 20th, 2009 5:55 pm

    Thanks for giving the Go Mediazine a shout in this list. Very greatful!

  47. 47
    Rodrigo Motta
    February 21st, 2009 5:45 pm

    I love Smashing Magazine. I need a Smashing Magazine t-shirt.

  48. 48
    TechWiz
    February 21st, 2009 7:19 pm

    Good to see DivVoted at the top. Have always loved that site!

  49. 49
    waqas
    February 22nd, 2009 4:16 am

    Great post…!

  50. 50
    Jamal
    February 22nd, 2009 9:29 pm

    Kool illustrations here’s one more http://www.boo-r-woo.com inspired from vimeo

  51. 51
    Karl Francisco Fernandes
    February 22nd, 2009 11:38 pm

    I personally love Nick La’s n design studio… Great phoenix illustration at the top… You have to check it out…

  52. 52
    oGereye
    February 23rd, 2009 2:50 am

    Can it be that u always show the same sites? i mean they are good, but they are also well known. Look for some new stuff :)

  53. 53
    Dave Berzack
    February 23rd, 2009 6:45 am

    Most of these are really cool illustrations, but don’t take advantage of the animation or interactive possibilities of the medium. Here’s a couple sites with cool illustrations that are more dynamic:
    http://www.thinkbrighthouse.com
    http://www.sweetwaterbrew.com
    http://www.mcbd.co.uk/

    The first two were designed by Toolbox9. The third was designed by MCBD

  54. 54
    Petros Dimitriadis
    February 24th, 2009 8:14 am

    Thank you for the add guys!

  55. 55
    Aamir Afridi
    February 24th, 2009 9:33 am

    I really love most of them but K4 Laboratory impressed me

  56. 56
    himanshu
    February 24th, 2009 4:37 pm

    this is a complete package for a startup,but i also want to say apart of this web designing, developers should explore a software called Adobe AIR,which will turn out to be boon for developers.

  57. 57
    Rory Martin
    February 25th, 2009 2:55 am

    There are some fantastic sites here, really inspirational.
    I love seeing illustrations used in websites, think they bring a lovely texture and feel to the screen.
    Particularly like the Starbucks site, very nice flash interface with a good use of sound.
    Adit Shukla’s landscape is pretty sweet too…
    Keep up the good work!

  58. 58
    karla
    February 25th, 2009 12:39 pm

    very beautiful collection. some of them at least :)

    check out http://myft.net, a page designed as a book with a lot of illustration!

  59. 59
    Brant Schroeder
    February 25th, 2009 12:51 pm

    Great Post
    I love viewing what others are up to.

  60. 60
    Alberto Villalobos Solano
    February 25th, 2009 10:32 pm

    Nice, its inspiring, cause lately i am using illustrations in my web design. even my own website has , you can wiew if you want!!

  61. 61
    web design group
    February 26th, 2009 1:06 am

    very beautiful collection.

  62. 62
    Content Writing Advice
    February 26th, 2009 8:06 am

    Great post. I personally like how Vimeo is designed, simple and clean.

  63. 63
    KooWii
    February 28th, 2009 2:25 am

    Nice illustrations. What I like the most is the K4 Laboratory. It is really eye catching. I hope one day I will be able to create such beautiful and catchy header for my own blog.

  64. 64
    Marc Kuiper
    March 2nd, 2009 2:41 pm

    Nice list!!

  65. 65
    Travolta, John
    March 5th, 2009 12:42 pm

    Bullshit. No one is W3C valid.

  66. 66
    Brian
    April 28th, 2009 7:56 pm

    Nice list. I really like Marchand de Trucs.
    How about one more? Kinetic Shadows

  67. 67
    talllal
    August 6th, 2009 10:25 pm

    شات الود
    الود

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job