The art of using transparent elements and transparency in web design

Every once in a while I have to do a research on all aspects of web design to enhance the level of web design. Learn and communicate with each other!

The use of transparent elements in web design is both beautiful and tricky. Why do you say that, when a certain module of transparency is not appropriate, may inevitably cause experience imbalance, font information is not clear, information capture ambiguous, primary and secondary is not clear, tonal imbalance. So a transparency can cause so many serious consequences? Of course, the details are beautiful, but as long as we use the details of the theme, I believe we can play the role of transparent elements to make your pages more lifelike. Because of the high originality of foreign websites, I will use some foreign cases to do some research. (Of course not to say that the domestic page is not good, but there is a certain gap between the domestic and foreign, we are constantly learning, and constantly learn from, continuous innovation, foreign designers, may always be faster than we step, how can we faster than foreign designers?) This, I will conduct an analysis of myself in the future, to carry out an exploration. )

1. Comparison of content module and website framework

Using transparent layer, opacity in about 80%, so that the font is clearly visible, to avoid contusion user experience.

The following example is the creation of contrast, which distinguishes the use of content modules

Everyone common light box effect, is a transparency and background caused by the use of contrast, so that users can easily distinguish.

2. Translucent Navigation Tracking Application

Sina Weibo, Tencent Weibo and so on, all in the top of the navigation to do a translucent processing, for fixed floating to track the user page browsing, user-friendly operation of the main navigation. This is a common use.

3. Use a small transparent module to foil the background of the page, there is a hierarchical relationship

The cover of the website has the vital function, because the user in 7 seconds (the marketing user stays capture time, has the corresponding knowledge) will make to the demand response, therefore lets your page not be monotonous, uses the appropriate text and the transparent module, further highlights the important information, lets the page level trenchant

4. Transparent for the art way to design the page

How to ensure the readability of website information? The spatial ratio of transparent and opaque areas is an important planning of information display. As a kind of artistic expression, transparency is a way to learn from it.

The following example is the planning for a transparent block as a leading space display. Site overall information is displayed in transparent areas

5. Page elements (such as icons, background pictures, product pictures) must avoid setting transparent

Transparent design, should be in an interactive impact of the design, to avoid the use of transparent icons, transparent product pictures and other details of the elements to do transparent, this will significantly reduce the user's information readability, you can use the picture reflection, icon shadow and other means of "landscaping design"

6. The background design into transparent scenes, with appropriate transparency elements resulting in parallax effect, learn to create Web scenes

There are a lot of transparent things in life, glass, water, windows, computer screens and so on, can use their sense of transparency, to the design of the scene. Here designers deliberately create parallax effect, resulting in a 3D illusion, can make the site more rich texture and lively breath

7. A static or suspected motion picture on the page can be designed with transparency to increase the interactivity of the site.

For example, the activity of the dazzling icon, the movement can rotate, ease of the picture navigation menu, etc., so that the entire site out of the traditional layout, creating a sense of novelty

8. Mouse hover friendly interactive transparent experience

Photo display, navigation, etc., can be created by the designer mouse hover hover experience effect, so conducive to the distinction between primary and secondary information and capture

Summary, the use of transparent Web pages, not just in the design way, expression of the use of, but also can be used for interactive, and other effects of the creative, can be used in real life, design "copy the Reality" of the page, transparent can be applied to static, applied to exercise, and even used in the cause of the human senses do not exist place, more , is that we study more, learn more, appreciate more excellent web pages, to find a more suitable way for their own ways.

More than one method, you can be a creative, hehe ~ Thank you for your support! A lot of communication hey