Join Sue Jenkins for an in-depth discussion in this video Using texture to add depth, part of Design Aesthetics for Web Design (2013).
- View Offline
The third element of design is texture which when used effectively can give your design depth. The distinctive characteristic that helps make designs more officially tactile, of course there's a current trend for flat design that purposfully ignores texture. Even so, understanding how texture works can really help you create designs that are more visually interesting and compelling. The simple definition of texture is the surface quality of any shape within your web layout. Textures can be very tactile or visual.
Think of how a texture would look and feel. Such as rough, smooth, hard, soft. Shiny, dull and glossy. Also consider how textures are created. They can be made from natural and synthetic materials like wood, fur, nylon and vinyl. There are lots of ways to add texture to a web design. You can photograph or scan your own textures and then manipulate them in a graphics program like Photoshop. You can create your own textures in Photoshop using filters and blending modes.
You can use free Photoshop brushes to paint textures into your designs. You could use free stock images, or pay for them if you like. And then add those to your web designs as needed. Here are a list of sites where you can download free textures. And of course there's a lot more but I found that these particular sites have quite a bit to offer. There's Smashing Magazine, TextureKing, Lost and Taken, Texture Mate, Zen Textures, Grunge Textures, and CG Textures. One reason texture is so effective in web design is that it can instantly add that sense of depth to an otherwise flat, two dimensional medium.
Textures can be used in a variety of ways in web design. They can help emphasize a focal point in your layout or they can be used more subtly as a decorative element that you might not even notice. Textures can also be combined with shapes, lines, colors, lighting, even typography. And of course, textures can be used as decorative backgrounds, in headers and footers and sidebars, on your navigation bars and buttons, regular buttons, banner ads, bars and dividers. Let's take a look at some creative ways that you might consider using texture.
One of the most popular examples of using texture is to add a sense of depth using a reflective surface. You may have seen this kind of effect on pretty much every Mac product shot. The trick here is what you're seeing is not an actual reflective surface but a digitally created illusion using a fading gradient over an inverted image to make it look like an object that was photographed on an opaque white plexiglas surface. Another popular use for textures on the web is using them as backgrounds to add depth.
Here are some nice examples of textures used in banner ads. Digital textures like these can give the illusion of physical textures, which in turn help to create the illusion of depth. You can even combine textures with photographs and other Photoshop tricks to give your images a grungy, weathered effect. So here's one way of using like a crumpled folded up piece of paper to make an image look weathered. And I have a few other examples to show you. Here you can use coffee stains and then scan that stained piece of paper into your Photoshop program and then manipulate the blending mode to create and interesting negative effect.
You could also play around with other scanned textures and filters to make the images look weathered. Keep in mind that textures like color and value can help create a mood. Take a look at how changing the texture on the background of this particular layout effects the overall design feel. You can use textures on your background, your menu, your header, your footer, your sidebars and your buttons in any combination that supports the design. Combining textures is also a really interesting way. To delineate the different areas on your web page which can help visitors see at a glance which areas might be more important than others.
So I'll just go through these layers and show you how it changes the look and feel of a particular design. So the original is a photograph of some metal doors. Here's what it looks like on stained paper, maybe not nearly enough contrast there but you get the general idea. Here's some crinkled paper. There's a little sidebar with grass behind it, a textured leather background really adds a nice tactile feel, or a little bit of cardboard on one side, leather on the other. You could do something like vintage wallpaper, or even something like this watercolor effect.
Textures can really transform a design, and give your web layouts a unique sense of depth. And when used wisely, texture can go a long way toward making your designs memorable and unique.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices