Texture Used in Web Design: Examples, Best Practices, and How-To

by in Design on 16th Jul 2010 · Comments

Within the last ten years, web design has impressed us with glossy gradients, smooth reflections, and even plain and bold colors. With this new trend in simplicity and open space, came a better understanding and appreciation for adequate user interfaces. Now, though, in more recent designs we're beginning to see these minimalistic and well-laid out designs come in not so plain ways. Modern designs are beginning to use more texture than before, but still using texture in an intelligent way to keep web spaces clean, organized, but just much more aesthetically pleasing.

Texture Used in Web Design


In this post we're going to look at some of the greatest uses of texture in web design today, and see how it can be used in so many forms. We'll explore how the use of texture has evolved over the years in web design, and how any designer today should use texture to make designs really pop.

From Sleek to Textured-Sleek

The early era of modern web design is still widely used today. Gradients, beveling, and solids all still come into play - and it can still look modern and sophisticated.

Discovery

Yet, a few years ago, many modern looking websites used these techniques, and there was little variation from one to another. With being such a fairly new industry, it probably came down to a lot of young designers just trying to get it right. All everyone was trying to do was get out of the 90's web design era (And we don't blame them).

Now, though, we're finally starting to see great, modern-looking designs coming out in all shapes and forms. While we still love simple, sophisticated, and sleek, as designers we can now be much less afraid of color and texture:

Agami

Above are two great examples of the very opposing styles, although some designers choose to take a different approach to the recent evolution of web design. Instead of going in polar opposites, some choose to stick with a clean and sleek look, while still adding just enough texture to add some great appeal:

Easykom

Texture used in the above design is much more obvious than the use of texture below. While still being clean and using gradients and solid colors, the main image contains a strong use of texture that gives it a lot of attention and interest. Furthermore, the headings use texture as attention-grabbers as well. Also note how in this design, texture was used to unify a theme throughout the design, and connected some of the main elements of the design together.

The use of texture above is much more subtle. If one were to look at the full-size live version of the site, one will notice some textural 'noise' within the footer's background. Texture, along with some more visual interest, is added in the header with the subtle clouds in the background.

Why Use Texture Anyway?

In our very first example we saw a very successful web design work without hardly any texture at all. Even in our last two examples, the uses seem so subtle that it's barely worth it. So why go through the hassle of adding texture at all? It's almost obvious to say that it can add more time onto our design workflow, and make any design even more difficult to code during the development phase.

So why bother? Texture adds depth and even a sense of realism to designs. By adding depth, we can grab the user's attention. Let's look again at the Reichweite example below:

Reichweite

The two places where texture are used are the header and footer. The middle portion of the design is void of texture, and instead uses gradients, size and icons to grab attention. Because we are naturally attached to depth (and the resulting sense of realism), the header and footer can fairly compete with the middle section of the website. By using texture in these two areas, and using the other forms of creating hierarchy in the middle, we come up with a well-balanced design.

By either adding texture to the middle section or leaving texture out of the remaining two, the middle portion may have become too overpowering, allowing the user to ignore the header and footer information.

So, we use texture because texture is a very strong attention-grabber. It can help a designer create correct hierarchy to correct balance, or even imbalance to create focus. Its addition of realism can also make a viewer feel more connected and in-touch with the design.

Texture Strength

The wonderful part of using texture in web design is that it can be fun. There is so much variety, and different textures can create different strengths in its attention-grabbing power. As an example, the contrasting texture to the left that also contains more variety in shape is much stronger than the subtle texture on the right.

Variation

Always think strategically about adding texture. Depending on where texture will want to be added in a design, how strong does it have to be? Always use plenty of whitespace when using heavier textures, and use larger sizes for overlapping content to make it distinguishable between the texture and itself. For more simple textures, while not as strong, designers have fewer restrictions because it will also not conflict with much.

Themes and Texture

Texture is the most distinguishable element one can add to a design. This again comes from the amount of variety we can obtain from it. Drawing themes from textures is relatively easy. Our example below shows how the texture on the left can create for a very grungy style and theme, and on the right we can create a cleaner, sleek theme.

Themes

Themed textures often go great with imagery that supports the texture. Common uses of hardwood textures use desk objects or imagery of something that would be found on a piece of hardwood furniture, while something like an old paper texture would support a retro or classic theme.

Conclusion

Just like size, balance, contrast, and color, texture is an essential feature in design. It is essential to understand how to work with texture correctly, even if sleek and glossy designs are still a designer's niche. Web designs come in many forms from heavily textured, to just hints of textured elements. No matter how it is used, it is easy to see how texture can add so much visual appeal to a web design.

Always remember that texture, like any other design element, has a purpose. It can add depth and realism, and even enhance the theme of a design. Use texture intelligently, and not just for the sake of using it. This is how one can create a textured design that makes sense, rather than a design that is over-cluttered and too busy with this important design element.

Kayla Knight is freelance web designer and developer with several years of experience. In her spare time she enjoys the busy college life, and writes for some top design blogs.