The principle of translucent application in web design

Using translucent elements to design a Web page is beautiful and requires skill. Translucent effect refers to the color block, text or pictures are "diluted" or diluted, so that color fade, and revealing the rear content

In place, this effect can be very shocking, to draw a perfect text display area, or as a means of attracting attention to part of the image

But when using translucent, designers must be cautious. This effect is difficult to handle properly because it is a matter of readability. Transparency uses incorrect translucent blocks and text, which can distract attention and destroy overall design effects

Next look at a set of code of conduct, with some translucent effect on the site excellent execution case

To form a contrast by translucent

The greatest advantage of using translucent design techniques is to create comparisons. This effect allows the designer to create visual focus through color blocks, large fonts on the picture, or multiple color levels.

Translucent can also be separated from the text when the background image is not well displayed.

In particular, you need to consider comparisons when using translucent designs. Translucent effects are meaningful only if the picture (or background) and the text are readable. When you consider using translucent effects, ask yourself: Does this help users understand the graphic?

Avoid blocking important parts of a picture

The translucent effect should not obscure the underlying background or the important part of the picture. When deciding on the translucent layer position, be aware of what you have "sacrificed".

With a different transparency

There is no perfect transparency value. For some projects, 80% transparency is ideal; for others, maybe 15% is the best choice. Apply a different transparency to each project

Don't feel translucent to make text easier to read

Using translucent color blocks to foil text does not mean that the text will automatically become readable. To consider the contrast-semi-transparent color block and text, background and translucent color blocks are both considered

When a semitransparent effect is used on a picture, color block, or text, it is important to consider the readability of the text. Remember, if the design effect makes the text illegible, your message will be impossible to convey.

Use semitransparent effects in detail

Translucency does not apply only to the body part of a Web site. This effect can also shine in detail.

Consider using semitransparent to show navigation toolbars, or mouse hover effects as buttons and clickable elements. Don't overdo it with multiple transparency. Select an element and transparency style, and then make it run through the design of the entire Web site

Do not place translucent elements on strongly contrasting pictures

For readability, it is best to avoid using semitransparent effects on elements that already contain strong comparisons-such as black-and-white contrast or complementary colors on a color plate

Because it's hard to get the right results across parts of the background, you want to use translucent effects on such elements, unless a strong contrast is really negative in your design. Consider using light blocks instead.

To use translucent as an artistic technique

Translucency is not just a secondary effect. Consider using this effect to design the main screen for your site.

The contrast, emphasis and visual attraction of a large translucent creation is shocking

Do not use translucent as a decorative object

Translucent effects are not meant to break the monotony of the design. The use of this effect as a decorative object is destined to lead to poor design

The use of semitransparent effects should be considered and planned in advance. Translucent is not a simple effect such as bold, improper treatment will look sloppy and unprofessional

Using translucent in the background

Not only is the translucent effect available when designing a foreground element, it can also be used on a background image. Some very good translucent elements fine subtle

There are also some translucent effects sandwiched between the image layers. For example, Tony Chester's website uses a wonderful translucent layering technique to create a multidimensional design.

Do not use too many translucent effects at the same time

Use different types of semitransparent effects sparingly in each project. Transparency should create contrast and create visual appeal. This will distract the user by using too many differential effects

Using semitransparent elements on a carousel picture

Translucent use is not limited to one-page Web site or static site. It also works on the changing picture and background. Translucent effects can be used in both ways

Using semitransparent on a carousel picture is one of the most difficult uses of the effect. But also the most impressive. Consider a number of background pictures carefully. Choose the color and contrast to match a similar picture, so that only a translucent effect can be used to deal with the background of the rear moving transformation

Special attention to the translucent effect and each picture matching degree, in order to ensure the integrity of each picture, and create easy to identify photos or other background and text, maintain visual unity

Summary

Trying translucent effects is an excellent way to broaden your design skills. Like many other effects, use this technique sparingly and experiment with it in a variety of environments to make sure it works and unfolds as you wish.

The biggest challenge of semi-transparent design is to ensure that the text is legible when used on a carousel picture, and to avoid the translucent elements incorrectly obscuring the image below

Try a variety of transparency and usage--for pictures, backgrounds, matte effects--to determine which effect works best for an item