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.
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:
Showcase of tiles and patterns in modern web design Link
The Paisley Farmhouse uses nicely packaged retro wallpaper tiles as the background image.
t!agOliveira uses a hardly recognizable, dark pattern as the background image. The image supports the content and fits to the overall site layout.
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.
General Robots uses stars tiles on both the left and the right side of the centered layout. It is also an online-shop.
…and so does Designbyfront: the same theme, a different color.
Eden Organix is a wellness store with a classic wallpaper pattern.
Images and Textures Link
Stone and walls Link
Nolgraphic makes it differently: a photo of a wall is used.
Tennessee Education uses a vibrant background image with lines from primary school writing books.
Springtime in Tennessee is a section on the same site and uses the same approach.
Stiches and Fabric Link
the brainwashfactory with stiches and fabric. Notice the sewed header at the top of the site.
Design Sponge is dedicated to home and product design which explains why its background image is a fabric.
Paper and Cardboard Link
RedBull with a huge ragged cardboard. Flash in use.
Decay, Dirt and Grunge Link
Old movie-tape Link
Robert Strickland uses wood as the background image; the colors in the design are chosen accordingly.
Skitnice uses wood not as the background image for the layout, but only as the background for the main content area.
Paul Wallas with a light falling on the wood.
Anthonyfairweather is a producer and designer and he seems to love black wood.
Brianwebb.org: surprise, surprise! This design combines two popular background themes, wood in the header and tiles in the footer.
Sources and Resources Link
- Tiled background designers95 is a pattern library where you can find, create and share patterns.
- Inspired by Nature: 27 websites with Wood96
- 30 Great Free Paper Backgrounds and Textures97
- WordPress Theme “ModernOak” – Screenshot
- Textures Download at Smashing Magazine98
- WordPress Theme “Woody”99
- The Ultimate Wood Texture Tutorial100
- Stunning Designs Using that Piece of Wood101
- 1 http://www.designmeltdown.com/chapters/GotWood/Part5.aspx
- 2 /2008/05/27/smashing-texture-contest-results/
- 3 /2007/01/02/where-can-i-find-textures-and-background-images/
- 4 http://bgpatterns.com/
- 5 http://bgpatterns.com/
- 6 /images/texture-bgs/pattern.jpg
- 7 http://www.renegadelatino.com/
- 8 http://www.renegadelatino.com/
- 9 http://www.uniquexports.com/
- 10 http://www.uniquexports.com/
- 11 http://www.noblanco.com/web/
- 12 http://www.noblanco.com/web/
- 13 http://www.booreiland.nl/
- 14 http://www.booreiland.nl/
- 15 http://www.warfield.net
- 16 http://www.warfield.net
- 17 http://www.fseid.de/
- 18 http://www.fseid.de/
- 19 http://dziesmusvetki.lndb.lv/
- 20 http://dziesmusvetki.lndb.lv/
- 21 http://www.evernote.com/
- 22 http://www.evernote.com/
- 23 http://www.antclark.co.uk/
- 24 http://www.antclark.co.uk/
- 25 http://www.digitalmash.com/
- 26 http://www.digitalmash.com//
- 27 http://www.miniicon.com
- 28 http://www.miniicon.com
- 29 http://www.paulburddesign.com/
- 30 http://www.paulburddesign.com/
- 31 http://www.outdooritalia.it/
- 32 http://www.outdooritalia.it/
- 33 http://soyrosa.nl/blog/
- 34 http://soyrosa.nl/blog/
- 35 http://www.pikaboo.be/
- 36 http://www.pikaboo.be/
- 37 http://elliotjaystocks.com/blog/
- 38 http://elliotjaystocks.com/blog/
- 39 http://cornerstoneamericus.com/
- 40 http://cornerstoneamericus.com/
- 41 http://www.homeless.org.za/
- 42 http://www.homeless.org.za/
- 43 http://www.hubltd.com/
- 44 http://www.hubltd.com/
- 45 http://darasgarden.com/
- 46 http://darasgarden.com/
- 47 http://deanoakley.com/
- 48 http://deanoakley.com/
- 49 http://www.divvoted.com/
- 50 http://www.divvoted.com/
- 51 http://www.scoutingforgirls.co.uk/
- 52 http://www.scoutingforgirls.co.uk/
- 53 http://loreleiwebdesign.com/
- 54 http://loreleiwebdesign.com/
- 55 http://www.a-falange.net/
- 56 http://www.a-falange.net/
- 57 http://www.thebrowncorporation.com/
- 58 http://www.thebrowncorporation.com/
- 59 http://theletter.co.uk/
- 60 http://theletter.co.uk/
- 61 http://www.brightcreative.com/
- 62 http://www.brightcreative.com/
- 63 http://www.decayofintent.com/
- 64 http://www.decayofintent.com/
- 65 http://www.0hara.com/
- 66 http://www.0hara.com/
- 67 http://www.riders-network.com/
- 68 http://www.riders-network.com/
- 69 http://www.lifestylesports.cz/
- 70 http://www.lifestylesports.cz/
- 71 http://www.chamadigital.com/
- 72 http://www.chamadigital.com/
- 73 http://www.kylehaskins.com/
- 74 http://www.kylehaskins.com/
- 75 http://www.slabovia.tv/
- 76 http://www.slabovia.tv/
- 77 http://www.highresolutiontextures.com/
- 78 http://www.highresolutiontextures.com/
- 79 http://www.builtbybuffalo.com/
- 80 http://www.builtbybuffalo.com/
- 81 http://lanikaiproperties.com/
- 82 http://lanikaiproperties.com/
- 83 http://www.vandervaartofficial.com/
- 84 http://www.vandervaartofficial.com/
- 85 http://www.does.ch/
- 86 http://www.does.ch/
- 87 http://webrevolutionary.com/
- 88 http://webrevolutionary.com/
- 89 http://www.soulcore.de/
- 90 http://www.soulcore.de/
- 91 http://www.perfectorder.jp/
- 92 http://www.perfectorder.jp/
- 93 http://bfrancesi.com/
- 94 http://bfrancesi.com/
- 95 http://bgpatterns.com/
- 96 http://www.jay-han.com/2008/02/19/27-websites-with-wood-design-inspiration/
- 97 http://www.creativecloseup.com/30-great-free-paper-backgrounds-and-textures
- 98 /2008/05/27/smashing-texture-contest-results/
- 99 #
- 100 http://psdtuts.com/tutorials-effects/the-ultimate-wood-texture-tutorial/
- 101 http://www.noupe.com/design/stunning-desings-using-that-piece-of-wood.html
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.