Textures in Web Design Workshop

In this workshop I learnt about what textures in web design are, so what is texture?

It is anything that gives a distinct appearance. 

So texture could be added to a number of different elements of the design of a website such as:

  • Background texture
  • Shape & Depth of buttons
  • General shape of site items
  • Pattern, shadow, gradients and evoking shapes

The basic’s of texture are:

  • Point
  • Line
  • Shape
  • Volume & Depth
  • Pattern

So what is the point of using it?

Adding volume and depth makes the design look real, and when it appears to be more real, people can interact with it. For example if a button on a website looks like a real button because it has shape, depth (3D), and shadow, someone is more likely to click on it! This is called isomorphic correspondence. 

With pattern the tiles repeat along the horizontal and/or vertical axis. Texture should not be confussed with pattern. Pattern is an ordered design. 

Photography can be used in a number of ways to bring texture into design such as, photographing real textures, fabrics, maps or drawings. Each texture that is put in also adds towards a feel or theme of the overall design. So as well as making the web site more interactive, the texture design speaks without using words, this would build towards the branding of the website. Some examples of classic textures are a aged, weathered, worn and nostalgic feel.

I am going to use Photoshop to create textures using brushes, pattern, background tiles, photography and scanned imagery. Also I will be experimenting using layer blends, creating my own brush and loading new brushes.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s