Elements Of Design: Texture

Tweet

Texture On to the third element of design in our series. Previously we looked at the line and shape and how they can be used to enhance your design and communicate a message. Today we’re looking at texture.

Texture can be defined as “the properties held and sensations caused by the external surface of objects received through the sense of touch.” It tends to play more of a supporting role in design, rather than being the main player. An exception to this is in interior design, where the designer will pay close attention to wall, floor and furniture textures when making decisions to do with colors and positioning in a room.

cool-walls

Image Credit: Great Interior Design

Obviously texture is easier to create on print work because a designer can choose the type of paper, card or material used in the design. On the web, however it’s a little more difficult because we can’t physically feel the design in our hands. We can give the impression of texture by using background images of various material, for example, stone, cardboard and scanned old paper or cloth are used frequently by web designers to bring a tactile element to their web site.

On the Ernest Hemmingway website it’s not hard to imagine what it would feel like if you ran your fingers over the “desk”. There’s old paper with a coffee cup stain, coins and wooden furniture.

Hemmingway

Texture Supports The Content

Just as with the other design elements we’ve looked at, it’s important not to use texture just for the sake of it. Only use it when it supports the message you’re communicating.

In the last year or two there has been a massive interest in Letterpress printing. Letterpress leaves a noticeable impression on paper because of the hot metal die casts used to put ink on the paper. Look at this business card from Mandate Press, you can almost feel the grooves in the paper just by looking at it.

mandate_press

The I Shot Him Because I Loved Him website (love that name) has a subtle textured background. Additional texture is added with the beautiful line drawings and a hint of a drop shadow lifting the characters off the page.

IShotHim

Guidelines For Using Texture

1. Is the texture appropriate for the message? Does it support the message? If your site or brochure is for an under 12s ballet school then a blood spattered, corroded metal background is probably not the way to go.

2. Texture is not limited to backgrounds. Use images, either Photographs or Illustrations that show elements that are in complete contrast to each other. Use strongly contrasting type such as grungy, rough or distorted type with a smooth, elegant font.

3. Remember texture is used in a supporting role, it shouldn’t be the star of the show.

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Wardrop

    That letterpress technique looks great.

  • http://www.siteexpert.net daniweb

    texture realy make the design looking good, I like it!

  • http://blog.littrean.com littrean

    The right texture to use is definitely a challenge when designing; but if you do it correctly it makes your art work look even better.

  • http://www.crearedesign.co.uk/ Nicola Connolly

    Letterpress is beautiful. Like you say, even looking at a photograph of letterpress printing really evokes the ‘touch’ sensation. And bringing this real ‘texture’ and also 3D images/photography into the web world is great as it softens the ‘machine’ aspect of computers IMHO. Texture can really add depth and personality to a design. Nice series of posts ☺