The use of transparent effect in web design

Using transparency in web design is a beautiful and risky thing to do. The use of transparency is to "thin" the color blocks, text or images, or to reduce the saturation, so that the color becomes lighter and transparent so that the contents of the next layer can be shown through. This method, if used well, will be particularly good-highlighting text or creating focus in specific areas of the image. But designers should be very careful when using transparency, because doing so may affect the readability of the page. If the opacity of the box and text is not correct, it is more likely to affect the overall design.

Below are a few caveats and a successful case of clever use of transparency effects.

Make a comparison with "transparency effect"

The biggest advantage of using transparency is that you can make comparisons. The designer can create a color block or text focus on the image, adding a color dimension to the screen. The transparency effect also causes the text to jump off from an eye-catching background. In particular, contrast is considered when using transparency effects. Transparency is only successful if both the image and the text are visible. So when using transparency, don't forget to ask yourself: does this make the text/image easier to understand?

Don't cover the key parts of the picture

The transparency effect does not obscure the background or picture that conveys the information. When deciding to adopt a transparent effect as a framework, think about what is missing.

To use transparent effects in a hierarchical manner

There are no perfect parameters for setting the transparency effect. In some cases, 80% is ideal, while some 15% are the best. This is to be specific analysis of the situation.

Do not assume that transparency effects enhance text readability

Do not think that you use transparent box, the text will naturally be able to read. To think of the contrast-whether it is transparent frame to the text or the background image to the transparent framework, it is important to take full account of the readability of the text. Whether you are dealing with transparent pictures, color blocks or text, remember that if the visuals make the fonts difficult to read, the information you want to express will not be communicated.

Small-scale use transparency effect

There is no need to use transparent effects in a wide range. Small-scale use can also achieve very good results, such as the use of transparency to do web navigation or button hover effect. Don't think about how to use a variety of transparent effects in a complex way. Select an element and a transparent style, and throughout the web design.

Do not use transparent effects on images to create strong conflicts

Given the readability of the text, it is best to avoid using transparency on images that already have a strong visual conflict-the brain complements the black, white, and various complementary colors on the color wheel. If the fusion feeling after the use of the design has reduced the effect, try not to use transparent effect. Because it is difficult to make every part in the background to achieve the desired effect. Then you can think about how to match the color better.

The art of Transparent effect

The transparency effect is not a secondary effect. To use the transparent effect to design a dominant image. A large area of transparency is a powerful design for contrast, emphasis and visual excitement.

Don't make the transparency effect a decoration.

You can't just add a transparent effect at a later stage because you think the design is boring. If you just use the transparency effect as a decoration, it will look like a chicken, should be planned in advance how to apply. The transparency effect is not as simple as the font bold. If the use is not good, it will appear sloppy, unprofessional.

Use transparency in the background

The transparency effect can be used not only in conspicuous design elements, but also in background images. Some of the great transparency effects are subtle, while others are visible in layers. Tony Chester's Web site, for example, is a great use of transparency-enabled layer technology, making the design look more dimensional.

Do not use too many transparent effects at the same time

It is best to limit the number of transparency effects. Because the transparency effect creates contrast, emphasis and visual excitement. If used too much, it will distract the user's visual attention.

Apply transparency to static and/or dynamic images

Transparency is not limited to a single page or static design, it can be used in a variety of images and backgrounds, or both. The use of transparency in dynamic diagrams is flattering, and can be impressive. Sift through the background of multiple pictures, try to choose the color similar, the content is conflicting, so that you can change the background of the picture to use the same transparency. Carefully observe how the transparency effect is used for each picture, thus guaranteeing the full consistency of the transparency of the picture, making the picture, background, text readable and visual unity.

Conclusion

Learning to use transparency is definitely a shortcut to your experience of growing your design. As with other effects, make full use of this technique and test it in different contexts to achieve the desired results. To master it, the biggest challenge is to ensure the readability of the text in an illustrated case, and that the transparent part does not obscure the layer below. Try a few different degrees and forms of transparency-when you're working on a picture, when you create a background and when you make a hover effect. Then, choose the best solution.

The use of transparent effect in web design