27 Websites with Outstanding Use of Textures

Textures can be used in web and graphic design to add a great deal of character, or to help complete a design. In some cases the texture may be a prominent part of the design, today’s web design a subtle use of texture is more common. Several years ago you would see a lot of websites designed with large, grungy textures as a main focal point of the design. Now most uses of texture are more subtle, but they can be equally important to the design.

In this post we’ll showcase 27 different websites that make excellent use of texture. Flat design may popular in web design, but textures are still relevant and useful in the right situation. But before we showcase these example sites we’ll take a look at the different approaches you can take to incorporate texture into your own designs.

Ways to Incorporate Textures into a Web Design

The sites being showcased will serve as inspiration, and you can use any of the methods covered here to create your own designs with texture.

Textured Photos Layered in Photoshop

One of the easiest ways to incorporate texture into your design is to start with a texture from a photo or a scan and use it as a layer in your work in Photoshop. You can use the various blend modes available in Photoshop to apply the texture to any element in your design.

Since there are so many textures readily available, or you can create your own, this is an easy way to get started with textures. In our shop we have loads of textures available, including our Premier Texture Bundle.

Photoshop Brushes

Another easy way to add texture to a design is through the use of Photoshop Brushes. There are a huge number of Photoshop brushes available that will add different types of texture (we have plenty available in our shop). This includes everything from heavy grunge textures to soft and subtle textures to brush strokes. If you have access to the right brushes, adding texture is easy.

Patterns

Repeating or tileable patterns can also be used to create texture. You can either use pre-made patterns (like the patterns found in our shop), or you can create your own patterns in Photoshop. You can apply patterns easily to any layer in your design, making it a great option.


Large Photos

Many websites today are making use of large photos either for full-screen backgrounds or just as an integral part of the design. If a large photo includes some textured elements it can have the same impact on the overall design as if the texture had been created in Photoshop. We see several examples like this is the showcase. For this approach to work you just need to find the right photo with the right texture.

Showcase of Textures in Web Design

Enough talk about textures… Let’s look at some examples.

The Archer Group

The Archer Group’s website uses a somewhat sublte textured repeating pattern. Although it is not an overpowering texture, it does have a big impact on the design.

The Archer Group

Gerren Lamson

Designer Gerren Lamson uses a very subtle repeating texture on the background of his site. With a simple Photoshop pattern you can create a textured background similar to this one.

Gerren Lamson

Eyeweb

Eyeweb uses a few different subtle textures on their site, including the one seen here on the blue background. There is also a subtle textured sunray used as well.

Eyeweb

Forefathers Group

Forefathers Group uses a subtle texture with a neutral colored background. This is another example of a texture that is subtle but still an important part of the design.

Forefathers Group

Paolo Cavanna

Designer and developer Paolo Cavanna uses a subtle texture with a repeating pattern on the background of his site. The paper-like texture adds a nice touch to the design.

Paolo Cavanna

Growcase

The soft color palatte and subtle texture used on the design of Growcase work very well together. The entire background has the subtle texture, and there are also some patterns used on various elements in the design of the site.

Growcase

Gaumont T.S. Spivet

The background photo of this site is combined with a paper texture to give it a very attractive look. As you scroll down the page you’ll see several other examples of photos that have had textures added to them. This can be accomplished fairly easily with the right paper texture.

Gaumont T.S. Spivet

Marketplace

The design of Marketplace uses a few different textures. The header and navigation menu has a dark background with some brush stroke texture applied. And the large photo in the main area of the site also includes some texture. The brush stroke look can be created with the help of some Photoshop brushes that have been created from scanned brush strokes.

Marketplace

The Brand Bat

The Brand Bat uses a full-screen background photo with a heavy wood texture. As you scroll down the page you’ll come across some other textured photos as well.

The Brand Bat

Jam3

Jam3 uses an interesting design with some animated particles that give a textured look to the site. The particles move with your mouse around the screen, and the text even turns to particles when the mouse goes through it.

Jam3

96Elephants

The header of 96Elephants uses a dark textured background. On the right side of the site (not visible in the screenshot below) there is a form that also uses a texture background, this one being a light color.

96Elephants

Zombie Underworld

This design uses some texture on the background photo and also a splattered texture incorporated with text. You can’t have a zombie-related website without some texture.

Zombie Underworld

Postable

Postable uses a subtle gray pattern on the background of its design. Although it is subtle it does add a nice touch to the design. A similar texture could be easily created with the help of a repeating fabric pattern applied in Photoshop.

Postable

La Maquina Kryptos

La Maquina Kryptos uses some subtle texture applied to the background illustration, as well as texture applied to the text in the header of the site. Adding texture to text can be done in Photoshop with the help of either a brush or a textured photo.

La Maquina Kryptos

Blackhouse

The full-screen background photo used by Blackhouse adds a strong and dark texture to the site.

Blackhouse

Union Room

Union Room is an example that is unique from the others showcased here. The site uses a large background video, and a simple pixel pattern texture sits on top of the video and the header.

Union Room

SocialEngine

SocialEngine uses a dark textured background that is somewhere between subtle and strong. It’s not a major focal point of the design, but it is something that you notice immediately when visiting the site.

SocialEngine

Fitbay

The background photo of a wooden table adds plenty of texture to Fitbay’s website.

FitBay

Solo Pine

While most of the elements in the Solo Pine design include no texture, there is a large photo of some trees in fog that has a gritty feel.

Solo Pine

Revelation Concept

Revelation Concept uses a subtle background pattern to add texture to the design. This pattern is an important part of the design and the look can be replicated with the right Photoshop pattern.

Revelation Concept

Jarritos

Jarritos uses a heavy concrete or wall texture as the background of the site. This type of texture could be replicated in Photoshop pretty easily with the help of a nice concrete texture photo.

Jarritos

CIRQ

CIRQ uses a texture on the background of its website. Although it is a fairly subtle texture it still adds a nice touch to the design. Texture is also used on text in the graphics on the site.

CIRQ

Musician’s Corner

Musician’s Corner uses texture on the background of its site, as well as on the text and logo. The header uses a soft, but very noticeable gray texture.

Musician's Corner

YWAM Ozarks

The header of YWAM Ozarks uses a fabric textured background. There is also a brush stroke texture, which could have been created with a Photoshop brush, on the main image of the homepage.

YWAM Ozarks

Creative Arts Initiative

The background of the Creative Arts Initiative site uses a strong texture, which is one of the distinguishing features of the design. Other elements throughout the design also have texture applied.

Creative Arts Initiative

Cure.org

Cure.org uses a few different textures on the site. The header uses a subtle gray texture. The main area of the homepage uses a darker background with a halftone pattern and some other texture.

Cure.org

XGO

XGO uses a nice gray textured header. Other areas of the design also use a matching texture.

XGO

Which of these websites are your favorite examples? How do you use texture in your own designs? Feel free to leave your thoughts and feedback in the comments section.

Premier Texture Bundle:

If you’re looking for high-quality textures to use in your own designs, at Vandelay Premier we have a Premier Texture Bundle that includes 100 high-resolution textures. A variety of different types of textures are included, such as concrete, paper, grunge, wood, stone, etc. For readers of our blog we’ve set up a coupon code.  The regular price of the bundle is $19, but if you add it to your cart and enter the coupon code “readerssave” you will save $5. See more about the Premier Texture Bundle.

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

52 Responses

Comments are now closed on this post.

  • Andy @ FirstFound, March 7, 2011

    Spreadt is brilliant. I wouldn’t expect anyone to try a corrugated cardboard feel.

  • aledesign.it, March 7, 2011

    OMG! This is my preferite post! I like this kind of background. So fantastic. I wanna make some started from this examples… Effects on wall and sheet are my preferite! Thanks!

  • Great list …. Love the Cure International website

  • Anna, March 8, 2011

    http://www.geographicbags.com/ another texture website

  • Imran Khan, March 8, 2011

    That is just wonderful collection!!! Thanks for sharing =)

  • Tom Cash, March 8, 2011

    Colin Grist is awesome. Great list – thanks for sharing!

  • Chandni, March 8, 2011

    Love the use of textures on these websites. Definitely adds depth to the designs giving them a little more character.

    Colin Grist, CURE International, Gluckstuck, Corking Design and Musicians Corner would have to be my favourite textures used on these websites.

    Thanks for sharing.

  • Daniel, March 8, 2011

    So pumped to see YWAM on the list!

  • Web East Yorkshire, March 8, 2011

    Awesome collection, I always love the corrugated card textures as used on the Spreadt site and I really like how the texture is used on the cure site… Thanks for sharing.

  • WebDesignHighWycombe, March 8, 2011

    Some great examples here, much more appealing that a plain coloured texture free background!

  • Highflight Design, March 8, 2011

    There are some great uses of textures here, I will be using some of these for inspiration for upcoming sites I am developing.

  • Mark, March 9, 2011

    Great collection. I’m a huge fan of concrete textures.

  • alex@macenko.com, March 9, 2011

    Great! (Thanks)

  • Web Design Mauritius, March 9, 2011

    Great selection. Very inspiring. Thanks for sharing.

  • Ivy, March 9, 2011

    Love seeing CURE International and YWAM on this list!

  • Joel A Glovier, March 9, 2011

    Thanks for featuring our work in this post! It’s really an honor to be listed among so many incredible sites.

    Thanks!

    JAG
    CURE Web & Graphic designer

  • Peter Granfors, March 9, 2011

    Thanks for the mention. Great work listed.

    Personal favorite would be http://www.glueckstueck.com/
    This site inspired me on another project, great work on there.

  • Nottingham Web Design, March 10, 2011

    Amazing examples, bookmarked this for inspiration!

  • Liezel Go, March 10, 2011

    Great to see CURE International here! CURE International’s website is nice.

  • robb, March 10, 2011

    Inspired by these uses of texture. I like the rustic old paper look. Considering switching my sites background up.

  • jon, March 10, 2011

    great inspiring collection, thanks for sharing !

  • Altaf Rahman, March 11, 2011

    All sites are nice. my favorite would be http://www.pixle.pl/bord/

  • Tristar Web Design, March 11, 2011

    I love the ‘Bord’ website, the footer is great where they have chalked in the Twitter and Facebook link. The textures give a really quirky feel, I guess that’s why a lot of portfolio sites use them. Great for inspiration, i’ll be looking back.

  • Ricardo, March 11, 2011

    And another one:
    http://www.linkzoo.net
    Just refresh the page several times and you’ll see ;)

  • kendra, March 12, 2011

    This was a fun inspirational article :) I especially like the Bord site. I love chalk boards and we don’t really have them any more :)

  • jayce-o, March 13, 2011

    thanks for sharing, very inspiring and enriching!

  • Charlie, March 18, 2011

    Cool textures but they are usually hard for coding in html :(

    • Vandelay Website Design, March 18, 2011

      Hi Charlie,
      I’m not sure how they are hard for coding. It’s just like inserting any other background image with CSS.

  • Fig Tree Design Studio, March 20, 2011

    Really inspiring! Get’s the creative juices flowing again!

  • Web Design Houston, March 22, 2011

    Great collection, I like “Spreadt” and “Board” Thanks for the inspiration

  • Web Design Cambridgeshire, March 27, 2011

    Really great use of textures in all of these sites :) Thanks for sharing

  • Chris, April 5, 2011

    Always great to see other people’s work especially when it is as inspiring as these showcased here…Have to say though I like CURE International especially how they have integrated the social widgets in with the design of the site…I will be considering ways of doing this in future projects !

  • Web Design West Midlands, April 19, 2011

    Textures on websites are really taking off. I really like them and think they add a great definition and character to a site.

  • Sumit Khaneja, April 22, 2011

    Inspirational designs for website designer. I like ‘YWAM Ozarks’.

  • LKenneth, April 24, 2011

    Wow this is an excellent blog post! i want to learn how to use real textures

  • Alex, May 18, 2011

    awesome selections!!!

  • Website Design Hull, May 18, 2011

    I love the canvass effect it looks so real, acrylic on canvas is my favourite medium in the non digital world.

  • Riak, May 31, 2011

    Fantastic Blog Post the textures look amazing!

  • Toronto Web Developer, June 9, 2011

    Very incredible blog post. I love seeing these textures come to life.

  • Rongdhonu Graphics, June 21, 2011

    Nice & Very incredible blog…

  • Colin Grist, June 23, 2011

    Thanks for including my website in your awesome list!

  • Website Design Merseyside, July 13, 2011

    Greats thanks so much for sharing

  • Essex Wedding Photography, August 31, 2011

    Some excellent web sites here

  • Software Development, September 1, 2011

    Really like the romantic feel to the Peter Ganfers design.

  • deepak, September 9, 2011

    Brilliant! Brilliant! Brilliant! what a collection of the beautiful design’s thanks you. a neat collection love all the textures used :)

  • Huney, January 3, 2012

    Waoooooooo awesome inspiring collection..beautiful images….really very very good collection…
    thank you for sharing….

  • Yogi, June 26, 2012

    Nice! It gave me more ideas for my next projects. Thank you.

  • Mian, November 25, 2012

    Just the thing I was looking. Nice collection, hands down to vandelaydesign.

  • tu bep, June 7, 2013

    Too much for yours choice :D

  • phu kien tu bep, June 7, 2013

    very beautyful themes!! Thanks for yours share !!!

Close