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 Link
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 Link
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.
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.
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.
2The 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.
Grace Church of Alexandria
3While 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.
4Jason 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.
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.
Here’s Life Mission Africa
6The 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.
9Design 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.
10Creative 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.
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.
12The 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.
13The 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.
17Moustache 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.
Textured Headers Link
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.
18The 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.
19Slabovia.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.
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.
20The 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.
21The 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.
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.
Sidebar Texture Link
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.
26Rob 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.
27Branded07 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.
28Like 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.
Textured Navigation Menus Link
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.
29Matt 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.
30Von 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.
31The 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.
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.
33The 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.
The Ernest Hemingway Collection
34The 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.
Subtle Use of Texture Link
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.
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.
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.
College Park Church
35The 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.
36Rather 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.
37The 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.
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.
Different Ways to Add Texture to a Design Link
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 Link
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 image39.
If you’re looking for free textures to use in your own work, some of the best resources are:
- Smashing Magazine40 (13 big, free collections)
- Texture King42
- Grunge Textures
- Dr. Web Textures43
- Urban Dirty44
- Free 3ds Textures45
- CG Textures46
- Lost and Taken47
2. Create your own texture from scratch in Photoshop Link
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:
3. Use Photoshop brushes Link
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:
- 500+ Photoshop Brushes for Creating Textures50
- 300+ Vintage Style Textures and Photoshop Brushes51
- Watercolor Roundup: 200+ Beautiful Brushes and Textures52
- 200+ Free Grunge Photoshop Brushes53
4. Use ready-made textures Link
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 iStockphoto54, Stockxpert55, and Vector Stock56. 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 Link
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 Photoshop57.
- 1 http://www.edit-studios.com/
- 2 http://www.goodbytes.be/index.php/blog/
- 3 http://www.graceofalexandria.org/
- 4 http://www.jasonbradbury.com/
- 5 http://www.doejo.com/
- 6 http://www.hereslifeafrica.com/
- 7 http://www.subdued.net/
- 8 http://www.cotr.tv/
- 9 http://www.designcommission.com/
- 10 http://www.creativenights.com/
- 11 http://www.carbonica.org/
- 12 http://www.sollievo.org/
- 13 http://www.garethdickey.com/
- 14 http://www.brightcreative.com/
- 15 http://www.nkmip.com/
- 16 http://designreviver.com/
- 17 http://www.moustacheme.com/
- 18 http://www.acceptancerock.com/
- 19 http://www.slabovia.tv/
- 20 http://electricpulp.com/
- 21 http://www.rocketclub.info/
- 22 http://www.wanderinggoat.com/
- 23 http://www.themaninthesea.com/
- 24 http://www.thuiven.com/
- 25 http://www.arcinspirations.com/napa/index.php
- 26 http://robgoodlatte.com/
- 27 http://www.branded07.com/
- 28 http://www.adventuretrekking.com/
- 29 http://www.mattdempsey.com/
- 30 http://www.vondutch.com/
- 31 http://www.skialpine.com/
- 32 http://www.bluemoonduelingpianobar.com/
- 33 http://www.helmy-bern.cz/
- 34 http://www.ernesthemingwaycollection.com/
- 35 http://www.yourchurch.com/
- 36 http://www.drewdellinger.org/
- 37 http://www.squarespace.com/
- 38 http://www.atendesigngroup.com/
- 39 http://www.tutorial9.net/photoshop/add-visual-texture-3-easy-steps/
- 40 https://www.smashingmagazine.com/2008/05/27/smashing-texture-contest-results/
- 41 http://www.sxc.hu/index.html
- 42 http://www.textureking.com/
- 43 http://www.drweb.de/magazin/tag/Textures/
- 44 http://urbandirty.com/
- 45 http://free3dstextures.com/
- 46 http://cgtextures.com/
- 47 http://www.lostandtaken.com/
- 48 http://psdtuts.com/tutorials/interface-tutorials/photoshop-paper-texture-from-scratch-then-create-a-grungy-web-design-with-it/
- 49 http://psdtuts.com/tutorials-effects/the-ultimate-wood-texture-tutorial/
- 50 http://designm.ag/resources/photoshop-texture-brushes/
- 51 http://designreviver.com/freebies/300-vintage-style-textures-and-photoshop-brushes/
- 52 http://designreviver.com/freebies/watercolor-roundup-200-beautiful-brushes-and-textures/
- 53 http://www.youthedesigner.com/2008/07/28/200-free-grunge-photoshop-brushes/
- 54 http://istockphoto.com/index.php
- 55 http://stockxpert.com/
- 56 http://www.vectorstock.com/
- 57 http://www.bittbox.com/photoshop/photoshop-how-to-make-an-awesome-grungy-paper-texture-from-scratch/
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.