Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Whys And The Hows Of Textures In Web Design

Texture is becoming integral to design. It’s gone beyond being a trend — it’s now a simple and effective way to add depth to a website. Wielding the power of texture is a great responsibility. It increases the effectiveness of websites and is a quality tool in the arsenal of designers. It can guide the user’s eye and emphasize the importance of key elements.

However, texture has long been synonymous with “dirty” or “grungy” design. Its overuse can be seen throughout the world of music group websites and has left a bad taste in the mouths of designers. Due to its frequent misuse, its benefits have long been overlooked. Texture can bring a website together, but should not be the main focus.

Textures vs. Patterns Link

Before we get into textures in depth, let’s distinguish between patterns and textures. These words are often used synonymously. Patterns are typically small, repeating, tileable elements, whereas textures tend to be much bigger images that don’t repeat. Imagine a Venn diagram, with textures on the left and patterns on the right, with a little overlap in the middle. So, some textures are also patterns. Several of the tileable texture packs found on Tileables141 are good examples.

The Function Of Textures Link

We love texture on the Web for a multitude of reasons. Design decisions shouldn’t be made simply on the basis of, “Oh, well. It looks good.” Design should serve a purpose, and each decision about texture should be made by weighing the pros and cons. Let’s start by going over some of the key benefits.

Grabbing Attention With a Call to Action Link

Texture can highlight elements such as titles, headings, icons and buttons. It draws the eye to calls to action and main headings. This is perhaps the clearest way that the trend towards textures is catching on.

When used minimally, texture separates the content from the rest of the website. It guides the user’s eye directly to the intended element. It can be a great way to separate key branding elements.

You can grab attention in different ways, but two common ways can be easily demonstrated with branding: a textured logo against a clean background, and a clean logo against a textured background.

The header from Poco People demonstrates use of a textured brand on a clean background.2
Notice how Poco People3’s grunge logo is accentuated against the clean background.

A demonstration of clean brand against a textured background.4
Cultural Solutions UK5’s branding is the opposite: a clean logo against a textured background.

Enhancing Information Architecture Link

Texture can be used to guide the eye. And like lines, boxes and contrast, it can be used to separate content into logical divisions. Using it effectively in conjunction with other methods is vital. The goal is not to abandon other methods of information architecture, but to enhance their effectiveness.

A Modern Eden’s website provides a good example of content separation by use of texture.
By setting off the sliding banner with a texture, A Modern Eden highlights the content within.

See how you can use textures without violating best practices? High contrast and legibility are evident and work in tandem with the texture.

This site perfectly divides content with textured elements.6
Sky’s Guide Service7 perfectly separates its content with textured elements.

Above, each element is individually textured for a particular purpose. Sky’s Guide Service divides the content into logical sections, and the user sees where they start and end. Texture enhances the information architecture by creating logical content areas that help the user process the information accurately.

Also, the texture perfectly suits the style and topic of the website. All of the elements are custom-tailored to fit a logical theme, thus enhancing the website’s overall message.

Building an Atmosphere and Bolstering Identity Link

More and more, clients want website designs that do more than display their content in a user-friendly way. They want websites that enhance their identity and enable users to identify with the brand. Texture can be used to achieve this in many ways.

Deda’s website builds a persona through use of textured personality8
While texture is plenteous on Deda9, it is gentle and never over-bearing.

Deidre “Deda” Bain does exactly this for her personal brand. Her use of texture helps to put a face — almost literally — to the service. Without the texture, the website would be rather bland and would lack the personality of its creator. With legibility and a proper information architecture, the design would still be nice, but that extra something would be missing.

Texture adds to the “intangibles” of Web design: that wow factor and sexiness of a memorable website.

Tips And General Advice Link

All of this is fine and dandy, but you’ll want to avoid common traps while refining certain techniques and modes of thought.

Maintain Legibility Link

Never (ever!) sacrifice legibility for texture. Many of us make this mistake, and will continue to for a while to come. Legibility on the Web is paramount in importance. If a user can’t even read the message, then what’s the point in composing it, let alone texturing it?

Avoid doing this to your type:

Sometimes, we take it a bit overboard. We just get excited about texture.
Sometimes, we go a bit overboard. This poster shows what happens when you get too excited about texture.

Don’t Beat a Dead Horse Link

In print, texture is hard to overdo — depending on the genre, of course. On the Web, however, texture can be extremely distracting when used in “bulk.”

Hinder’s Website
On Hinder’s website, legibility gets lost in the menu, and the texture is distracting. (And watch out for the auto-playing music.) Oops!

Practice Means Improvement Link

Experiment with your designs. Try new things. Apply textures in places where you wouldn’t normally put them. Use textures that you’ve never used before. You never know what you’ll discover until you try it.

If It Serves No Purpose, Take It Out Link

Refine your technique before using it on a client’s website. Always make sure that your use of texture is based on a sound plan, as would be the case with any website you create. If you can’t justify something that you’ve done as being an improvement, take it out.

There’s no point in overdoing texture. The entire purpose of the Web is to disseminate information. How can you accomplish this if your content is unreadable? Besides, subtlety and nuance are a better way to demonstrate mastery of a subject.

Consider the Effect You Are Trying to Achieve Link

As we know from experience, getting carried away with texture is all too easy. Keeping in mind the final effect you are trying to achieve is the best way to avoid this. If you want a subtle textured background, just do it and then move on to the next item on your list. Otherwise, you’ll never get it done.

Collect Resources So That You Don’t Have to Search Later Link

You can save a huge amount of time by downloading and archiving resources that seem useful to you. Keeping your files organized is a great back-up plan. Trust us: nothing is more frustrating than coming across the perfect brush pack and not being able to remember where you found it. Our list of brushes is long and diverse. We’ve been collecting the brushes over the years from websites such as deviantART3310 and Brusheezy11, from the freebie sections of various design blogs, and by making our own12.

Learn Masks Link

Learning to work with layer masks will save you a lot of time in the long run and will be a strong tool in your arsenal. Masks are also a fantastic way to non-destructively experiment with your designs. A lot of great tutorials are out there; a quick Google search led me to “Understanding Layer Masks in Photoshop13.”

Don’t Sacrifice Quality for Loading Time Link

There are plenty of interesting ways to keep textures from killing loading times. But don’t sacrifice the quality of the texture too much, because rather than appearing finished and professional, the website will look outdated right out of the gate. Repeating texture patterns are a good way to save on the loading times of backgrounds and larger elements.

Of course, we want to design with the Web’s inherent constraints in mind, but as Internet connection speeds rise globally, loading time shouldn’t be your primary concern. Nevertheless, use texture within reason: a website with a lot of textures will inevitably have a long loading time. A simple method to get around file size is to use repeating textures, especially for backgrounds. Tileables141 is a fantastic resource to get started. And we’re always learning about CSS Sprites15 and using Smush.it16 to further compress our files.

An example of texture quality differences
The difference in texture quality here is major. The texture on the left is compressed. The one on the right is, too, but not as much.

Choose Textures Logically Link

Lastly, and perhaps as important as maintaining legibility, choose textures that are logical for your design. If you’re building a website for a furniture store, then rusty textures wouldn’t make a whole lot of sense. Textures are meant to build identity, not to confuse the visitor, regardless of whether they look good. Usability should always take precedence.

Textures: A D.I.Y. Attitude Link

One of the many ways to get textures is to create them yourself. We are big proponents of this because it can save you time and give the exact result you’re looking for. And don’t worry: it’s not as difficult as it looks.

Snap Some Photos Link

The simplest method is to grab your trusty digital camera and snap shots of textures that are around you, especially ones that you’ve never considered to be “textures.” Unique textures can advance your style. For example, would you consider the top of a cake or bubbles in a sink as workable textures? They’re all around you.

An unusual example of a photo that can be used for texture17
This photo from Lost and Taken2118 demonstrates that a distinctive photograph can be used for a special-purpose texture.

If you look around yourself, you will see plenty of grunge: worn-down buildings, concrete walls, rusted metal, tree bark, weathered wood. These are all fantastic specimens. In fact, a decent point-and-shoot camera is enough to start. We started shooting our own textures with an old Nikon Coolpix 420019, which worked flawlessly.

When you shoot, you could use full auto mode. But don’t use flash, because it will “flatten” the image and remove most of the detail in the texture, especially in close-up shots. Let the camera do the work, and always take multiple shots of a texture to get the best possible result. You can always rely on post-processing in your favorite image editor.

Scanners Work, Too Link

Another great tool is the good ol’ flatbed scanner. Old paper, cardboard, mouse pads (shout out to Trent Walton20 for this idea), paper bags, skin — the list of what you can scan goes on. Scan at a very high resolution, 600 to 1200 DPI, so that the texture is of high quality and can be adapted to any project, including large print pieces. High-resolution scans also allow you to isolate particular spots in an image to use as a texture.

Once you’re comfortable with that, you can start creating elements using traditional art techniques. For example, apply a bit of charcoal to some beautiful heavy paper, which could be the finishing touch for that grunge background you’ve been after. What about acrylic paint splatters to add depth to your UI? Or coffee stains on paper? The possibilities are endless!

Icing on the Cake Link

You can always spice up the process by combining textures. Using the layer blending modes in Photoshop, you can combine various textures into one. Caleb of Lost and Taken2118 has posted an in-depth walkthrough of the process22 that he follows to create his packs.

Believe it or not, Photoshop’s somewhat gimmicky filters can also be used to create textures. Noise textures are a snap with the Noise filter. Playing with the values and levels of the filter, you can obtain results for a wide range of needs. There’s also the Texturize filter, although it’s rather gimmicky and rarely useful. Still, it could help you achieve part of the effect you’re going for.

Noise Filter - Before and After
A brief experiment with noise filters. Light noise is better, but make sure you can still see the effect.

Noise Filter Settings
If you want the texture to be seamless, then a uniform distribution is easier to work with. “Monochromatic” ensures that the texture has no color noise that could conflict with other colors in your design.

If you’re interested in learning the basic techniques of applying texture to elements, we’ve produced several videos to get you started. More advanced users may already know these techniques but might want to brush up on them anyway. Either way, we hope you find them useful.


A demonstration of using brushes, levels and layers to create texture.


A demonstration of using texture files, packs, levels and layers to create texture.


A combination of the two techniques above, with an overview of more advanced ideas.

Articles and Resources Link

Articles and Tutorials Link

Free Resources Link

Premium Resources Link

You might be interested in the following related posts here, on Smashing Magazine:

(al) (tg) (vf)

Footnotes Link

  1. 1 http://tileabl.es
  2. 2 http://www.pocopeople.com.au/
  3. 3 http://www.pocopeople.com.au/
  4. 4 http://culturalsolutions.co.uk/
  5. 5 http://culturalsolutions.co.uk/
  6. 6 http://www.skysguideservice.com/
  7. 7 http://www.skysguideservice.com/
  8. 8 http://deda.me/
  9. 9 http://deda.me/
  10. 10 http://browse.deviantart.com/resources/applications/psbrushes/
  11. 11 http://www.brusheezy.com/Brushes
  12. 12 http://www.bittbox.com/photoshop/how-to-make-a-photoshop-brush
  13. 13 http://www.photoshopessentials.com/basics/layers/layer-masks/
  14. 14 http://tileabl.es
  15. 15 https://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  16. 16 http://www.smushit.com/ysmush.it/
  17. 17 http://lostandtaken.com
  18. 18 http://lostandtaken.com
  19. 19 http://www.amazon.com/Nikon-Coolpix-Digital-Camera-Optical/dp/B0002805TQ
  20. 20 http://methodandcraft.com/authors/trent-walton
  21. 21 http://lostandtaken.com
  22. 22 http://lostandtaken.com/blog/2011/2/15/how-to-create-subtle-grunge-textures.html
  23. 23 http://methodandcraft.com/videos/adding-texture-in-photoshop/
  24. 24 http://methodandcraft.com/videos/creating-tileable-textures/
  25. 25 http://methodandcraft.com/videos/vintage-effects-within-illustrator/
  26. 26 http://www.gomediazine.com/tutorials/design-a-vintage-poster-with-vector-pack-16/
  27. 27 http://www.gomediazine.com/tutorials/design-a-vintage-poster-part-ii/
  28. 28 https://www.smashingmagazine.com/2008/05/27/smashing-texture-contest-results/
  29. 29 http://lostandtaken.com/
  30. 30 http://subtlepatterns.com/
  31. 31 http://ftg.projectdd.jp/
  32. 32 http://valleysinthevinyl.com/
  33. 33 http://browse.deviantart.com/resources/applications/psbrushes/
  34. 34 http://www.flickr.com/search/?q=texture&l=commderiv&ct=6&mt=all&adv=1
  35. 35 http://tileabl.es/
  36. 36 http://arsenal.gomedia.us/
  37. 37 http://wegraphics.net
  38. 38 http://graphicriver.net/
  39. 39 http://vandelaypremier.com/
  40. 40 http://zentextures.com/
  41. 41 http://www.naomiatkinsonproducts.com/product/pixel-patterns-full-set
  42. 42 https://www.smashingmagazine.com/2008/05/27/smashing-texture-contest-results/
  43. 43 https://www.smashingmagazine.com/2009/02/06/100-beautiful-free-textures/
SmashingConf Barcelona 2016

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 Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

Jon Savage and Simon Birky Hartmann are design professionals, collaboratively running a curious design studio named Studio Ace of Spade. Both having graduated from Goshen College, their skills cover four areas: Computer Science, Design, Business Information Systems, and Business. With backgrounds in project management, video games, and craft beers, they are building quite the interesting design business. Check out their work on Flickr, Dribbble, Behance, and Twitter.

  1. 1

    Vidal Quevedo

    October 3, 2011 6:30 am

    Awesome! Love this post (especially now that I’m looking for textures for new site design).

    Thanks!

    1
  2. 2

    Thanks for the kind words and love people. We had a blast writing this. If you have examples, counter examples or other things to share, feel free to keep the discussion going.

    0
  3. 3

    Judging from the examples, it almost always seems like the “right” way to do texture is to make it very subtle, (i.e. low opacity and lots of masking)…kind of a like a new haircut — make it seem like there’s something “different” about the content without people being able to tell what it is at first.

    2
  4. 4

    Good analogy Matt!

    0
  5. 5

    Philip Wallage

    October 3, 2011 9:28 am

    Great article! A lot of nice and valid guidelines. Keep up the good work!

    0
  6. 6

    I love that you guys are incorporating videos into posts! While the idea won’t serve every type of article Smashing has, a few of these incorporated every once in a while is a nice touch.

    But please, don’t let Smashing become another “Tutorial” website; too many of those already.

    Great post!

    1
  7. 7

    Not a Cat Arts

    October 3, 2011 10:21 am

    Good examples.

    0
  8. 8

    Great post Simon & Jon!

    0
  9. 9

    Great examples to learn from!

    0
  10. 10

    Ramon / Dobrado

    October 3, 2011 6:41 am

    Great post! Thanks for the insights, and the tips on saving and organizing resources are great!

    5
  11. 12

    This really is a fantastic walk through for new designers or even the experienced designer that needs a textural refresher course! Making your own textures by snapping photos is always fun (and original).

    Music auto-play on Hinder’s site? Not good lol. Auto play anything is not good. Give the user the right to choose.

    If I could add a site to the list (one that we designed) check out http://www.zavida.com/ our creative team did a fantastic job playing with texture. Very organic :)

    Great article – thanks guys!

    2
  12. 16

    Great article and very accurate information. I provide stellar high resolution textures every week for you designers out there, you won’t be disappointed.

    http://allur.co/category/blog/textures/

    2
    • 17

      And just in case, because some readers may not see the first one…. boom! another spam!

      -10
      • 18

        It’s not really spam, it’s pretty relevant and Smashing makes money from you people reading their long lists of texture sources. Why is it so heinous if someone plugs one in the comments?

        3
      • 19

        @ James – Thanks, at least someone gets it. :)

        0
    • 20

      If this is spam, keep it coming. Amazing collection of HQ textures there. Nice one Jeff!

      5
  13. 21

    Very informative that we can get a lot of things. I’d like to apply this things to apply this in my design with the upcoming site that I will make.

    0
  14. 22

    Great article and avery accurate information

    0
  15. 23

    Nice article, great tips..

    0
  16. 24

    Great! Thanks for this article

    -1
  17. 25

    You’re looking at this from a design point of view, let’s not forget that textures can be a pain in the a*se to actually build too and can cause accessibility issues if you start restricting the behaviour of a page as it’s displayed in a browser because you don’t want the design to fall apart.

    My favourite? Drop shadows on a textured page background, always good fun.

    -3
  18. 26

    Nice Info

    -1
  19. 27

    Hari shankar thakur

    October 4, 2011 1:11 am

    WordPress is the Powerful CMS

    -4
  20. 28

    I don’t trust any Photoshop tutorial that takes place on Windows…

    -8

↑ Back to top