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

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

Screenshot7

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

Screenshot9

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

Screenshot11

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

Screenshot13

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

Screenshot15

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

Screenshot17

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

Screenshot19

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

Screenshot21

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

Screenshot23

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

Screenshot25

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

Screenshot27

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

Screenshot29

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

Screenshot31

Visit Cascadia32
A very detailed header background illustration.

Screenshot33

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

Screenshot35

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

Screenshot37

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

Screenshot39

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

Screenshot41

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

Screenshot43

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

Screenshot45

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

Screenshot47

Ali Felski48
Another website with grungy textures and fancy colors.

Screenshot49

DrupalCon DC50
A colorful background graphic with a unique style.

Screenshot51

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

Screenshot53

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

Screenshot55

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

Screenshot57

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

Screenshot59

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

Screenshot61

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

Screenshot63

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

Screenshot65

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

Screenshot67

Marchand de Trucs68
A quite stunning and extremely realistic illustration.

Screenshot69

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

Screenshot71

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

Screenshot73

Viget Extend74
A colorful and creative header illustration.

Screenshot75

Vimeo76
A few simple graphics on a peaceful blue background.

Screenshot77

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

Screenshot79

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

Screenshot81

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

Screenshot83

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

Screenshot85

Further Resources

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

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
  2. 2 http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  3. 3 http://www.smashingmagazine.com/2008/11/26/50-beautiful-and-creative-portfolio-designs/
  4. 4 http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  5. 5 http://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.thealamobasement.com/
  9. 9 http://www.thealamobasement.com/
  10. 10 http://www.strawpollnow.com/
  11. 11 http://www.strawpollnow.com/
  12. 12 http://greenglobeideas.com/
  13. 13 http://greenglobeideas.com/
  14. 14 http://oldloft.com/
  15. 15 http://oldloft.com/
  16. 16 http://www.pixele.fr/
  17. 17 http://www.pixele.fr/
  18. 18 http://blog.raduceuca.com/
  19. 19 http://blog.raduceuca.com/
  20. 20 http://www.1024media.com/
  21. 21 http://www.1024media.com/
  22. 22 http://silverbackapp.com/
  23. 23 http://silverbackapp.com/
  24. 24 http://www.banjax.com/
  25. 25 http://www.banjax.com/
  26. 26 http://neweracaptalk.com/blog/
  27. 27 http://neweracaptalk.com/blog/
  28. 28 http://deanoakley.com/
  29. 29 http://deanoakley.com/
  30. 30 http://www.k4lab.info/
  31. 31 http://www.k4lab.info/
  32. 32 http://www.visitcascadia.com/
  33. 33 http://www.visitcascadia.com/
  34. 34 http://www.galandesign.com/
  35. 35 http://www.galandesign.com/
  36. 36 http://www.branded07.com/
  37. 37 http://www.branded07.com/
  38. 38 http://wpcoder.com/
  39. 39 http://wpcoder.com/
  40. 40 http://www.stopchildlabour.eu/africatour2008/
  41. 41 http://www.stopchildlabour.eu/africatour2008/
  42. 42 http://www.45royale.com/
  43. 43 http://www.45royale.com/
  44. 44 http://fatburgr.com/
  45. 45 http://fatburgr.com/
  46. 46 http://zzz.drinkzzz.com/
  47. 47 http://zzz.drinkzzz.com/
  48. 48 http://alifelski.com/
  49. 49 http://alifelski.com/
  50. 50 http://dc2009.drupalcon.org/
  51. 51 http://dc2009.drupalcon.org/
  52. 52 http://www.speaklight.com/
  53. 53 http://www.speaklight.com/
  54. 54 http://sourcebits.com/tangleddecals/
  55. 55 http://sourcebits.com/tangleddecals/
  56. 56 http://www.gomediazine.com/
  57. 57 http://www.gomediazine.com/
  58. 58 http://www.studio7designs.com/
  59. 59 http://www.studio7designs.com/
  60. 60 http://www.phizz.biz/
  61. 61 http://www.phizz.biz/
  62. 62 http://www.answerjam.com/
  63. 63 http://www.answerjam.com/
  64. 64 http://aditshukla.com/
  65. 65 http://aditshukla.com/
  66. 66 http://www.geticeberg.com/
  67. 67 http://www.geticeberg.com/
  68. 68 http://www.marchanddetrucs.com/
  69. 69 http://www.marchanddetrucs.com/
  70. 70 http://www.erguvanplatin.com/
  71. 71 http://www.erguvanplatin.com/
  72. 72 http://www.starbuckscoffeeathome.com/
  73. 73 http://www.starbuckscoffeeathome.com/
  74. 74 http://www.viget.com/extend/
  75. 75 http://www.viget.com/extend/
  76. 76 http://www.vimeo.com/
  77. 77 http://www.vimeo.com/
  78. 78 http://goglamping.net/
  79. 79 http://goglamping.net/
  80. 80 http://www.twither.info/
  81. 81 http://www.twither.info/
  82. 82 http://www.campingilfrutteto.it/
  83. 83 http://www.campingilfrutteto.it/
  84. 84 http://umbrellatoday.com/
  85. 85 http://umbrellatoday.com/
  86. 86 http://abduzeedo.com/web-design-illustration

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

Advertising
  1. 1

    Karl Francisco Fernandes

    February 22, 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…

    0
  2. 52

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

    0
  3. 103

    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

    0
  4. 154

    Petros Dimitriadis

    February 24, 2009 8:14 am

    Thank you for the add guys!

    0
  5. 205

    I really love most of them but K4 Laboratory impressed me

    0
  6. 256

    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.

    0
  7. 307

    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!

    0
  8. 358

    very beautiful collection. some of them at least :)

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

    0
  9. 409

    Great Post
    I love viewing what others are up to.

    0
  10. 460

    Alberto Villalobos Solano

    February 25, 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!!

    0
  11. 511

    very beautiful collection.

    0
  12. 562

    Content Writing Advice

    February 26, 2009 8:06 am

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

    0
  13. 613

    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.

    0
  14. 664

    Nice list!!

    0
  15. 715

    Bullshit. No one is W3C valid.

    0
  16. 817

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

    1
  17. 868
  18. 919

    very very cool! Thanks 4 list!

    1
  19. 970

    That’s a realy cool ressource for inspiration. Illustration in web design is so great that I wrote an article about it on my blog : graphismeo.com/ressources/illustration-webdesign-ressources-tutoriaux

    0

↑ Back to top