Showcase Of Beautiful Textured Web Designs

Advertisement

Textures have become more popular and been put to greater use in recent years. They’re not limited to Web design either; textures of all kinds are used in print design, illustration, traditional art, TV commercials… you name it! Texture is one of the best ways to add depth to your design, whether it’s subtle noise on a clean vector illustration or a lot of grunginess throughout a layout.

Over the last weeks we collected numerous examples of beautiful textured Web designs to inspire you, followed by a small collection of links to help you get started in using textures in your own designs.

If you like this post, you may be interested in reading some of our other texture-related articles:

Textured Web Designs

Loukotka4

Loukotka5

FT Designer6

FT Designer7

Cole & Weber8

Cole & Weber9

Jason Julien10

Jason Julien11

Trinity Irish Pub12

Trinity Irish Pub13

The Klog14

Klog15

Alex Coleman16

Alex Coleman17

Bergedorf18

Bergedorf19

Big Cartel20

Big Cartel21

Stuck in Customs22

Stuck in Customs23

Bill C. English24

Bill C. English25

Boerne Wild West Day26

Boerne Wild West Day27

Brown Blog Films28

Brown Blog Films29

Chouteaus Landing30

Chouteaus Landing31

Ctrl+N Diseño Gráfico32

Ctrl+N Diseño Gráfico33

Cubeclub Chemnitz34

Cubeclub Chemnitz35

Danny Diablo36

Danny Diablo37

Demain Jarrete38

Demain Jarrete39

DH Cards40

DH Cards41

Dibtych42

Dibtych43

Douglas Menezes44

Douglas Menezes45

Eliseos46

Eliseos47

Fudge48

Fudge49

5 Pieces50

5 Pieces51

Glocal Ventures52

Glocal Ventures53

Handcrafted CSS54

Handcrafted CSS55

Inner Metro Green56

Inner Metro Green57

Introzo58

Introzo59

53 Mondays60

53 Mondays61

Island Photobooth62

Island Photobooth63

Mutant Labs64

Mutant Labs65

Legwork Studio66

Legwork Studio67

Le Web Défi68

Le Web Défi69

Lilly Stable70

Lilly Stable71

Love Freelancing72

Love Freelancing73

Mark Forrester74

Mark Forrester75

Markup & Style76

Markup & Style77

Martin Anderle78

Martin Anderle79

Matt Salik80

Matt Salik81

Merge Web82

Merge Web83

Meson Projekt Blog84

Meson Projekt Blog85

Morphix86

Morphix87

Mother Earth Brewing88

Mother Earth Brewing89

New to York90

New to York91

Orange Label92

Orange Label93

Pampaneo94

Pampaneos95

Piz’za-za96

Piz'za-za97

River City Church98

River City Church99

Roar 4 Milk100

Roar 4 Milk101

Saddleback Leather102

Saddleback Leather103

Stack Overflow104

Stack Overflow105

Story Pixel106

Story Pixel107

Sushi and Robots108

Sushi and Robots109

Texture Lovers110

Texture Lovers111

Tony Chester112

Tony Chester113

Yodaa114

Yodaa115

What Is Blik116

What Is Blik117

Yellow Bird Project118

Yellow Bird Project119

Thunder Fuel120

Thunder Fuel121

THS122

THS123

Texture Downloads

Texture Tutorials

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/02/06/100-beautiful-free-textures/
  2. 2 http://www.smashingmagazine.com/2008/07/09/textures-and-patterns-design-showcase/
  3. 3 http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/
  4. 4 http://www.loukotka.com/
  5. 5 http://www.loukotka.com/
  6. 6 http://ftdesigner.net/
  7. 7 http://ftdesigner.net/
  8. 8 http://coleweber.com/
  9. 9 http://coleweber.com/
  10. 10 http://jasonjulien.com/
  11. 11 http://jasonjulien.com/
  12. 12 http://thetrinitypub.com/
  13. 13 http://thetrinitypub.com/
  14. 14 http://www.koodoz.com.au/klog/
  15. 15 http://www.koodoz.com.au/klog/
  16. 16 http://alexcoleman.net/
  17. 17 http://alexcoleman.net/
  18. 18 http://bergedorf.dk/
  19. 19 http://bergedorf.dk
  20. 20 http://bigcartel.com/
  21. 21 http://bigcartel.com/
  22. 22 http://stuckincustoms.com/
  23. 23 http://stuckincustoms.com/
  24. 24 http://billcenglish.com/
  25. 25 http://billcenglish.com/
  26. 26 http://boernewildwestday.com/
  27. 27 http://boernewildwestday.com/
  28. 28 http://brownblogfilms.com/
  29. 29 http://brownblogfilms.com/
  30. 30 http://www.chouteauslanding.com/
  31. 31 http://www.chouteauslanding.com/
  32. 32 http://ctrln.comyr.com/
  33. 33 http://ctrln.comyr.com/
  34. 34 http://cubeclub-chemnitz.de/
  35. 35 http://cubeclub-chemnitz.de/
  36. 36 http://dannydiablo.de/
  37. 37 http://dannydiablo.de/
  38. 38 http://demainjarrete.stpo.fr/blog-52-demain-j-arrete-faith-no-more.html
  39. 39 http://demainjarrete.stpo.fr/blog-52-demain-j-arrete-faith-no-more.html
  40. 40 http://dhcards.com/
  41. 41 http://dhcards.com/
  42. 42 http://dibtych.de/
  43. 43 http://dibtych.de/
  44. 44 http://douglasmenezes.com/wp
  45. 45 http://douglasmenezes.com/wp
  46. 46 http://eliseos.net/
  47. 47 http://eliseos.net/
  48. 48 http://madebyfudge.com/
  49. 49 http://madebyfudge.com/
  50. 50 http://5pieces.com/
  51. 51 http://5pieces.com/
  52. 52 http://glocalventures.org/
  53. 53 http://glocalventures.org/
  54. 54 http://handcraftedcss.com/
  55. 55 http://http://handcraftedcss.com/
  56. 56 http://innermetrogreen.com/
  57. 57 http://innermetrogreen.com/
  58. 58 http://introzo.com/
  59. 59 http://introzo.com/
  60. 60 http://53mondays.com/
  61. 61 http://53mondays.com/
  62. 62 http://islandphotobooth.com/
  63. 63 http://islandphotobooth.com/
  64. 64 http://mutantlabs.co.uk/
  65. 65 http://mutantlabs.co.uk/
  66. 66 http://legworkstudio.com/
  67. 67 http://legworkstudio.com/
  68. 68 http://lewebdefi.com/
  69. 69 http://lewebdefi.com/
  70. 70 http://lillystable.com/
  71. 71 http://lillystable.com/
  72. 72 http://lovefreelancing.com/
  73. 73 http://lovefreelancing.com/
  74. 74 http://markforrester.co.za/
  75. 75 http://markforrester.co.za/
  76. 76 http://markupandstyle.org/
  77. 77 http://markupandstyle.org/
  78. 78 http://martinanderle.de/
  79. 79 http://martinanderle.de/
  80. 80 http://mattsalik.com/
  81. 81 http://mattsalik.com/
  82. 82 http://mergeweb.com/
  83. 83 http://mergeweb.com/
  84. 84 http://mesonprojekt.com/blog
  85. 85 http://mesonprojekt.com/blog
  86. 86 http://morphix.si/
  87. 87 http://morphix.si/
  88. 88 http://motherearthbrewing.com/
  89. 89 http://motherearthbrewing.com/
  90. 90 http://newtoyork.com/
  91. 91 http://newtoyork.com/
  92. 92 http://orangelabel.com/
  93. 93 http://orangelabel.com/
  94. 94 http://pampaneo.es/
  95. 95 http://pampaneo.es/
  96. 96 http://www.pizzaza.ca/restaurant/bar_a_vin.php
  97. 97 http://www.pizzaza.ca/restaurant/bar_a_vin.php
  98. 98 http://rccjax.com/
  99. 99 http://rccjax.com/
  100. 100 http://roar4milk.ca/
  101. 101 http://roar4milk.ca/
  102. 102 http://saddlebackleather.com/
  103. 103 http://saddlebackleather.com/
  104. 104 http://stackoverflow.carsonified.com/
  105. 105 http://stackoverflow.carsonified.com/
  106. 106 http://storypixel.com/
  107. 107 http://storypixel.com/
  108. 108 http://sushiandrobots.com/
  109. 109 http://sushiandrobots.com/
  110. 110 http://texturelovers.com/
  111. 111 http://texturelovers.com/
  112. 112 http://tonychester.com/
  113. 113 http://tonychester.com/
  114. 114 http://yodaa.com/
  115. 115 http://yodaa.com/
  116. 116 http://whatisblik.com/
  117. 117 http://whatisblik.com/
  118. 118 http://yellowbirdproject.com/
  119. 119 http://yellowbirdproject.com/
  120. 120 http://thunderfuel.com/
  121. 121 http://thunderfuel.com/
  122. 122 http://ths.nu/ths.php
  123. 123 http://ths.nu/ths.php
  124. 124 http://www.texturelovers.com/
  125. 125 http://lostandtaken.com/
  126. 126 http://zentextures.com/
  127. 127 http://www.lovetextures.com/
  128. 128 http://webtreats.mysitemyway.com/
  129. 129 http://circleboxtextures.com/
  130. 130 http://texturevault.net/
  131. 131 http://textur.es/
  132. 132 http://psd.tutsplus.com/interface-tutorials/design-a-cartoon-grunge-website-layout/
  133. 133 http://www.webdesigndev.com/photoshop/how-to-create-a-green-grunge-web-layout
  134. 134 http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-textured-grungy-3d-type-design
  135. 135 http://www.tutorialboard.net/texture-layer-modes/
  136. 136 http://www.tutorial9.net/photoshop/design-a-stylish-retro-game-boy-poster-in-photoshop/
  137. 137 http://www.tutorial9.net/photoshop/add-visual-texture-3-easy-steps/
  138. 138 http://circleboxblog.com/2009/tutorials/how-to-create-a-texture-based-poster-in-photoshop/

↑ Back to topShare on Twitter

Callum Chapman is a self-employed blogger and graphic/web designer. He has recently launched a blog dedicated to visual inspiration for designers, photographers and artists called The Inspiration Blog.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Good article!

  2. 2

    Great collection, only seen a handful of these before. I love a well textured website design.

  3. 3

    Not a big fan of such complex visuals, for websites & user-interfaces.

    The Graphics in those websites are really good though.

  4. 4

    Thank you for the mention guys!

  5. 5

    You missed one of the best: Check out the portfolio of Elder Jerez, amazing use of textures: http://www.progressiveone.com

  6. 6

    Nice to see some sites with more creative and relevant textures other than the cliché ‘grunge’ effect.

  7. 7

    Some real cool designs here.

  8. 8

    excellent creative !!! very useful for me!! awesome creators!!!

  9. 9

    Great collection—full of sites I haven’t seen before (so rare in these kind of posts these days)! Kudos.

    • 10

      Thank you Kate and Jessica for hosting me today! I had so much fun as your guest today :) And Kate, thank you for the wodeurfnl review. I’m so excited (jumping up and down thrilled) to hear that you enjoyed it!!

  10. 11

    Gripping stuff!

  11. 12

    As pretty as some are, I can’t see them being very practical. THS has a background image that weighs in at 1.1mb. Not exactly optimized!

  12. 13

    Glad you like it – it took a while to put this one together! Quite a lot of research went in to finding unseen sites by both me and Vitaly. Thanks for the links guys, I’ve bookmarked them for a future post! ;)

  13. 14

    Great roundup! I think the {ths} one is pretty inspiring. Another example of combining different textures to create depth: http://aggressivepanhandler.com

  14. 15

    Seriously? Background images? Yes these are nicer than the cement and wood grain textures of fifteen years ago, but it’s still basically the same thing.

    I guess I’m with the crowd that doesn’t much care what color of paint is on the outside of the store. I’m interested in what’s inside. And I’ll guarantee you the inside doesn’t look like the outside, most times.

  15. 16

    fabulous collection!

  16. 17

    Nice collection. Better than the of last year :) More my kind of stuff ^^
    I think you should add http://nocreativity.com/blog/ too. The header and footer are pieces of artwork!

  17. 18

    I LOVE THIS! I’m so happy you’ve posted this, this is exactly my style and I’ve been lacking inspiration of late, brill! Thanks!

  18. 19

    Great and inspiring collection. Thanks.

  19. 20

    Some really unique designs here, Brown Bag films has been a favorite site of mine for awhile.

  20. 21

    Texture has been a growing trend in web design and I hope it’s here to stay. I love the style. The trick here is to incorporate textures without making the designs too heavy. Many of these examples here show that texture and clean design can work together beautifully.

    Great selections, love so many.

  21. 22

    Awesome round up! Textured is a great design style that doesn’t get enough press. Not only is it difficult to design, but converting to HTML is no walk in the park.

  22. 23

    Oh, wow. Remarkable.

  23. 24

    Some genuinely beautiful and clever sites – most are portfolio sites it would seem. No harm in that. Translating this into the corporate online world might not be the way to go but inspirational nonetheless.

    Well done SM. Keep up the great work.

  24. 25

    FYI the Handcrafted CSS link is broken.

  25. 26

    Thanks for the mention and great collection. Congrates !

  26. 27

    Christopher Anderton

    October 29, 2009 5:40 pm

    Hello. My name is *input your name here*. I’m a designer and….

    AHHHHHHHHHH!! :)

  27. 28

    Thanks for mention Eliseos You guys rock!

  28. 29

    Beautyful collections!!!!!!!!!

  29. 30

    Thanks for the mention dude and great collection. Congrates !

  30. 31

    Congrats….Nice collection

  31. 32

    Check this one also : http://www.skovin.com.mk

  32. 33
  33. 34

    Martin Anderle’s site is totally gorgeous!!

  34. 35

    Now that’s a roundup. Love texture and love learning how to better use it, especially in web design.

  35. 36

    Thanks for taking the time to collect these beatiful sites of inspiration!

  36. 37

    Amazin!

  37. 38

    I post a news about this post in our 53mondays blog. We very happy in agency ^^.

  38. 39

    Some awesome work there – really impressive stuff. Check out In Safe Hands Childcare for another good use textured background

  39. 40

    Thank you guys at Smashing Magazine for mentioning our site!

  40. 41

    hey, thanks for mentioning my site – nice collection :)))
    greetz from frankfurt

  41. 42

    I can’t help but find the header in the second example funny.

    “Hello! I’m Graphic Designer who is passionate for creating modern and functional design that provokes feelings.”

    Nice to meet you Graphic Designer, thanks for provoking feelings. I’m not going to say what type of feelings, just feelings in general will do.

  42. 43

    thanks for recognizing “Trinity Irish Pub” it was a tuff one :)

  43. 44

    many of these showing that usability and personality are awesome together, a break from the tired clinical interfaces… faves: brown bag, ths, story pixel, sushi/robots

  44. 45
  45. 46

    Lisa & Danny Bergedorf

    October 30, 2009 9:38 am

    Thank you so much for mentioning our website – and thank you so much to our designer too. Thank you :-)

    We really like some of the others to..

  46. 47

    Karl Francisco Fernandes

    October 30, 2009 10:04 am

    Thank you Smashing Magazine for this mention! This is a dream come true. Cheers!

  47. 48

    awesome reference post, but am i the only one who is sick of seeing layers and layers of dirty paper, stickies and paperclip collages on every other site?

  48. 49

    @Mike
    I agree. I’m tired of seeing every other website I visit using these design elements in them.

    Though, I do like this collection. Inspirational!

  49. 50

    I love textured sites.

  50. 51

    Floris Fiedeldij Dop

    October 31, 2009 6:11 am

    I love these designs, but they are just too much. It is a puzzle to read what the content of the site is sometimes. Everything in moderation, seems to be forgotten here, sometimes. Many are excellent. Great inspiration.

  51. 52

    Thanks for the feature! Minor correction: the site is Lilly’s Table, not Lilly Stable.

  52. 53

    Y, it’s very nice, thx.

  53. 54

    Thunder Fuel is awesome! I love the background of it. so cool.

  54. 55

    Here’s a brand new one that just launched for a Youtube celeb:

    http://www.davedays.com

↑ Back to top