Web design aesthetics tutorial: Using texture to add depth

1. Background. You’re going to watch the video “Web design aesthetics tutorial: Using texture to add depth” in which the speaker will give examples of using texture in web page design. Work in pairs and discuss the questions.

1. What do you know about texture? How can texture be used in design?

2. What examples of texture use in a web page design can you think of?

3. If you were asked to create a web page what texture would you like to use? Where can designers find examples of textures?

2. Key words. Read the sentences (1-6). The words in bold are used in the video. First guess the meaning of the words. Then match the words with their definitions (a-f).

1. Texture can look rough, smooth, hard, and soft.

2. Texture can feel shiny, dull, and glossy. 

3. Textures can help emphasize a focal point in your layout.

4. Textures can be used as decorative backgrounds in headers and footers

5. Use of texture can help visitors see important buttons on your web page.

6. When used wisely texture can go a long way toward making your designs memorable and unique

a)  central or most important 

b) element of user interface that is clicked to select a command  

c)  having an uneven surface, not smooth

d)  a line of text appearing at the foot of a document  

e)  easily remembered

f)  shiny and smooth

3. Watch the video. Put the sentences from the talk in order (1-3).

a) Combining textures is also a really interesting way to delineate the different areas on your web page.

b) Textures can really transform a design and give your web layouts a unique sense of depth.

c) Understanding how texture works can really help you create designs that are more visually interesting and compelling.

4. Watch the video. Are the sentences true (T) or false (F)?

1.  Texture is an element of design.

2. Designers always work with the library of digitally created textures.

3. Texture can be used to influence the mood of the viewer. 

4. Textures are created only from synthetic materials.

5.  There are libraries of free texture samples available for designers online.

6.  In a web page layout texture can help the viewers to find the most important elements or buttons. 

7.  Advertisements for Mac products are examples of the trick with the digitally created illusion of reflected light.

8.  Texture can be used to create watercolour effect.

 5. Watch the video. Choose the correct option to complete the sentences.

1.  Textures can be very colourful/tactile or legible/visual. 

2.  One reason texture is so effective in web design/web development is that it can instantly add that sense of space/depth to an otherwise flat two-dimensional/ four-dimensional medium.

3.  One of the most popular examples of using texture is to add a sense of depth using a reflective/flat surface.

4.  Two-dimensional/digital textures like these can give the illusion of physical/nature textures.

6.  Read the sentences. Then watch the video and complete the sentences with one word per space.

1.   Texture which, when used effectively, can give your design ___, a distinctive characteristic that helps make designs more ____ tactile.

2. The simple definition of ___ is the surface quality of any ____ within your web layout.

3.  You can create your own textures in _____ using ____ and ____ modes.   

4.   Another popular use for textures on the ___ is using them as ____ to add ______.

5. You can even _____ textures with ___ and other Photoshop tricks.

7. OVER TO YOU. Answer  the questions  or discuss them in small groups.

1. Can you think of any web pages that effectively use texture? What do you like about the use of texture in web page layout? Get ready to bring the example of this logo to discuss it in the classroom.

2. Can you think of any web pages that failed to make use of texture? How can the design be improved? Get ready to bring the example of this logo to discuss it in the classroom.

3. Think of your university web page. How does it use texture? Should texture be added to the web page layout to help viewers navigate the page?