Use of Textures in Web Design

Use of Textures in Web Design

Texture is becoming integral to design. It’s now a simple and effective way to add depth to a website. However, texture has long been synonymous with “dirty” or “grungy” design. Its overuse can be seen throughout the world of music group websites. Texture can bring a website together, but should not be the main focus.

The Function of Textures

We love texture on the Web for many reasons. Design decisions shouldn’t be made simply on the basis of, “Oh, well. It looks good.” Design should serve a purpose, and each decision about texture should be made by weighing the pros and cons.

 

GRABBING ATTENTION WITH A CALL TO ACTION

Texture can highlight elements such as titles, headings, icons and buttons. It draws the eye to calls to action and main headings. This is perhaps the biggest benefit of the textures in Web design.

When used minimally, texture separates the content from the rest of the website. It guides the user’s eye directly to the intended element. It can be a great way to separate key branding elements.

You can grab attention in different ways, but two common ways can be easily demonstrated with branding: a textured logo against a clean background, and a clean logo against a textured background.

Notice how Poco People’s grunge logo is accentuated against the clean background.

The Tea Factory’s branding is the opposite: a clean logo against a textured background.

 

ENHANCING INFORMATION ARCHITECTURE

Texture can be used to guide the eye. And like lines, boxes and contrast, it can be used to separate content into logical parts. Using it effectively in combination with other methods is very important. The goal is not to use only texture, but to use it to make other methods of information architecture more effective.   

Texture can be used effectively when high contrast and legibility are evident and work in tandem with the texture.

SOA  separates its content with textured elements.

In the example, each element is individually textured for a purpose. Sky’s Guide Service divides the content into logical sections, and the user sees where they start and end. Texture creates logical content areas that help the user understand the information accurately.

Also, the texture suits the style and topic of the website. All of the elements fit a logical theme, thus making the website’s   message stronger.

 

BUILDING AN ATMOSPHERE AND SUPPORTING IDENTITY

More and more, clients want websites that support their identity and make users able to identify with the brand. Texture can be used to achieve this in many ways.

We see a lot of texture on Deda, it is gentle and never more central than other elements.

Deidre “Deda” Bain does this for her personal brand. Her use of texture helps to put a face to the service. Without the texture, the website would be too simple and would not have the personality of its creator. With legibility and good information architecture, the design would still be nice, but users will not remember it. Texture adds the wow factor and makes the website more memorable.

 Tips and Advice

All of this is fine, but you’ll want to avoid common mistakes while using texture in design.

 

MAINTAIN LEGIBILITY

Never sacrifice legibility for texture. Many designers make this mistake. Legibility on the Web is extremely important. If a user can’t read the message, then what’s the point in composing it, let alone texturing it?

Avoid doing this to your type

This poster shows what happens when designers use texture and make their text difficult to read.

DON’T USE TEXTURE TOO MUCH

  On the Web, unlike in graphic design, texture can be extremely ineffective if designers use too many  textures on one page.

On Hinder’s website, the menu is difficult to read, and the texture leads our eyes away from the important information.  

Conclusion

Experiment with your designs. Try new things. Use textures that you’ve never used before. You never know what you’ll discover until you try it.

I Find words in the text with the following meaning. Use 5 of the words and expressions to write your sentences.

1. the visual or tactile surface characteristics and appearance of something
2. necessary or fundamental
3. the centre of interest or activity
4.  the reason for which something is done or created
5. a conclusion or resolution reached after thinking or discussing
6. draw special attention to
7. a symbol on a screen
8. to divide
9. the part of a  design that forms a setting for the main objects, or appears furthest from the viewer
10. to show the way, to direct
11. the complex structure
12. at the same time
13. unique symbol that identifies a product 
14.  to be able to think about someone or something from the past
15. a wrong action
16. to give up (something valued) to get something else
17. to try out new ideas or methods 

II Look at the text in previous tasks. Restore the collocations. Find the contexts the collocations were used in the texts. Use 6 collocations in your sentences.

integral to		together
simple and effective		basis
add		headings
bring a website		cons
main		elements
for many		way
on the		parts
serve a		elements
the pros and		ways
highlight		reasons
calls to		brand
main		brand
Web		design
branding		mistakes
grab		tandem
common		purpose
logical		design
information		depth
work in		architecture
identify with the		focus
personal		action
wow		things
common		attention
try new		factor

III Answer the questions

1 What is the role of texture in Web design?

2 How can texture be used to influence client’s attention?

3 Is texture always used effectively? What are the most common mistakes in using texture in Web design?

4 What websites traditionally use texture ineffectively?

5 How can texture be used in tandem with information architecture?

IV Study the information in the text and draw a scheme summarizing the ways texture can be used in Web design. Look back at the readings (textbook) and draw a scheme summarizing the ways texture can be used in graphic design. Compare the two schemes and discuss similar or different applications of texture.

V  Vocabulary game. Check your knowledge of words and expressions used to speak about English language and its characteristics.

1) Focus on the words and expressions (study definitions)  https://www.studystack.com/flashcard-2864856

2) Match the terms to their definitions   https://www.studystack.com/picmatch-2864856

3)Solve the crossword using active vocabulary     https://www.studystack.com/crossword-2864856

4) Complete the quiz by choosing correct definitions   https://www.studystack.com/quiz-2864856

5) Chase down the correct answer to earn points   https://www.studystack.com/hungrybug-2864856

6) Unscramble words and phrases (correct order of letters)  https://www.studystack.com/wordscramble-2864856

7) Type in words to fill in the blanks  https://www.studystack.com/fillin-2864856

8) Test your knowledge of  vocabulary https://www.studystack.com/test-2864856

VI OVER TO YOU. Find the websites that use texture as an element of their design. What kind of texture did the designer use? Comment on the function of texture (Why is it used? What is its purpose?) and its effectiveness (Is texture used effectively? Is the site legible?  Did the designer overuse the texture?)