Navigation

Showcase: Textures in Web Design

Design, Resources | Sep 7, 2010

Textured backgrounds in website design are common, especially in grunge designs. But they’re used in a variety of other design styles, too.

Textures can add visual interest to an otherwise-minimalist design, or can add that extra bit of detail that really makes a design pop.

Paper textures are by far the most common, but other regularly-seen textures include stone, concrete, rust, and fabric. And they’re not just used for backgrounds, either. Some sites incorporate textures into every aspect of their design, while others just use them for accents.

Below are more than thirty great website designs that make use of textures. Feel free to share your favorites, whether featured here or not, in the comments…

 

Kohette WebDesign

A stone-textured background is set apart with subtle coloring in the header. The texture repeats throughout the background.

kohette

 

Hugs for Monsters

Hugs for Monsters uses a bold stone texture throughout the background on their site. Incorporating it into the header adds a sense of cohesiveness to the site.

hugsformonsters

 

Forest Edge Music Festival

The Forest Edge Music Festival site is a striking and colorful grunge design, with multiple textures used throughout. A cardboard texture is the most prominent, though there are also more subtle paper textures.

forestedge

 

GO Mammoth

The grungy paper texture in the background here is echoed in other page elements, including the navigation menu. It adds visual interest to what would otherwise be very modern aesthetically.

gomammoth

 

Pigeon & Pigeonette

The heavy textures used here almost resemble a sponge-painted wall. Heavy use of textures like this should be done with caution so as not to overwhelm the content. Here it works because the content is very minimal.

pigeonandpigeonette

 

Benestar

The Benestar website uses a mix of paper, fabric, and wood textures, along with a variety of subtle patterns. It creates a very rich, multi-layered design.

benestar

 

Marie Catribs

Repeating similar textures across a site, as is done here with handmade paper textures in various colors. The hand-drawn elements further accent the paper texture.

mariecatribs

 

Crush + Lovely

Subtle textures like those used here can have a very rich effect on a minimalist site design. Mixing textures while maintaining a monochromatic color scheme enhances that effect.

crushlovely

 

Think. Do. Create.

Textures don’t have to be used throughout a site to make an impact. Here, paper textures are just used in the header and sidebar, leaving the bulk of the background white.

thinkdocreate

 

Wearable Print

When subtle textures are combined with subtle patterns, the end result is refined and elegant, with that extra something that makes a design stand out.

wearableprint

 

Coastal Connection

A heavy paper texture, like the one used here, makes a big difference in the aesthetics of a site. Without the texture, this would be a very minimalist site.

coastalconnection

 

Sibling Rivalry

Another example of a grunge-style site that makes heavy use of paper textures.

siblingrivalry

 

What Katie Does

What Katie Does is another site that combines a subtle paper texture with a repeating pattern (both in the background and header). Other design elements echo the paper motif.

whatkatiedoes

 

The Hipstery

The Hipstery uses a paper-textured background behind their main content, as well as behind the background pattern. It adds to the vintage feel of the site.

thehipstery

 

Doublenaut

This background combines a pattern and a texture, in the form of what looks like weathered graph paper. It adds extra interest to a site that is otherwise very minimalist.

doublenaut

 

Digital Podge 2009

Another site that uses a paper texture for its background. Subtle but effective.

digitalpodge2009

 

Infinitum

A light, stone-textured background is subtle enough to be used directly behind text. Be careful using bolder textures in such a manner, though.

infinitum

 

TypeFaces

Another graph paper-textured background that’s subtle enough to have type placed directly on top of it.

typefaces

 

Duchy of Cornwall Nursery

Using different shades of color on effectively the same background texture adds depth and interest to a design.

duchyofcornwallnursery

 

Questionable Characters

The concrete-textured background here adds a ton of visual interest and is a bit unexpected considering the rest of the site utilizes paper-themed elements.

questionablecharacters

 

Sky’s Guide Service

Here’s a site that utilizes a number of textures, including wood grain and paper. They’ve added elements like staples and water stains to further accentuate the textures.

skysguideservice

 

Bermon Painter

A slightly different ruled paper background, complete with water stains and weathering. It’s subtle yet adds a lot of aesthetic value.

bermonpainter

 

Paul Bennett

Another site that uses a subtle paper texture for the background with text placed directly on top.

pmbennett

 

Matthew & Sara Are Getting Married

The textured wallpaper-style background here is something a bit different than is normally seen. It’s sort of a combination of a texture and a pattern, and works brilliantly.

matthewnsara

 

The Waiting Room

Vintage-style sites gain a lot by using weathered, antique-looking paper for their background.

thewaitingroom

 

Christopher Calicott

Another textured background that also adds a bit of a pattern in the form of subtle squares. The transparency in the main content area further highlights the texture.

calicott

 

Design Development & the Pursuit of Happiness

Another fantastic example of a paper-textured background, this time with a more gray tone than many of those seen above.

thisisaaronslife

 

Amy Herndon Photography

The background here is a monochromatic canvas texture. It adds to the natural look of the site, and has a very organic feeling.

amyherndonphotography

 

Rhett Canipe

Rhett Canipe’s site uses a variety of textures for a grunge look. Mixing watercolor effects with textures makes for a much richer design.

rhettcanipe

 

Fiore Designs

Fiore Designs incorporates a variety of textures: the background is a grungy linen and paper textures are used throughout the main design elements. It’s a very visually interesting result that feels very elegant and exclusive.

fioredesigns

 

Every Time I Die

The bolder stone texture used throughout the Every Time I Die site adds to the overall grunge look. Stronger textures like this should be used with caution, as they can be overwhelming if not incorporated properly. Here, the bold colors and graphics compensate for it.

everytimeidie

 

Evan Stein’s Internet Studio

A grungy, layered paper texture in the background here is another example of a strong texture. The simple color scheme here, though, keeps it from being overwhelming.

evanstein

 

InkByte

The InkByte site uses a stained paper texture for its background, which looks great without overwhelming the content.

inkbyte

 

Kathryn Thurman

A variety of paper and cardboard textures throughout the design of this site give a vintage and grungy feeling to the design.

kathrynthurman

 

Francesco Molezzi Design & Multimedia

Another subtle paper textured background, which makes the entire site appear more retro, despite the fact there’s only one really retro-looking graphic on the page. Notice also that other textures are subtly incorporated, including a denim texture in the header and more paper in the top navigation.

francescomolezzi


Written exclusively for WDD by Cameron Chapman.

Have your own favorite website designs that use textures well, or maybe some tutorials that talk about good use of textures? Please share them in the comments below!

Share this post
Comments (no login required)
  • http://webbyarts.com Mohanraj

    Wow! this is really an useful showcase of texture for website. Thanks for sharing.

  • http://www.websolpk.com imran khan

    Great Great collection of texture designs!!!!

    amazing

  • http://philwebservices.i.ph/ John Paul

    Indeed they are fantastic …thanks for sharing this bounch of inspiration mate !

  • Niubi

    Wow, some awesome designs there! I am surprised that you omitted DubLi though – they’ve got an awesome website layout.

  • http://www.stefhan.com stefhan

    Thanks for these beautiful websites !
    And watch this too : http://www.ndesign-studio.com/

  • http://www.studioweber.ro Alex Flueras

    Really like the Benestar layout. Thanks for the roundup.

  • http://laroouse.com esranull

    woow very good list thanks a lot

  • Klaus

    Good showcases! Well compiled.

  • http://www.perfilgeek.com Edwin Sandoval

    Excelent post, it inspired me so much. The textures are a powerfull resource that give a different touch at every Web Design.

  • http://www.logolitic.com logolitic

    Hugs for Monsters and Forest Edge Music Festival are the best! Great selections

  • http://www.thekidsoldout.com Chris

    love that the ETID site is listed here.

  • http://awesome.hu/ adikahorvath

    I think the best from these: GO Mammoth :)

  • http://www.blackeye.com.au/ Black Eye

    LOVE texture!

    When I walk into shops I have to touch things that look like they have texture, or even if they’re smooth – similarly texture in art (digital or otherwise) draws me in.

    This reflects in our website design too > http://www.blackeye.com.au/

  • http://sexidesign.com Melody

    I like the design of the crest for What Katie Does…very fun design =)

  • http://www.childmonster.com/ Childmonster

    Ya ! i agree Melody. Very fun for that site :D

  • http://www.mammut-medien.de Daniel

    What a wonderful list. I was looking for textured backgrounds yesterday :-)

  • http://www.jipjip.com/ Jip

    Great examples. I find it hard to use textures in a balanced way. The websites above are very inspiring.

  • pesho

    Awesome Showcase :)

  • http://www.triplebytes.com/myblog Lee

    I like all of the designs shown here. Great job!

  • http://www.yuvadesigns.com Yuva Designs

    Great showcases.
    Thanks for sharing.
    Yuva Desings

  • http://www.chrismauck.com Chris Mauck

    Thanks for the roundup! I am currently developing a site that has a defined texture across the header, but the site owner is considering a full background texture. This will be a valuable resource to share so that he can weigh the pros and cons without me having to develop numerous versions of the site.

  • http://rajesharma.com broncha

    Nice showcase.Thanks for sharing .Cheers!!!

  • http://www.led-lighting-blog.de webbi

    Wonderful collection, i love it! :)

  • http://edocster.blogspot.com Sean Kinn

    I think web designers should also spend some time with text-based SEO, or hire a writer to spend some time writing the required text. I call it Web 2.0 Freelance Writing, but it’s just a simple matter of establishing a blog (the writer must blog often); writing separate articles (for the important back-links); and commenting often at blogs and sites that allow the practice (also for the back-links). SK

  • Chris Poppleton

    Great collection. I really like the subtle textures and wood effect employed on the Bombed Out Records website here: http://www.bombedout.com

  • http://www.tunuevaweb.com Nueva web

    great textures

  • http://www.web-designmiltonkeynes.co.uk/ Website design bedford

    Amazing collections…………..really interesting and innovative………..I will definitely bookmark your site for future reference!!!!!!!!!!!!

  • http://www.websites-seo.gr chris

    Lovely collection. I really like the ‘fiore designs’.

  • http://www.thisisaaronslife.com Aaron Irizarry

    Thanks for the include on this list!
    Some great sites on here.

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Sky’s guide is one of my fav’s on the list there – mainly because I am a bit of a fisher :) But seriously this is a great resource, cheers guys.

  • http://www.psyched.be/wordpress Darkened Soul

    some nice designs here… i still have a lot to learn :D
    keep up them nice posts WDD!

  • http://www.scrapsforever.com Scrapsforever

    Great collection, all designs are fantastic
    Thanks for sharing with us

  • http://www.flickr.com/photos/jjunior_propaganda/ @_JJunior

    I love textures! and above all citations used very well!

  • http://heathwaller.com/ Heath

    Great compilation! I’d not seen a lot of this before. Very thoughtful eye! Thank you so much for putting this together, Cameron.

  • http://kaueribeiro.com Kaue Ribeiro

    Great Collection. I’d like to add one if no one minds – http://kaueribeiro.com.

  • http://www.aledesign.it aledesign.it

    Nice collection..really useful. Thanks for the sharing!

  • http://www.teamnijhuis.nl Reclamebureau Team Nijhuis

    Excelent post!

  • http://www.girloncanvas.com Christie

    textures rock, and now I am forever staring at hugs for monsters and sara n matthew’s site. All very inspiring…

  • http://ewaslocinska.com Ewa

    I love textures! I have textured background on my portfolio too: http://ewaslocinska.com :)

  • http://www.aboutadirk.com Dirk

    Can’t make do without them. I love creating textures. I used to have “Tile the un-tileable” as … well… sort of as a slogan, if you will. A tag line. Used it everywhere, since I loved to make seamless textures.

    It adds a lot to a website. It can add color, style, but mostly it adds depth.

    I don’t want this post to look like I posted to share show my portfolio, but it’s up there when you click my name :p The texture there is a bit lame though.

  • http://troydeshano.com Troy

    I love Marie Catrib’s!
    Make it a priority to eat there anytime I’m in Grand Rapids – glad they’ve got a site that does their incredible food justice!

  • http://www.craigpennings.com Craig Pennings

    Integrating subtle textures can make a design go from normal to outstanding. Nice list.

  • http://www.laurencecaro.co.uk/ Laurence Caro

    Great examples. The websites above are very inspiring. Excellent post! Thanks

  • http://www.freenewsjournal.com/ Nimish

    I am a designer,it helps me lots