About The Author

Sven is the co-founder and former CEO of Smashing Magazine. He write at his Conterest Blog, where he focuses on blogs, content strategy, writing and publishing … More about Sven Lennartz

Textures and Patterns Design Showcase

      Textures and patterns are used more often than one may think. The reason why 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 to 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 style and wood is the new white.

      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 style 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 2008 Showcase of tiles and patterns in web design

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

      Texture Background Screenshot

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

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

      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

      Uniquexports 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 - Uniquexport

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

      Textures and Patterns Design

      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

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

      Textures and Patterns Design - Booreiland - platform for creative productions

      Warfield.net with a classic wallpaper patterns…

      Texture Background Screenshot

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

      Texture Background Screenshot

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

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

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

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

      Evernote has a corporate design with quite strange background patterns.

      Textures and Patterns Design - Remember everything. | Evernote Corporation

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

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

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

      Textures and Patterns Design - Rob Morris

      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

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

      Texture Background Screenshot

      Paul Burd uses the same concept.

      Texture Background Screenshot

      Images and Textures

      Ground

      Outdoor Italia 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, trekking

      Stone and walls

      Soyrosa uses vibrant stone stripes as the background image.

      Textures and Patterns Design - SOYROSA.nl / weblog

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

      Texture Background Screenshot

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

      Texture Background Screenshot

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

      Texture Background Screenshot

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

      Texture Background Screenshot

      Bricks

      uturn 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.za

      Hubltd.com with bricks painted in a white color.

      Texture Background Screenshot

      Illustrations

      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 Garden with beautiful flowers which make the background more lively and lovely.

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

      Dean Oakley’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, Australia

      DivVoted fills the whole page with a vibrant background image.

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

      Stiches and Fabric

      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 Girls doesn’t only offer a “sewed” background image; it has a beautiful ladybug at the bottom as well.

      Texture Background Screenshot

      Paper and Cardboard

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

      Texture Background Screenshot

      A-Falange.net uses old-looking paper…

      Texture Background Screenshot

      RedBull with a huge ragged cardboard. Flash in use.

      Texture Background Screenshot

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

      Texture Background Screenshot

      Ceramics

      The Letter with a ceramics theme.

      Texture Background Screenshot

      Decay, Dirt and Grunge

      BrightCreative: ornaments and patterns in use.

      Texture Background Screenshot

      Decay of Intent: 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 Portfolio

      Old movie-tape

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

      Texture Background Screenshot

      Rust

      Riders network: 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 bike

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

      Texture Background Screenshot

      Wood

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

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

      Kyle Haskins 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 Haskins

      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.tv 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 West

      Highresolutiontextures 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 patterns

      Built by Buffalo with a high-quality wood background.

      Texture Background Screenshot

      Oahu Hawaii real estate 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 Kailua

      Rafael van der Vaart: 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 website
      Textures and Patterns Design - DivVoted - vote for your favourite designs - another YoDiv site

      Stiches and Fabric

      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 Girls doesn’t only offer a “sewed” background image; it has a beautiful ladybug at the bottom as well.

      Texture Background Screenshot

      Paper and Cardboard

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

      Texture Background Screenshot

      A-Falange.net uses old-looking paper…

      Texture Background Screenshot

      RedBull with a huge ragged cardboard. Flash in use.

      Texture Background Screenshot

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

      Texture Background Screenshot

      Ceramics

      The Letter with a ceramics theme.

      Texture Background Screenshot

      Decay, Dirt and Grunge

      BrightCreative: ornaments and patterns in use.

      Texture Background Screenshot

      Decay of Intent: 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 Portfolio

      Old movie-tape

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

      Texture Background Screenshot

      Rust

      Riders network: 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 bike

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

      Texture Background Screenshot

      Wood

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

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

      Kyle Haskins 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 Haskins

      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.tv 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 West

      Highresolutiontextures 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 patterns

      Built by Buffalo with a high-quality wood background.

      Texture Background Screenshot

      Oahu Hawaii real estate 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 Kailua

      Rafael van der Vaart: 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 website

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

      Textures and Patterns Design - Does.ch

      WebRevolutionary with the black-white wood.

      Texture Background Screenshot

      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
      Texture Background Screenshot

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

      Texture Background Screenshot

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

      Texture Background Screenshot

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

      Texture Background Screenshot

      Sources and Resources