Web Design Theory: Texture

Textures have become an indispensable element in web design. It's not just a trend, it's a quick way to increase the depth of a Web page. The designer learns to use the texture, can strengthen the webpage appeal, is the work law which must master in the webpage design. And the texture itself can be used to guide the user's view to show the key content of the page.

However, the texture seems to have been misunderstood as "GRUNGE" style design, to understand GRUNGE can go to the GRUNGE series (i)-Web design GRUNGE look. In many Web pages, we can see that in order to highlight the effect of cool, is widely used, and even the suspicion of abuse. The result of abuse is that the benefits it really brings are buried. Textures do enhance the appeal of web pages, but they are not the main characters in web design.

Texture VS Pattern

Before we get into the texture, let's distinguish between the two confusing concepts. These two words are usually treated as a set of synonyms. Patterns are usually made up of small, repetitive elements that have a certain visual rhythm. Texture-relative patterns are made up of larger elements and do not necessarily have repeatability. If the two concepts are represented by a set, then the texture and pattern will be two circles, with only a small number of intersections and the rest being relatively independent.

　　The function of the texture

People like to use textures in Web pages, the reason for design should never be done simply because it looks beautiful, but rather based on satisfying a certain function, and most of the purpose of the texture is to enhance the level and visual depth of the page. Let's take a look at the specific features of the texture.

　　Attract users to click the action

icons, buttons, headings and other elements can be applied to the texture. It can attract users to click on the corresponding elements. This may be the reason for the prevalence of texture usage.

The least use of textures is to apply textures to elements so that they differ from other elements in the Web page. Guide the user's vision to the next step we expect. This approach can also focus on highlighting the brand image in the Web page, such as using textures on logos.

There are two ways to use the texture logo: The first is to use the texture for your logo with a clear background, the second is to maintain a clear logo and the use of texture background. As shown in the following two screenshots.

　　Enhanced visual presentation rules for information

Since the texture can be used to guide the line of sight, like lines, squares, and contrasts, it can also be used for typesetting, presenting the content according to a visual rule. At the same time, the texture of the effect should be used properly, and other visual rules to coordinate the use of the final output will be very satisfactory.

Using different textures for different content is also consistent with the law of comparison. Users can move to the next step based on different requirements without losing track of the information that emerges from the home page.

At the same time, the texture to perfect with the site's style and theme, such as handmade sites with cloth, painting sites with paper lines. All of these elements can be used to reflect the content of the website through some kind of logic law, and strengthen the whole information display.

　　Create atmosphere and highlight individuality

Now, more and more customers like their site can use interface design to convey their own more information, they want the site to highlight their own personality, play the brand effect. Textures may be able to achieve this expectation to some extent.

The above page can be said to be the lead in this respect. Use the texture to display the avatar, each element is played with a texture, coordination is also very coordinated. Without textures, I think the design of this web page may not be so good.

Indeed, textures add a sense of "uncertainty" to the design of the Web interface, which brings a sense of freshness to the web and adds a nostalgic charm to the page.

Tips for using Textures

Although the use of textures brings a lot of benefits, at the same time, there are many pitfalls to be aware of when using them.

　　Keep it easy to read

Legibility is a Web page must maintain the bottom line, even if it is done again beautiful pages, if the readability of poor, users will not continue to use. Be sure to avoid this situation as shown in the following illustration.

　　Use the texture sparingly

In print design, texture effects are often exaggerated. And in the Web page, we need to be restrained, do not use a large area, so as not to interfere with the user's attention to the main content.

　　Practice is to upgrade

When using textures, try more. Only after the trial, you will know the final effect. Place textures in places you didn't think of, and you might have different discoveries.

　　Use it purposefully

You also need a lot of practice before you design a real project. Usually, when we do our exercises, we tend to use them for a good texture. This is not conducive to the ultimate purpose of design. If you cannot determine why this element uses textures, then give up doing so.

Purposeful and meant to be focused, it appears to foil the theme. If excessive use causes a grab mirror, then also want to give up the texture. At the same time, I suggest that the use of weaker texture patterns, looming, such an effect will make the advantages of texture to play better.

　　Service for the final effect

Experience has taught us that it is common to play with textures at design time, and always remember that the results we want to achieve can overcome this. For example, we design a Web page that uses a weak texture background that is satisfactory, and if the final effect is met, continue to design the next element.

　　Usually collect resources

In order to save a lot of time in design, believe me, in peacetime to do a good job of reserve resources is the best way to solve. The time to download and collect resources, if used in the design process, may put you under the pressure of a time limit.

　　Using masks

Textures can be used in conjunction with masks to create more novel effects.

　　Do not discount texture quality to shorten load time

There are many ways to shorten the load time of a page, so textures still have to be high-fidelity. Using a seamless repeating small pattern as a texture tile is the best option, so you can avoid large picture loading.

　　Reasons to use Textures

Of course, select a texture and try to choose a texture that has some kind of internal connection to your entire design. As I have in this article an example of the Phishing Club site, then they use a lot of wood as a background texture.