Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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 Link

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

Screenshot7

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

Screenshot

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

Screenshot9

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

Screenshot

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

Screenshot11

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

Screenshot13

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

Screenshot15

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

Screenshot17

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

Screenshot19

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

Screenshot21

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

Screenshot

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

Screenshot23

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

Screenshot25

Visit Cascadia
A very detailed header background illustration.

Screenshot

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

Screenshot27

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

Screenshot29

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

Screenshot31

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

Screenshot

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

Screenshot33

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

Screenshot35

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

Screenshot37

Ali Felski
Another website with grungy textures and fancy colors.

Screenshot

DrupalCon DC38
A colorful background graphic with a unique style.

Screenshot39

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

Screenshot41

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

Screenshot

GoMediaZine42
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.

Screenshot43

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

Screenshot45

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

Screenshot47

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

Screenshot

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

Screenshot

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

Screenshot49

Marchand de Trucs50
A quite stunning and extremely realistic illustration.

Screenshot51

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

Screenshot53

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

Screenshot

Viget Extend
A colorful and creative header illustration.

Screenshot

Vimeo54
A few simple graphics on a peaceful blue background.

Screenshot55

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

Screenshot57

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

Screenshot59

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

Screenshot61

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

Screenshot

Further Resources Link

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

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  2. 2 https://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  3. 3 https://www.smashingmagazine.com/2008/11/26/50-beautiful-and-creative-portfolio-designs/
  4. 4 https://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  5. 5 https://www.smashingmagazine.com/2008/10/23/50-beautiful-blog-designs/
  6. 6 http://www.divvoted.com/
  7. 7 http://www.divvoted.com/
  8. 8 http://www.strawpollnow.com/
  9. 9 http://www.strawpollnow.com/
  10. 10 http://oldloft.com/
  11. 11 http://oldloft.com/
  12. 12 http://www.pixele.fr/
  13. 13 http://www.pixele.fr/
  14. 14 http://blog.raduceuca.com/
  15. 15 http://blog.raduceuca.com/
  16. 16 http://www.1024media.com/
  17. 17 http://www.1024media.com/
  18. 18 http://silverbackapp.com/
  19. 19 http://silverbackapp.com/
  20. 20 http://www.banjax.com/
  21. 21 http://www.banjax.com/
  22. 22 http://deanoakley.com/
  23. 23 http://deanoakley.com/
  24. 24 http://www.k4lab.info/
  25. 25 http://www.k4lab.info/
  26. 26 http://www.galandesign.com/
  27. 27 http://www.galandesign.com/
  28. 28 http://www.branded07.com/
  29. 29 http://www.branded07.com/
  30. 30 http://wpcoder.com/
  31. 31 http://wpcoder.com/
  32. 32 http://www.45royale.com/
  33. 33 http://www.45royale.com/
  34. 34 http://fatburgr.com/
  35. 35 http://fatburgr.com/
  36. 36 http://zzz.drinkzzz.com/
  37. 37 http://zzz.drinkzzz.com/
  38. 38 http://dc2009.drupalcon.org/
  39. 39 http://dc2009.drupalcon.org/
  40. 40 http://www.speaklight.com/
  41. 41 http://www.speaklight.com/
  42. 42 http://www.gomediazine.com/
  43. 43 http://www.gomediazine.com/
  44. 44 http://www.studio7designs.com/
  45. 45 http://www.studio7designs.com/
  46. 46 http://www.phizz.biz/
  47. 47 http://www.phizz.biz/
  48. 48 http://www.geticeberg.com/
  49. 49 http://www.geticeberg.com/
  50. 50 http://www.marchanddetrucs.com/
  51. 51 http://www.marchanddetrucs.com/
  52. 52 http://www.erguvanplatin.com/
  53. 53 http://www.erguvanplatin.com/
  54. 54 http://www.vimeo.com/
  55. 55 http://www.vimeo.com/
  56. 56 http://goglamping.net/
  57. 57 http://goglamping.net/
  58. 58 http://www.twither.info/
  59. 59 http://www.twither.info/
  60. 60 http://www.campingilfrutteto.it/
  61. 61 http://www.campingilfrutteto.it/
  62. 62 http://abduzeedo.com/web-design-illustration
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    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.

    0
  2. 2

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

    0
  3. 3

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

    1
  4. 4

    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.

    0
  5. 5

    Excellent examples. Thanks for the inspiring roundup :)

    0
  6. 6

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

    0
  7. 7

    very inspiring illustrations.

    0
  8. 8

    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.

    0
  9. 9

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

    0
  10. 10

    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.

    0
  11. 11

    @ 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 :)

    0
  12. 12

    Floris Fiedeldij Dop

    February 19, 2009 5:23 pm

    MacHeist web site is always gorgeous – graphic wise.

    0
  13. 13

    Simon Harlinghausen

    February 19, 2009 5:28 pm

    I love this article.

    0
  14. 14

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

    0
  15. 15

    I like those

    0
  16. 16

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

    0
  17. 17

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

    0
  18. 18

    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.

    1
  19. 19

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

    0
  20. 20

    Sandie Sørensen

    February 20, 2009 12:18 am

    Nice examples

    0
  21. 21

    Thanks for the feature guys! :)

    0
  22. 22

    So inspiring!

    0
  23. 23

    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

    1
  24. 24

    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

    0
  25. 25

    I love this stuff , thanks :)

    0
  26. 26

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

    Close, but no cigar…

    0
  27. 27

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

    0
  28. 28

    Poor & recycled

    0
  29. 29

    Why most of your articles keep repeating same designs?

    0
  30. 30

    Alok Jain:

    Because it’s colonthree-time! :3

    0
  31. 31

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

    0
  32. 32

    Beautiful, just beautiful

    0
  33. 33

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

    0
  34. 34

    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.

    0
  35. 35

    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.

    0
  36. 36

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

    0
  37. 37

    Gooooooood! design!

    0
  38. 38

    IndyIllustrator

    February 20, 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.

    0
  39. 39

    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…

    0
  40. 40

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

    0

↑ Back to top