Textures In Modern Web Design

Advertisement

If you look around at well-designed websites in CSS galleries or any other source of design inspiration, you’ll see that texture is extremely common in modern Web design. One of the reasons it’s so popular is because of its versatility. Textures can be used in countless different ways and in a wide variety of design styles. As you look around, you’ll see how textures can be used in so many different ways by Web designers.

Textures in Web design can be very subtle, so that the visitor hardly notices, or they can be a focal point of the design. In some cases, textures are used to emphasize certain parts of the design. Because of the versatility of textures, they can be used in combination with many other design elements, such as typography, lighting and colors.

When examining exemplary Web designs that employ textures, you’ll notice that textures are used in background images, headers, footers, sidebars, content areas and even fonts. Although texture is sometimes associated with a grunge style of design, its reach extends far beyond just grungy websites. Texture adds dimension to virtually any style of design, if applied properly. In this post, we’ll look at 50 examples of websites that use textures in different ways.

One of the reasons texture is so useful to designers and so popular is because adding it to a design can be quick and easy with a program like Photoshop. Later in this article, we’ll look at some of the different techniques you can use to apply texture to your own work.

Gallery: Texture in Modern Web Design

Now, we’ll take a look at 50 websites in which texture has been applied to the design to improve it in some way. The websites are categorized according to how the texture is used. Many of the examples could fit more than one section, but they’re categorized like this to show their diversity and to point out specific elements of the design.

Textured Backgrounds

When it comes to textures in modern Web design, background images are probably the most common area of use. As you’ll see in the examples below, a textured background image can easily be a significant feature in a design. There are countless options for using textures in this way, and many designers are using creativity here to create stunning results.

Edit Studios
Many designers and studios use a dark background for portfolio websites, but Edit Studios gives its background some variety with a textured look. The main content area has a few cracks in the background, and the rest of the design and background has a grungy style that’s not overwhelming on the dark background.

Edit Studios

Jobs on the Wall
Web Designer Wall is well known for its colorful and artistic background. The job board on WDW features a similarly creative but less colorful background with a textured approach. The texture of the background resembles a cork board. You’ll see some design elements such as staples that help complete the bulletin-board look.

Jobs on the Wall

GoodBytes
The background image of GoodBytes includes different shades of purple overlapping each other, and a subtly highlighted area for the logo. The result of these effects is a textured background that gives the website a much different feel than it would have with a solid single-color background.

Good Bytes

Grace Church of Alexandria
While it’s common to see wood backgrounds used for a textured look, brick backgrounds are a little less common. The main content area of the Grace Church website is very clean, but it sits on a textured brick background.

Grace Church

Jason Bradbury
Jason Bradbury’s website contains multiple different backgrounds that appear randomly, most of which use some sort of textured look. The screenshot below shows one of those images, a grungy British flag. The texture gives the flag a completely different feel than it would have otherwise.

Jason Bradbury

Doejo
The Doejo portfolio website features a nice clean layout. The entire website, except for the footer, has a slight texture, giving it a different feel.

Doejo

Design Sponge
The main content area of Design Sponge is rather narrow, which exposes more of the textured background. The image has a canvas-like feel in a neutral color.

Design Sponge

Here’s Life Mission Africa
The content area of Here’s Life Mission Africa has a slight texture that may not even be noticed at first next to the dark background. But at the bottom of that textured area is a torn edge that dramatizes the texture.

Here's Life

Bart-Jan Verhoef
Bart-Jan Verhoef uses a textured background that gives the website an old-paper look. In addition to the background, the text logo/website title also has a grungy, textured effect.

Bart-Jan Verhoef

Church on the Rock
Almost the entire website of Church on the Rock has a textured effect. Some wood is used in the header image, and below that is the textured image shown in this screenshot.

Church on the Rock

Design Commission
Design Commission is another website that uses a very clean content area with a textured background. The background of Design Commission also includes a slight red color on the left side to give it some variety.

Design Commission

Creative Nights
Creative Nights has a blue content area and a dark blue background with a textured effect at the top. Lighting is used to spotlight the content area and darken the rest of the background.

Creative Nights

Fall for Tennessee
All of the websites in the Tennessee vacation series are very well designed. The Fall website features a textured, fall-colored background.

Fall TN

Carbonica
Carbonica uses neutral-colored textures throughout the design of its website. Headlines, icons and the navigation menu in the sidebar also used textured fonts.

Carbonica

Sollievo
The brown background for Sollievo has a subtle texture that wouldn’t stand out on its own, but combined with the torn-paper effect of the main content area, the website is left with a more substantial textured feel.

Sollievo

Gareth Dickey
The header and background of Gareth Dickey’s website include an illustration. The texture used in the illustration is subtle, but it gives a different look than the website would have otherwise.

Gareth Dickey

Bright Creative
Bright Creative, the studio of Dave Shea, uses textures throughout its design. The header is a textured dark red, and the body is a textured neutral color.

Bright Creative

NK’MIP Resort
The website of NK’MIP Resort has a grungy feel, with a dark textured background and a lighter textured content area.

NK'MIP

Design Reviver
The dark textured background of Design Reviver eventually fades into a solid background lower on the page. The white header also includes a slight texture in some areas.

Design Reviver

Moustache Me
Moustache Me uses a dark textured background that’s similar to the lighter cork-board effect used at Jobs on the Wall. Images of tape and push pins are used to complete the cork-board look.

Moustache Me

Textured Headers

Many websites use header images as a major part of the design and to stand out from other websites. With a large space usually reserved for images, these areas have plenty of potential for dramatic textures. As you look around at well-designed websites, you’ll no doubt find many examples of textures being used in headers. The examples below show just some of the possibilities.

Acceptance
The Acceptance header uses blue and black with a textured effect in the background, especially on the sides where the colors are darker. The navigation menu also has a similar texture on hover.

Acceptance

Slabovia.tv
Slabovia.tv has a wood background to give the website some texture, but it also uses a textured header. There’s a coffee mug ring behind the header in one spot, and the website’s tagline appears as a handwritten font on a piece of tape in the header.

Slabovia

Sienna Online
The content area of Sienna Online has a dark black background, but the header adds plenty of texture. The header image has an old-paper look.

Siena Online

Electric Pulp
The light-colored background of Electric Pulp has a slight texture to it, but the one big spot that begins in the header stands out much more. The logo/branding area also includes some texture.

Electric Pulp

Rocket Club
The background image of Rocket Club includes a dramatic header texture that significantly changes the look of the website. The texture can also be seen through the somewhat transparent picture of the band.

Rocket Club

Wandering Goat Coffee Company
The header of Wandering Goat Coffee Company has a canvas image to give it a striking texture. The logo itself that sits in the header is also textured.

Wandering Goat Coffee Company

TheManInTheSea
The background image of TheManInTheSea gives texture to the header and to the sides outside of the content area, but it fades to white for readability of the content.

TheManInTheSea

The Resume Girl
The website of The Resume Girl includes a few different textures in the header. The white area has a paper texture, while the navigation menu has its own texture with a torn edge. The green starburst area also includes a texture.

The Resume Girl

Thuiven
The Thuiven portfolio website uses a clean design that includes very little texture outside of the header. The header includes some multi-colored stripes on a neutral background.

Thuiven

Sidebar Texture

While background images are often used to create columns for sidebars, textures in these images are not nearly as common as they are on full background images. The websites shown below all make interesting use of textures in their sidebars. A few different approaches are represented.

Napa Bar and Kitchen
The Napa Bar and Kitchen website doesn’t include a lot of textures. The texture in the dark sidebar isn’t overpowering, but it’s a nice addition to the design.

Napa Bar and Kitchen

Rob Goodlatte
Rob Goodlatte’s website has textures all over the place, but the sidebar stands out a bit because it’s not as common a way of using textures. Sidebar design is often very basic and not a lot of thought goes into it, but Rob’s sidebar draws more attention because of the look.

Rob Goodlatte

Branded07
Branded07 uses a dark-blue sidebar to contrast the light background color of the content area. This dark blue includes a slight texture. The same dark-blue texture is also used in the website’s header.

Branded07

Adventure Trekking
Like the Branded07 design, Adventure Trekking’s website does not use textures everywhere, just in a few select places. The sidebar has a textured paper look with a torn and folded edge at the top. Next to a light and untextured content area, the sidebar stands out a little more.

Adventure Trekking

Textured Navigation Menus

Navigation menus can be one of the most visually interesting parts of a website. Textures, of course, can be used in background images of menus to create a different and very attractive look. You’ll see several different approaches here, all using texture to improve a standard navigation menu in one way or another.

Matt Dempsey
Matt Dempsey’s portfolio website uses a background of orange brushstrokes. The textured strokes are also integrated in the navigation menu of the website, and they have a lighter-colored brushstroke on hover.

Matt Dempsey

Von Dutch
Von Dutch features an artistic textured design for the entire website. The main navigation menu is interesting because of the textured background images that are used. Each link has a slightly different image.

Von Dutch

Alpine Meadows
The Alpine Meadows website includes a few different textures, but the navigation menu is perhaps the most interesting. The texture and the frayed effect make it a focal point of the design.

Alpine Meadows

Blue Moon
The brick background of Blue Moon obviously gives the website plenty of texture, but the navigation menu also has a rusty texture in the background as well as in the font.

Blue Moon

Astuteo
The Astuteo portfolio website is another example of a clean design that uses texture in a specific area for impact. The header, which includes the main navigation menu, has a textured look that does a good job of contrasting the clean white background of the website.

Astuteo

Helmy Bern
The header area and navigation menu of Helmy Bern are extremely textured, with the torn-cardboard look at the top of the menu drawing the most attention. Additionally, the sidebar has a similar texture.

Helmy Bern

The Ernest Hemingway Collection
The Ernest Hemingway Collection uses a desktop environment as a background, with the main content area sitting on top of the desk. The navigation is a textured dark brown with a leathery feel.

The Ernest Hemingway Collection

Subtle Use of Texture

Some of the most interesting uses of texture are those that don’t jump out and grab you. Some designers are able to use textures in subtle ways that improve the overall look without being overpowering. The examples below show attention to detail in design that gets great results.

Henry Jones
The portfolio website of Henry Jones makes use of textures but in a rather subtle way. The border that surrounds the header and navigation area has a few very small spots where some texture is applied. The gray bottom border of the logo/branding area does the same thing. While these design elements don’t stand out in the first few seconds of a visitor’s time on the website, they provide detail that helps create a complete look.

Henry Jones

Denver Seminary
Rather than having a solid-blue background behind the logo, Denver Seminary’s website includes a soft texture in another shade of blue. The texture adds some visual interest to the header and the logo.

Denver Seminary

College Park Church
The website of College Park Church uses several different textures throughout the website that work together to create a complete look. The header includes some subtle textures in the background of the green bar, as well as directly below the bar where it meets the branding area. The texture may not even be noticed at first, but it gives the header a look that fits the rest of the design, which includes some textures below.

College Park Church

Drew Dellinger
Rather than just having a solid black background, Drew Dellinger adds a slight texture to his website’s background. As with the other examples in this section, no one dramatic design element is present that grabs the attention of visitors, but the website is an excellent example of how texture can be used to subtly enhance a design.

Drew Dellinger

Squarespace
The approach of Squarespace is very similar to that of Drew Dellinger. The dark background is given a slight texture, which gives the website a different feel. At Squarespace the texture fades into a solid background color as you scroll down the page.

Squarespace

Inca Un Calator
The design of Inca Un Calator is broken up vertically into a few different sections. Each section has a slightly different color and texture combination. The textures and the change from one section to the next are not drastic but really enhance the look of the website.

Inca Un Calator

Aten Design Group
Aten Design Group, like many other portfolio websites, uses a dark background. However, the background is slightly changed by use of a subtle texture.

Aten Design Group

Different Ways to Add Texture to a Design

Applying a texture to a design can be accomplished in a number of different ways. It’s possible to create very similar end results using different approaches if you’re comfortable and experienced with Photoshop. Here are a few of the most common techniques for creating a textured website.

1. Use a free stock image to create your own texture

One of the quickest and easiest ways to add texture to just about anything you create in Photoshop is to use a simple stock image and some layer effects. Fortunately, there is no shortage of high-quality free textures, and there are even some premium options if you’re willing to spend a little money. David Leggett of Tutorial9 has a nice tutorial that shows how you can quickly add texture with a stock image.

Add Texture in Photoshop

If you’re looking for free textures to use in your own work, some of the best resources are:

2. Create your own texture from scratch in Photoshop

Instead of using an image to create texture, you can get a very similar effect by creating one from scratch with no images. If you know a few techniques in Photoshop, creating textures is not that difficult or time-consuming, and it may give you more control than using a found stock image.

There are a number of Photoshop tutorials that teach different techniques for creating textures. Here are a few good ones:

Photoshop Paper Texture from Scratch then Create a Grungy Web Design with It

Creating Paper Texture

The Ultimate Wood Tutorial

Create Wood

3. Use Photoshop brushes

Photoshop brushes can be another quick and easy alternative to creating your own effects from scratch, and there are plenty of free brushes to choose from. Brushes are great for adding grunge effects to a design, getting texture from brushstrokes and working with just about any other type of texture. Free brushes exist for just about any type of texture you can imagine; it’s just a matter of finding the right one. The ease of using free brushes makes it possible to experiment with all kinds of different approaches if you want to see what works best. Here are some resources to help with that:

4. Use ready-made textures

Rather than finding stock textures that can be used with your own work, you could buy some textured images to use as a background with little or no adjustment. Many designers sell their work on stock websites such as iStockphoto, Stockxpert, and Vector Stock. Finding the right image for your work is not always easy, but if you find it, the price is pretty minimal for the amount of time you save.

5. Scan Textures

The scanning technique is similar to creating your own image in Photoshop from scratch, and it’s also similar to working with free stock textures. Essentially, you scan something, like a piece of textured paper, and then make adjustments to it in Photoshop. If you’re interested in this approach, Bittbox has an excellent tutorial on scanning paper and working with the texture in Photoshop.

Paper Texture

(al)

↑ Back to top

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

  1. 1

    looks like smashing magazine is going to thebestedesigns.com

    0
  2. 2

    That’s so great ,, Thanks for sharing , Best luck Smashing Magazine
    Luv your works
    Keep it UP and Heavy

    1
  3. 3

    http://darkmotion.com has a sweet water colour header!

    0
  4. 4

    Great roundup. I need to inspire :)

    1
  5. 5

    What a great collection, and all in one place! Nick La’s Web Designer Wall is one of my personal favourites. Thanks for pulling it all together! :)

    -1
  6. 6

    Imagium Web Design

    January 7, 2009 8:37 pm

    A really great post once again by Vandelay and Smashing Magazine.

    The present web design trend parallels the T-shirt printing industry’s time line. Many years back, shirt printing inks and designs consisted of all flat colors with some gradients and now it’s all about textures, all over prints, over the seams, specialty inks and distressed images.

    0
  7. 7

    thanks for the plug on my site (themaninthesea)! you guys made my night!

    0
  8. 8

    Wow! Three of my designs in this article. That’s gotta be some kind of record…right? :)

    Nice post Steven.

    1
  9. 9

    Thanks for the mention of Grace Church of Alexandria! It’s a great honor to be listed alongside the rest of these awesome designs!

    0
  10. 10

    Thanks for the Design Commission mention. We’re big fans of Smashing Mag!

    1
  11. 11

    Great design inspiration..
    I love this blog so much..
    Thanks for sharing..

    0
  12. 12

    Very nice! Tnx

    0
  13. 13

    Graphic Design Company India

    January 7, 2009 10:48 pm

    I have learnt so much from your post. You have described each and every point separately and descriptively. You are absolutely right that textures gives more realistic lok to the images if added.

    0
  14. 14

    Great post. A lot of detail and a great showcase for inspiration.

    0
  15. 15

    Awesome, love textures but I am still bit stupid in using them!

    Great post as usual.

    0
  16. 16

    Excellent showcase! Can’t help but notice many are looking a lot like others and too much “inspiration” is taking place sometimes (then again, they might simply be following trends).

    0
  17. 17

    I like the textures on restraint quite a lot.

    0
  18. 18

    onlinedruckereien.info

    January 8, 2009 12:42 am

    you guys put a lot of work in your posts. it’s much appreciated! really nice collection! – http://www.onlinedruckereien.info

    0
  19. 19

    Great post : an illustrative showcase + some clear explanations on how to realize such a design. Want more of this on Smashing and less ‘Tribute to … with 100 excellent …’. It is with articles like this one that we learn how to make good designs.

    0
  20. 20

    Thanks for the Urban Dirty link :-)

    0
  21. 21

    collection of a pure beauty, good work!

    0
  22. 22

    This is a particularly impressive post! Most sites that cover texture either just have a gallery or resources. The way you’ve shown us great examples, explained why they work and shown us how to achieve the same effect is awesome.

    Textures can really make a web design.

    0
  23. 23

    This is a really good one. Congrats and many thanks !

    0
  24. 24

    A nice collection of really inspiring design. Nothing groundbreaking, but still some designs on the list are truly great. Thanks!

    0
  25. 25

    a modern webdesign with a nice texture: http://www.farbwolke.de

    0
  26. 26

    Henry,
    I considered removing one of the sites when I realized there were three of yours being featured, but I didn’t really see the point since they’re all excellent examples. Great work!

    0
  27. 27

    Awesome roundup!

    Here’s another to add to the mix Link [swervedesign.com]

    0
  28. 28

    Great list, lots of inspiration here! Thanks

    0
  29. 29

    Awesome article. Thanx again.

    0
  30. 30

    At last, more webdesign and less wallpapers! Now we need some moar web-related stuff like a guide to SVG and XML.

    0
  31. 31

    http://www.doejo.com has an updated version now too! √ it out :)

    0
  32. 32

    Nice collection, thanks. All a little too busy for me. Resume girl and College park church made the best first visual impression to me.

    0
  33. 33

    Steven,

    I’m glad you didn’t remove any :)

    0
  34. 34

    Just what I was looking for! Very inspirational

    0
  35. 35

    You should include http://www.bamboojuice.co.uk – simple use of a hessian bag texture but the results are really pleasing to the eye.

    0
  36. 36

    textured backgrounds are great! They really add some phenomenal detail and sense of professionalism to any web page. We’ve gotten to a point now where even an average person with little internet experience can tell the difference between a poorly created website and one that is professional. These backgrounds bring out that professionalism. Very nice. They all look great.

    0
  37. 37

    Wow! Nice collection! This will motivate me to apply texture on my next template. Thank you.

    0
  38. 38

    http://www.justinhofstein.com – This is my personal web site. I had lots of inspiration from many of the sites listed here when I was designing my site.

    I want to extend the texture all the way down the page. Now that I have seen some of these other sites, I think it would add more feel than to have it fade out as you go down.

    Great list! Thank you!

    0
  39. 39

    I agree with “THEODIN” > Great list, very inspirational! Thanks!!!!

    0
  40. 40

    I’m feeling uncomfortable using a 150K background

    0
  41. 41

    Amazing list. Inspirational.

    0
  42. 42

    Great Post. Thank`s

    Greets from Berlin

    0
  43. 43

    Just take a picture of something, add it as a layer, set to overlay and, viola, you have a texture… Now, why didn’t I think of that??

    Thanks for another great article Smashing!

    0
  44. 44

    Thank god for high speed internet, amiright? Seriously, though, pretty sweet stuff here.

    0
  45. 45

    Wooow…the Links on this entry are great. I found a lot of Information. Thank you Smashing Guys.

    0
  46. 46

    “asfsaf….” ah i love informed and creative comments lol
    great round up, some nice work there. there are also lots of textures and backgrounds at creativity103.com
    enjoy.

    0
  47. 47

    Oh! Great work! Thanks for your research! It was great to read it! Kepp going! Have a nice work!!

    0
  48. 48

    Nice to be included in such a list of notable websites. Keep up the good work.

    0
  49. 49

    Holy sh*t! I went to University with Gareth Dickey! (The same design course – Interactive Multimedia Design @ University of Ulster, Jordanstown, no less!).

    The guy was good then…but now…i’m simply in awe!

    0
  50. 50

    Wow I will definitely use texture in my web design next time,

    Thanks
    Omair Rais
    http://www.omairarts.com

    0
  51. 51
  52. 52

    Great post. Loved the examples followed by tutorials.

    0
  53. 53

    Our studio is working on an event networking site for the LGBTQ community. Texture heavy.

    Will
    Firebelly Design

    0
  54. 54

    Great list. We are honoured to be included as well! Thanks and keep those articles rolling in 2009.

    0
  55. 55

    Thanks, great collection and good article!

    0
  56. 56

    What’s with all the churches?

    0
  57. 57

    Looks like smeone (author) stold idea from designwar.

    0
  58. 58

    this post reminds me my website: http://www.marcosxotoko.com
    it has a background vector textures :}

    0
  59. 59

    brianwilkins.net I love the use of texture in the header on this site!

    0
  60. 60

    very good,welcome to our website:www.zhongt.net,www.1dushi.com

    0
  61. 61

    great list…!

    0
  62. 62

    Great post!
    Very interesting. I found many of those examples unclear to read, have lots of distractions around the actions and navigation, and generally focused on pretty rather than useful.
    But I guess we all have different priorities :)

    0
  63. 63

    I’m working on a new web design with lots of inspiration from the sites listed here.

    I look forward to posting it here when it’s live.

    Justin – http://www.justinhofstein.com

    0
  64. 64

    eurhfsdfoueretrys

    0
  65. 65

    Cool!!!!!!

    0
  66. 66

    thanx

    0
  67. 67

    sweet texture, i’d love to use some of them on some blogs I’m planning to do

    Craig Miller
    web design

    0
  68. 68

    I like those wall textures as a background of the page also enhance the side border of the main area, maybe will try to use it on my site Wonder Art

    0
  69. 69

    Excellent & informative!

    0
  70. 70

    Free textures also here: http://textures.creatiif.net (no membership required).

    0
  71. 71

    Very informative articles. I would definitely implements the suggestion on our site.

    Thanks once again,
    Ming Lamar

    0
  72. 72

    This is one of the most useful articles I’ve read on this site to date. I’d say that textured designs coupled with discreet use of lighting effects characterize many of the nicer looking sites being made these days. I really appreciate having the examples of ways to achieve the effect discussed in the article after having seen some solid examples. It is because of that helpful advice and the useful links that accompany it that I’ll be favoriting this article.

    Thank you! I believe this is a very valuable contribution to the web design community!

    0
  73. 73

    http://www.web30textures.com has many great hdr background textures as well

    0
  74. 74

    Really nice roundup of textures! I’ve actually been collecting textures while studying abroad in Italy this past year for this very reason. They can really make a design stand out. If anyone is interested, you can download them free here and use in your future designs! http://www.coryetzkorn.com/textures-of-italy/

    0
  75. 75

    With the speed of the average user’s internet drastically increased since web design ‘got popular’ we are in a position to use great backgrounds more and more online, some of which can be seen in your great article. I love modern web design and enjoyed this article, thank you.

    1
  76. 76

    Great overview. Thanks.

    0
  77. 77

    Great list of resources. But it’s now 2012. Any chance of revisiting this topic?

    0
  78. 78

    Great list, yeah I agree with rick, isnt their a chance of a 2012 review, looking for a few better ones in dark blue for my new business website which offers Seo services :)

    0

↑ Back to top