5.2 Texture (with no brick walls in sight)

"… Maybe they've taken the 'less is more' axiom a little too literally."

So begins Jason Beaird in chapter 3 of The Principles of Beautiful Web Design, with an unforgettable sentiment about many web designers and their relationships to texture. Upon reading this statement I was immediately reminded of a blog post I wrote several days ago lamenting the oversimplification of design in the name of universal usability. Now, my intentions here are not to skewer this concept — it is an important one — but rather to again suggest that everything requires a delicate sense of balance. The strictest adherence to usability, with no texture underneath text, no graphical text anywhere, only light backgrounds with dark text, and so forth is really limiting the possibilities of great design and encouraging a boring web landscape. It is possible to use carefully translucent textures to add interest, even under textual areas, without rendering a page unreadable. Used judicially, this and other techniques can enhance the beauty of pages without compromising usability or function. Now that I have repeated my use-and-beauty-balance spiel, let's talk about texture. 

Beaird notes that depth, line, shape, and volume are all key components to adding textural interest to a website. Banishing all thoughts of the repeating brick or cloud image, his ideas about adding texture are extremely subtle in most cases and yet they add incredible depth to a flattened, blocky page. The drop shadow alone can help create a sense of layering and force content areas to move forward (a great way to add emphasis to a particular element). Furthermore, adding gradients to unexpected places, such as navigation buttons, creates an important illusion of dimensionality. In fact, it is incredible to see the difference between a flat color area and a sleek, rounded button created only through some well-placed highlights and shadows.

As for line based textures, Beaird is a champion of looking to art history for inspiration (a kindred spirit for sure). I am considering inspiration from some of the rich, fanciful textures of Rococo to help create a decadent feel to my page, but we'll see if I continue that route in the long run. I am also a fan of simple elements, such as the texture of paper and watermarks or stains. Furthermore, I like the look of subtle layered textures to create something new. As long as the layers are kept largely translucent I think this technique can work well for creating a complex base image that doesn't compete with other page elements, especially text.

Overlapping is another key element that pairs well with the use of drop shadows. As Beaird notes, having one element slightly covering another helps to break the series of rectangles that plagues a lot of site designs. While I am good at layering images and textures, I must admit that layering content elements is something I have to work on. Successful use of this technique really does add a unique touch to designs, but it doesn't come naturally to me. To start, I am going to try drawing out some small sketches to see how I can break out of the existing grid (which is a little too rigid right now), and see where the design can go from there.