Using Texture To Improve Design
Texture is an often overlooked aspect of design that can add depth and character to a site. If you have never considered using texture on your site, here are some pointers to get your started.
Using Texture to Add Depth
One of the good things about texture is it adds depth to a design. You can see a simple example of this by looking at both the textured and non-textured versions of a single illustration side by side.
Texture can be used to add depth to a website in the same way it adds depth to an illustration. One of the simplest things you can do to polish up a site design is to try adding simple textures to different design elements. If done well, you should immediately see aspects of the design begin to jump off the page.
Directing Attention with Texture
Texture can be strategically used to draw attention to certain areas of your website. Because well-used texture tends to make design elements “pop,” the directed use of texture can pull site users towards specific pieces of your site. However, this does not mean you should add texture just to the important buttons or banners on your site. Rather, when considering which elements to texture, identify which pieces might be the most important. Unfortunately, there is no perfect formula for correctly using texture on a site. My suggestion is to carefully consider how texture might affect both the important and less important elements of a site while still viewing the design as a whole.
Specific Uses for Texture
Perhaps the best way to think of texture is as an additive, requiring a base element to function aesthetically. Here are some common elements textures are added to.
- Menu bars
A good way to understand the use of texture is to look for it in other sites. Here are two sites that use textures well.
In many ways, texture attempts to move digital imagery closer to a physical reality. Skeuomorphisms are design elements that serve no practical function but attempt to imitate aspects of the original object. A simple example is buttons. There are buttons in our physical world and “buttons” in our digital world. In the physical world, buttons are (usually) raised objects that can be pressed. In our digital world, we often design buttons as appearing raised to imitate our familiarity with them in our physical world.
Skeuomorphism is very common in design, though we may not always recognize it. Stitching, letterpress text, buttons, drop shadows: All of these are skeuomorphic. Texture too, is skeuomorphic. We have textured objects we can actually feel in our physical world, so we bring texture into our digital design, even though we can actually feel any roughness or wood grain across our screens.
Textures vs. Patterns
Now that you know a little more about texture, I would like to make the distinction between textures and patterns. When comparing textures to patterns, we have something of a “not all rectangles are squares but all squares are rectangles” situation. The obvious distinction is that a pattern could be any repeating image where as textures tend to have more organic, rough attributes.
Textures often look best when a large range of variety is displayed throughout the texture and repetitions are not present. Perhaps the best way to make the distinction between textures and patterns is to think of patterns as they relate to textures, as a verb rather than a noun. In other words, you might pattern a texture to save on site load time or to easily display a simple texture. If done well, the pattern would not be noticeable and the texture should feel like a single element, not many repeating elements.
There are a few ways to get textures. The first, simplest way is to search the Internet. Textures are very popular among stock image sites, especially free stock image sites. Here is a collection of textures from sxc.hu. Many design blogs and tutorials sites frequently include textures in free packs or weekly giveaways. Bittbox, for example, does a free texture Tuesday giveaway.
The second way you can get textures is by photographing the natural world, which is filled with texture. Capture these with a digital camera and some quick tweaks in your favorite image editor. You may even be able to do all of this on your smartphone.
Finally, you can create textures from scratch in Photoshop or other image editors using features like “Add Noise.” You might even manipulate a stock picture that was not intended to be a texture and come up with something unique. While creating your own texture might be the most complicated, it can also be a lot of fun.
While texture can be a great addition to a site, there are a few things you should consider. I already briefly mentioned how texture can be used to direct attention. This naturally requires limiting texture to specific areas. This makes using texture a question of too much or too little. Avoid adding texture to everything and avoid adding texture to only one thing.
Second, do not assume that you have to use texture. You don’t have to use texture to have a good site. While texture can be trendy, plenty of sites — including yours — could be better off without it.
Finally, make sure you have a purpose when you use texture. Again, perhaps adding texture to your site serves no purpose and should be avoided all together. Or, maybe adding texture to that extra set of buttons really doesn’t offer any design advantages. Think about the function of texture in your design rather than using texture by default.