Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Textures and Patterns Design Showcase

Textures and patterns are used more often than one may think. The reason we don’t see them is because they usually remain in the background, supporting the overall design, replacing a standard background color and creating a more inviting atmosphere. But they almost never stand out. Used primarily for background images, they need to fit the overall design making the content easier to perceive. In fact, wood textures seem to have become so popular that designers suggest that wood is the new glossy style1 and wood is the new white.

Well, we don’t think that wood is a new revolutionary trend — after all, it was used and explored for years. However, since wood isn’t used everywhere — incorrect and wrong contexts — experimenting with it makes perfect sense. Still, there are some options beyond wood: e.g. fabric patterns, tiles, ground, stone, walls, bricks, stitches, cardboard, ceramics, decay, rust, old tapes, illustrations, plastic and glass.

In this post we present a showcase of sites using textures and patterns— we want to focus designer’s attention on design options available beyond wood. Reason: we firmly believe that vibrant, realistic background images are becoming a new trend. If it sounds familiar to you, you are right: we saw the same pattern 8-10 years ago. The sources for the background images are usually either photos (e.g. you can download free textures in the Smashing Texture Library2) or illustrations created with Photoshop, Illustration etc.

You may want to take a look at the related articles:

Tiles, Patterns Link

How do I create a tile or a pattern? Link

Actually, that’s easier than one might think. For instance, you can use BgPatterns4, a free “tiled background designer” which is basically a pattern library where you can find, create, rate and share patterns. You can select one of 68 images (scrolls, stars, flowers, hearts, signs, trees etc.) as well as pick a color of your tile and the pattern will be generated automatically.

5

You can also apply some effects (dirty, rugged, etc.) and rotate the pattern as you wish. The service has a nifty preview option that enables you to generate your background tiles on the fly, download them or store them.

Here is a compact overview of tiles which have been used on some sites presented below:

Screenshot6

Showcase of tiles and patterns in modern web design Link

The Paisley Farmhouse uses nicely packaged retro wallpaper tiles as the background image.

Texture Background Screenshot

Renegade Latino7 uses dark tiles for the background image. The content should probably be larger.

Textures and Patterns Design - Renegade Latino » Pa' Que Sepan El Poder Latino8

t!agOliveira uses a hardly recognizable, dark pattern as the background image. The image supports the content and fits to the overall site layout.

Textures and Patterns Design - t!agOliveira's | onePageFolio

Uniquexports9 uses patterns and tiles for the background image for an online-shop. The pattern resembles a usual (not desktop) wallpaper. The design looks unusual yet attractive and definitely distinctive.

Textures and Patterns Design - Uniquexport10

Noblanco11 with a background patterns on the left side of the page. The layout is right-aligned for some reason.

Textures and Patterns Design12

General Robots uses stars tiles on both the left and the right side of the centered layout. It is also an online-shop.

Textures and Patterns Design - General Robots

Booreiland13: any friends of blue, pink and yellow out there?

Textures and Patterns Design - Booreiland - platform for creative productions14

Warfield.net15 with a classic wallpaper patterns…

Texture Background Screenshot16

…and so does Designbyfront: the same theme, a different color.

Texture Background Screenshot

Falko Seidel17 with some tiles which one can find in old sweaters or on indoor walls.

Textures and Patterns Design - ::::: FSEID PORTFOLIO ::::: Falko Seidel :::::18

Latviešu Dziesmu svētki19 with traditional wallpaper tiles.

Textures and Patterns Design - Latviešu Dziesmu svētki20

Evernote21 has a corporate design with quite strange background patterns.

Textures and Patterns Design - Remember everything. | Evernote Corporation22

Anthony Clark23 uses a fading background pattern in the header of his portfolio.

Textures and Patterns Design - antclark.co.uk | Anthony Clark | Online Portfolio24

Rob Morris25 with a classic pattern used as the background image.

Textures and Patterns Design - Rob Morris26

Eden Organix is a wellness store with a classic wallpaper pattern.

Textures and Patterns Design - Welcome to Eden Organix - The Finest Organic Skin Care and Cosmetics Products

MiniIcon27 keeps it to minimal; tiny content area is surrounded by background tiles.

Texture Background Screenshot28

Paul Burd29 uses the same concept.

Texture Background Screenshot30

Images and Textures Link

Ground Link

Outdoor Italia31 uses crumbly pieces of the ground as the background image. Other illustrations on the site fit to the background. The ants on the right hand side of the layout are pretty cool.

Textures and Patterns Design - Outdoor Italia official site - Abbigliamento e accessori per l'outdoor, escursionismo, campeggio, trekking32

Stone and walls Link

Soyrosa33 uses vibrant stone stripes as the background image.

Textures and Patterns Design - SOYROSA.nl / weblog34

Pikaboo.be35 with hard, strong and dark stone and an unusual vertical scrolling.

Texture Background Screenshot36

Elliot Jay Stocks37 uses stones as well and has even a tutorial which explains how to Create a textured background image

Texture Background Screenshot38

Nolgraphic makes it differently: a photo of a wall is used.

Texture Background Screenshot

Corner Stone Americus39 is a church web-site with a grunge look.

Texture Background Screenshot40

Bricks Link

uturn41 with bricks used as the background image. Here the background fits to the theme of the site which aims to “work togther to uplift street people”.

Textures and Patterns Design - uturn - working togther to uplift street people - homeless.org.za42

Hubltd.com43 with bricks painted in a white color.

Texture Background Screenshot44

Illustrations Link

Tennessee Education uses a vibrant background image with lines from primary school writing books.

Textures and Patterns Design - Education – Main

Springtime in Tennessee is a section on the same site and uses the same approach.

Textures and Patterns Design - Springtime in Tennessee

Dara’s Garden45 with beautiful flowers which make the background more lively and lovely.

Textures and Patterns Design - Dara’s Garden · Weddings, Receptions and Events in Knoxville, TN46

Dean Oakley47‘s design isn’t long but wide. Users need to scroll horizontally. The background image (illustration) always remains the same.

Textures and Patterns Design - Dean Oakley - I currently live on the Gold Coast, Australia48

DivVoted49 fills the whole page with a vibrant background image.

Textures and Patterns Design - DivVoted - vote for your favourite designs - another YoDiv site50

Stiches and Fabric Link

the brainwashfactory with stiches and fabric. Notice the sewed header at the top of the site.

Textures and Patterns Design - the brainwashfactory

Design Sponge is dedicated to home and product design which explains why its background image is a fabric.

Texture Background Screenshot

Scouting for Girls51 doesn’t only offer a “sewed” background image; it has a beautiful ladybug at the bottom as well.

Texture Background Screenshot52

Paper and Cardboard Link

Raufaser53 with an old paper pattern used as the background image.

Texture Background Screenshot54

A-Falange.net55 uses old-looking paper…

Texture Background Screenshot56

RedBull with a huge ragged cardboard. Flash in use.

Texture Background Screenshot

The Brown Corporation57 uses a similar idea. The site name (Shitbox) is probably not the best title from the marketing perspective.

Texture Background Screenshot58

Ceramics Link

The Letter59 with a ceramics theme.

Texture Background Screenshot60

Decay, Dirt and Grunge Link

BrightCreative61: ornaments and patterns in use.

Texture Background Screenshot62

Decay of Intent63: the title of the site defines the layout of Alessandro Cammarota’s portfolio. Apparently, the background image stands for decay, the main theme of the site.

Textures and Patterns Design - Decay of Intent :: Alessandro Cammarota Portfolio64

Old movie-tape Link

0hara65 uses an old movie-tape for the background.

Texture Background Screenshot66

Rust Link

Riders network67: riders drive on the roads which is why this riders’ club uses rusty road as the background image.

Textures and Patterns Design - RIDERS NETWORK e.V. - The different lounge for your bike68

Life Style Sports69 has a rusty background image with asymmetric points spread across the background image.

Texture Background Screenshot70

Wood Link

ChamaDigital71 with a “wood”-theme. Clean and beautiful design.

Textures and Patterns Design - Home | ChamaDigital - Web Design Portfólio72

Kyle Haskins73 uses subtle “woody” background image which doesn’t stand out yet manages to support the content effectively. The design itself is clean and attractive.

Textures and Patterns Design - Kyle Haskins74

Robert Strickland uses wood as the background image; the colors in the design are chosen accordingly.

Textures and Patterns Design - happilycreate by Robert Strickland

Slabovia.tv75 combine a unique retro-design with grid-based approach and with wood. The result is impressive.

Textures and Patterns Design - Slabovia.tv - Unimpressed With The West76

Highresolutiontextures77 with, well, high-resolution textures and the wood used as a background image.

Textures and Patterns Design - highresolutiontextures.com - the home of high quality textures and patterns78

Built by Buffalo79 with a high-quality wood background.

Texture Background Screenshot80

Oahu Hawaii real estate81 attempts to combine grunge with retro and wood. The result is definitely unusual, but in some sense quite appealing.

Textures and Patterns Design - Oahu Hawaii real estate - homes and condos in Honolulu Waikiki Kailua82

Rafael van der Vaart83: the site uses wood as the background image. Beware: on the site music automatically starts to play.

Textures and Patterns Design - Rafael van der Vaart official football website84

Does.ch85 uses wood, stiches, old paper and grunge together. Well, that’s an unusual combination.

Textures and Patterns Design - Does.ch86

WebRevolutionary87 with the black-white wood.

Texture Background Screenshot88

soulBlog89 uses a wood theme for a 4-column-based design layout. The color of links and headings fits to the theme.

Textures and Patterns Design - soulBlog90

Skitnice uses wood not as the background image for the layout, but only as the background for the main content area.

Textures and Patterns Design - Skitnice - bend za svadbe

Paul Wallas with a light falling on the wood.

Texture Background Screenshot

Perfect Order91 is a Japanese online store with a wooden background.

Texture Background Screenshot92

Bfrancesi.com93 with a dark sprayed “woody” background image.

Texture Background Screenshot94

Anthonyfairweather is a producer and designer and he seems to love black wood.

Texture Background Screenshot

Brianwebb.org: surprise, surprise! This design combines two popular background themes, wood in the header and tiles in the footer.

Texture Background Screenshot

Sources and Resources Link

Footnotes Link

  1. 1 http://www.designmeltdown.com/chapters/GotWood/Part5.aspx
  2. 2 /2008/05/27/smashing-texture-contest-results/
  3. 3 /2007/01/02/where-can-i-find-textures-and-background-images/
  4. 4 http://bgpatterns.com/
  5. 5 http://bgpatterns.com/
  6. 6 /images/texture-bgs/pattern.jpg
  7. 7 http://www.renegadelatino.com/
  8. 8 http://www.renegadelatino.com/
  9. 9 http://www.uniquexports.com/
  10. 10 http://www.uniquexports.com/
  11. 11 http://www.noblanco.com/web/
  12. 12 http://www.noblanco.com/web/
  13. 13 http://www.booreiland.nl/
  14. 14 http://www.booreiland.nl/
  15. 15 http://www.warfield.net
  16. 16 http://www.warfield.net
  17. 17 http://www.fseid.de/
  18. 18 http://www.fseid.de/
  19. 19 http://dziesmusvetki.lndb.lv/
  20. 20 http://dziesmusvetki.lndb.lv/
  21. 21 http://www.evernote.com/
  22. 22 http://www.evernote.com/
  23. 23 http://www.antclark.co.uk/
  24. 24 http://www.antclark.co.uk/
  25. 25 http://www.digitalmash.com/
  26. 26 http://www.digitalmash.com//
  27. 27 http://www.miniicon.com
  28. 28 http://www.miniicon.com
  29. 29 http://www.paulburddesign.com/
  30. 30 http://www.paulburddesign.com/
  31. 31 http://www.outdooritalia.it/
  32. 32 http://www.outdooritalia.it/
  33. 33 http://soyrosa.nl/blog/
  34. 34 http://soyrosa.nl/blog/
  35. 35 http://www.pikaboo.be/
  36. 36 http://www.pikaboo.be/
  37. 37 http://elliotjaystocks.com/blog/
  38. 38 http://elliotjaystocks.com/blog/
  39. 39 http://cornerstoneamericus.com/
  40. 40 http://cornerstoneamericus.com/
  41. 41 http://www.homeless.org.za/
  42. 42 http://www.homeless.org.za/
  43. 43 http://www.hubltd.com/
  44. 44 http://www.hubltd.com/
  45. 45 http://darasgarden.com/
  46. 46 http://darasgarden.com/
  47. 47 http://deanoakley.com/
  48. 48 http://deanoakley.com/
  49. 49 http://www.divvoted.com/
  50. 50 http://www.divvoted.com/
  51. 51 http://www.scoutingforgirls.co.uk/
  52. 52 http://www.scoutingforgirls.co.uk/
  53. 53 http://loreleiwebdesign.com/
  54. 54 http://loreleiwebdesign.com/
  55. 55 http://www.a-falange.net/
  56. 56 http://www.a-falange.net/
  57. 57 http://www.thebrowncorporation.com/
  58. 58 http://www.thebrowncorporation.com/
  59. 59 http://theletter.co.uk/
  60. 60 http://theletter.co.uk/
  61. 61 http://www.brightcreative.com/
  62. 62 http://www.brightcreative.com/
  63. 63 http://www.decayofintent.com/
  64. 64 http://www.decayofintent.com/
  65. 65 http://www.0hara.com/
  66. 66 http://www.0hara.com/
  67. 67 http://www.riders-network.com/
  68. 68 http://www.riders-network.com/
  69. 69 http://www.lifestylesports.cz/
  70. 70 http://www.lifestylesports.cz/
  71. 71 http://www.chamadigital.com/
  72. 72 http://www.chamadigital.com/
  73. 73 http://www.kylehaskins.com/
  74. 74 http://www.kylehaskins.com/
  75. 75 http://www.slabovia.tv/
  76. 76 http://www.slabovia.tv/
  77. 77 http://www.highresolutiontextures.com/
  78. 78 http://www.highresolutiontextures.com/
  79. 79 http://www.builtbybuffalo.com/
  80. 80 http://www.builtbybuffalo.com/
  81. 81 http://lanikaiproperties.com/
  82. 82 http://lanikaiproperties.com/
  83. 83 http://www.vandervaartofficial.com/
  84. 84 http://www.vandervaartofficial.com/
  85. 85 http://www.does.ch/
  86. 86 http://www.does.ch/
  87. 87 http://webrevolutionary.com/
  88. 88 http://webrevolutionary.com/
  89. 89 http://www.soulcore.de/
  90. 90 http://www.soulcore.de/
  91. 91 http://www.perfectorder.jp/
  92. 92 http://www.perfectorder.jp/
  93. 93 http://bfrancesi.com/
  94. 94 http://bfrancesi.com/
  95. 95 http://bgpatterns.com/
  96. 96 http://www.jay-han.com/2008/02/19/27-websites-with-wood-design-inspiration/
  97. 97 http://www.creativecloseup.com/30-great-free-paper-backgrounds-and-textures
  98. 98 /2008/05/27/smashing-texture-contest-results/
  99. 99 #
  100. 100 http://psdtuts.com/tutorials-effects/the-ultimate-wood-texture-tutorial/
  101. 101 http://www.noupe.com/design/stunning-desings-using-that-piece-of-wood.html
SmashingConf Barcelona 2016

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 Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy and publishing — all in German.

  1. 1

    Ryan Merket

    July 9, 2008 3:44 pm

    Again, wonderful content. Thanks Smashing!

    /ryanmerket.com

    1
  2. 2

    Dominik Porada

    July 9, 2008 3:49 pm

    Kicks ass! Thank you SM. :)

    0
  3. 3

    didn’t take very long for wood backgrounds to get old!

    0
  4. 4

    Enrique Flouret

    July 9, 2008 4:02 pm

    Thanks for mentioning my 30 Paper backgrounds and textures article.

    I also collected a few grunge textures here:
    http://www.photoshoproadmap.com/Photoshop-blog/2007/08/14/10-grunge-rusty-and-dirty-tileable-textures/

    Thanks again!

    0
  5. 5

    Wayde Christie

    July 9, 2008 4:08 pm

    René Drieënhuize’s site is a rip of http://digitalmash.com/

    0
  6. 6

    Brilliant!

    0
  7. 7

    Oh please. This so-called modern and “in” stuff is not pretty at all. It is not good looking just because some artists who can draw lines in Illustrator or create a wooden-like pattern thinks it is.

    It really hurts the usability and is not exactly easy on the eye. Thanks god for so-called “glossy” pages instead.

    0
  8. 8

    Brilliant list! I have been trying to find some cool patterns and this just topped it. Keep it coming.

    0
  9. 9

    Textures are my weak point so far in web design: my work looks ‘flat’ and uninteresting. This article has really given me a good kick in the pants: I was fascinated by the featured sites. I looked at every single one. Thank you as well for the link to the texture generator: I’ve been looking for a site like this and I was never able to track one down. You just saved me hours and hours and hours of fussing around trying to generate my own textured backgrounds. It’s a great resource.

    0
  10. 10

    Grant Friedman

    July 9, 2008 7:57 pm

    I have a lot of free high resolution textures on my site http://www.colorburned.com. Feel free to download them and use them in your designs.

    0
  11. 11

    Great stuff! This left me with a facial expression similar to this: :3~ (drool and all)

    0
  12. 12

    Lucian Lature

    July 9, 2008 10:55 pm

    Trully eyemazing!…

    0
  13. 13

    Wow! The samples are really awesome! I’ve never seen such designs like Renegade Latino’s or Uniquexport’s! Really amazing!

    0
  14. 14

    Blair Millen

    July 9, 2008 11:46 pm

    Thanks very much for the Ceramics category guys, much appreciated :-)

    0
  15. 15

    Wow, this is exactly what I’ve been looking for.
    Where to get good texture backgrounds AND a whole article on the subject.

    “A smashing article!”

    0
  16. 16

    Some of these designs are really fantastic and seem quite usable, a few though seem to put design before usability.
    As they say: Design is nice but usability is nice too. :)

    Jason
    Designerbay.com

    0
  17. 17

    Hinduismnet.com

    July 9, 2008 11:59 pm

    While this post rocks as usual, but the sad part is the Web 2.0 look for all the sites… they all have the same bloggish design built on some wordpress or some CMS.

    0
  18. 18

    Some of these designs are really nice and seem quite usable, a few though seem to put design before usability.
    As they say: Design is nice but usability is nice too. :)

    0
  19. 19

    Falko Seidel’s photo of the on/off-Switch could be a great style switcher as well!

    0
  20. 20

    great examples.

    0

↑ Back to top