Improvement = creation of design parallax scrolling effects and graphical display on webpages

 

　　

 

ONE Parallax rolling effect Parallax Scrolling

When I was a child, have you ever played a game on a red/white machine or a bully?

　　

 

These Games basically generate different parallax between the foreground and the background when moving the scene, so as to achieve a simple three-dimensional effect.

　　

 

So it's nothing new to say that parallax scrolling. We played it when we were young ......

At present, this parallax rolling effect has been applied by more and more foreign websites and has become a hot trend in web page design.

　　

 

Redefine it

　　

 

　　

 

However, the use of such effects also depends on the specific environment and the overall performance of the final page, to prevent the page from being too slow.

Secondly, there must be a very strict Association in design.

Main features of the parallax scroll effect:

1. intuitive design, fast response speed, and more suitable for single pages

　　

 

2. Differential scroll stratified Parallax

　　

 

Many elements on the page scroll independently. If we want to layer other elements, we can have two to three layers: the background layer, the content layer, and the texture layer.

(Can I make it more? Is there a way to achieve this visually ?)

Implementation rules for differential scrolling:

Scroll of the background layer (slowest)

Scroll of the texture layer (elements between the content layer and the background layer)

Scroll at the content layer (consistent with the page's scroll speed)

We made the scrolling speed of the three layers inconsistent, and made a pretty different scrolling effect.

As a designer, you can .........

　　

 

1. Background

These background images are generally high-resolution, big charts, covering the entire website.

High-Definition photos are a good way to quickly capture the audience, which can produce extremely striking visual effects. users' sight may unconsciously fall on a wide background.

Note:

1. When selecting the color and content of the background image, make sure that the user experience is not damaged. Otherwise, a beautiful photo will be wasted.

It is best to select a type of image that tends to be soft and slightly transparent. It does not affect the reading, identification, and coordination of the content of the website subject.

1.2. image pre-loading should be taken into account for pages featuring a large number of images 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 solid color. Solid colors can be expressed in many ways.

It is best to keep two to three colors in a parallax interval. We can adjust the color transparency to achieve a variety of visual effects.

3. Locate the relationship between the background layer, texture layer, and content layer.

　　

 

Determine whether a texture layer is required based on the features of the page.

The texture layer exists to better convey the visual effect, but if it becomes an interference, it will violate our original intention.

　　

 

The presentation of the content layer is the most important. No matter how fancy the background layer and texture layer are, the content layer gives the most priority to the user during the design process.

4. Tell stories

　　

 

Strong expression, simple style, and aesthetic design constitute an excellent interactive narrative experience. We often hear this: content is king, and technology is just a tool to implement content. When you can successfully combine powerful information with beautiful execution capabilities, you can create experiences that people like and enjoy.

---- Wieden + Kennedy

TWO data visualization-information graphics design

Story 1 traditional mercury thermometer and big letter Mercury Thermometer

　　

 

Story 2 red light? Green light?

　　

 

These are simple applications of graphic design in daily life. graphic design is an expression of information visualization.

The Graphical Data is derived from data visualization. This is another way to express data in a different way from reading data.

This visual expression should not only provide an explanation, but also provide a universal conclusion to all readers.

　　

 

　　

 

　　

 

　　

 

　　

 

Today, visual expression is much more eye-catching than a simple pie chart or bar chart, making the spread of information more interesting. They include design trends, innovative and innovative.

Design Process of graphical and visual differences in product applications