A Amoy: visual scrolling effect and graphical representation in Web pages-creating design

Have you ever played a game on a red or white machine or a little bully in your childhood?

These games basically are through the foreground and the background when the scene moves to produce the different disparity, thus achieves the simple stereoscopic effect

So the parallax scrolling is not a new thing, we played when we were kids ...

At present, this kind of parallax scrolling effect is used by more and more foreign websites, which becomes the hot trend of web design.

Give it a redefinition

But the use of this kind of effect also needs to look at the specific environment and the overall performance of the final page, to prevent the page too much procrastination.

Second, there must be a very tight connection to the design.

The main features of Parallax scrolling effect:

1, intuitive design, rapid response speed, more suitable for use in a single page

2. Differential rolling layered parallax

Many of the elements on the page are rolling independently of each other, and if we're going to be layered on the other, there are two or three layers: the background layer, the content layer, the texture layer

(Can you make it more?) is there any way to do it visually?

Implementation rules for differential scrolling:

Scrolling in the background layer (slowest)

The scrolling of the texture layer (the element between the content layer and the background layer) (the second slow)

Content layer Scrolling (can be consistent with the scrolling speed of the page)

We make three layers of rolling speed inconsistent, we made a beautiful difference scrolling effect

As a designer, you can ...

1, the use of large background

These background images are generally high-resolution, large graphs that cover the entire site.

High-definition photos are a good way to quickly capture the audience, can produce a very powerful visual effect, the user's sight will unconsciously fall on the broad background

Attention:

1.1, background Image color, content in the selection to be very fastidious, the premise is not to destroy the user experience, otherwise beautiful photos are in vain.

The best choice of picture type tends to some softer, slightly transparent category, do not affect the content of the Web site reading, recognition, pay attention to coordination.

1.2, a large number of pictures as the characteristics of the page should consider the image of the preload problem, in order to provide users with a better and smoother visual experience.

2, you can also use a simple color scheme

There is no more intuitive and concise background than a solid color. A solid color can be expressed in many ways.

One of the best colors in a parallax range is 2 to 3, we can adjust the transparency of the color to achieve a variety of visual effects

3, positioning the background layer, the relationship between the map layer and the content layer

Define the need for a map layer based on the functionality of the page itself

The mapping layer exists to communicate the visual effects more effectively, but if it becomes a distraction, it violates the original purpose of our use.

The presentation of the content layer is the most important, regardless of the background layer and the number of layers of fancy, in the designer design process, the content layer of the user's display is the highest priority

4. Telling stories

Strong performance, simple style and aesthetic sense of design together constitute an excellent interactive narrative experience. We often hear such words: content is kingly, technology is just a tool to achieve content. When you can successfully combine powerful information with beautiful executive power, you can create people like and enjoy the experience.

———— Wieden+kennedy

Visualization of two data--Information graphic design

Story 1 traditional mercury thermometer and large letter mercury Thermometer

Story 2 red light?

These are the simple application of graphic design in daily life, graphic design is an expression way of information visualization.

The graph of data comes from the visualization of the data, which is an expression of information that can be viewed with the eyes in a different way from reading.

This visual expression should not merely provide an explanation, but rather provide the reader with an understanding of the universality of the method of conclusion.

Today, visual expression is far more bright than simple pie or bar charts, making information more interesting, including design trends, creative innovation, and so on.

Design process of graphical and visual deviation in product application

PostScript: This is done before a share of content, and recently some students in doing visual poor encounter some problems, asked me to share this, so the hair out, I hope to be able to do similar design in some help