Design theory: Combine the characteristics of the site to dig wonderful bright

In the early days of web design , we will first collect the expectations of the design direction, we often collect such suggestions:

Product Manager: To be easy to use, concise
Design Director: To feature, to highlight
Department Manager: to the atmosphere, to unify
......

The designer wants to three heads, both ways, gu this and Guppelt.

First of all, for the site, vision and experience is one, complement and win together. Visual unity requires experience consistency, and experience innovation also requires visual breakthroughs, but the wording of some needs itself is contradictory or elusive, how concise and characteristic and unified? The design of the tool Web site, the general direction is to strive for concise refining, as an auxiliary means to guide user operations, ease of use and beauty between the heat, just right to show out.

Products on the line, whether good or bad, has its own inherent characteristics of the present to everyone. We look at search sites: google, Baidu, Soso, Yahoo, including the design of the full of Bing, although the same design of similar products abound, commendable, but each product is still striving to pursue unconventional, whether from experience or design are hoping to jump out of the competition of the circle, Make the difference, pull away.

Look again SNS class website:

For a large amount of information, practical and strong requirements of such a Web site easy to start, low-cost and efficient to meet the needs of users. But the attributes of each product are identical, how to attract more users to stop? On the one hand is the function of the improvement and expansion, as convenient as the experience of the client (Facebook is well-known), on the one hand, the design of the fun, in detail experience to protect the user's feelings (white society is an up-and-comer).

Each product must hold its own characteristics in order to stand out.

QQ Alumni and City people in the early stage of product planning to maintain the unity of vision, strengthen the brand characteristics of Tencent SNS products, in the future of the continuous optimization process, pay more attention to the user experience in the details of the trend of unification.

Recall 5 years ago the design, most of our contact is the product poster-type propaganda website, the traditional techniques and web design combination, light effect, ink, paper art and so on, now more is to play the acme of Excellence

But today's product website often do not allow such a high-profile design, which consider a lot of factors, uniformity, ease of use, traffic, advertising revenue and so on ... How to display personalization under various constraints, both to retain the target users, and to attract potential users, so that they are in the process of experience without losing pleasure? This is the biggest challenge for web designers.

Smashingmagazine has a lot of trends analysis of the article, including a lot of design principles of the retrospective, have to admire the ability of the induction of foreigners and rhythmic theoretical discussion, combined with different practical cases, our designers are intentionally or unintentionally in the attempt to make the page to dance the small skills:

　

Page Detail Decoration

The first is the application of transparent effects:
Common in navigation or page head and footer, and banner effect, etc.

Example: QQ Show Navigation Area

Example: Microsoft product Show Area

In addition to the gradient, light effect, blur and so on skills:

Fuzzy effects are often combined with transparency to create a sense of depth.
Color spectrum of the gradient, more suction into people's attention, the method is simple and has a strong visual impact.

Example: http://www.realmacsoftware.com/

Product Display Area

First, introduce the application of multimedia
With the development of broadband, more and more rich content on the online display, a lot of products by means of multimedia to display their product characteristics, all-round and efficient communication content, this should be the product appreciation and functional demonstration of the best way

Example: Microsoft products

Unfortunately, the domestic is still relatively rare, after all, the popularity of broadband is limited, and not everyone likes to watch video. But multimedia displays do open up a new world.

In addition, we can also be embedded in the Web page full flash effect display, the animation of the coordination requirements are very high.

Example: http://www.bkwld.com

If your product manager killed all these cool performance techniques, ask for the first speed. Then also can display the picture to be incisively and vividly exquisite, let it become foil the whole website of the eye-dotting pen.

Example: CDC internal Resource Network

Enhanced contrast

Sometimes to attract users to focus on the content of the page, highlighting these modules or embellishment, the use of color contrast is not only rich page visual effects, more importantly, to increase the reading of the page:

Example: WordPress

Example: CDC internal journal

Similar details, and other forms of expression, such as breaking the traditional handwriting, font art and profound, different glyphs bring the same feeling, add some interesting details, strengthen the contrast:

　

Typesetting technology

More and more of the web design using traditional technology (printing technology), from the module to the graphics and text collocation, and even to the text alignment is similar to the traditional printing technology. Grid design is becoming more and more popular, especially for multi column layout, grid is used to ensure the balance of structure and the division of hierarchy.

Simple schematic of the underlying grid:

Example:

Each new idear is always accompanied by a challenge to the inherent pattern, breaking the shackles of the original and compromising the balance between creativity and usability. Our designers in the constant exploration and learning, study the characteristics of each product, to absorb their bright spots, enhance the control of the details of the ability.

There are a lot of small details that can be danced on the page, and such surprises continue, such as

Moko cartoon characters (http://www.moko.cc)
Designmind Image chamfer Processing (http://designmind.frogdesign.com)
Super Cool head image on Yoho (http://www.yoho.cn)

And so on, combined with their own characteristics of the site, digging out more brilliant bright. Designers should constantly improve their sharpness and imagination, and carefully realize the small design of every excellent website. You will not suffer from the lack of where to improve the details!

Reference site: www.smashingmagazine.com