The trend of the design of mixed disparity Web page in vogue

If you look closely at the latest Web pages using parallax Technology, you will find that the parallax design used in these sites is specious. The number of movable elements in these pages is very large, but not animated, the color style and visual elements tend to be flattened, and the physical metaphor from material design incorporates many subtle interactive details. Many popular design techniques and new trends began to be broken down and rubbed together to form a new hybrid Parallax scrolling page.

　　Understanding New trends

Tour Primer

El Burro

The new mixed parallax is different from the previous one, it is not the attribute single parallax scrolling, it is the result that many design techniques and technology combine organically and seamlessly, it has the moving background and many movable elements, and it is very similar to the early Parallax scrolling.

But there is a clear difference between the two, the most obvious difference is the background, as the page scrolls, the background color will change with the flow, which page elements and visual controls will also move, access to the focus area of the page.

Unlike previous parallax scrolling techniques, the various elements in the new hybrid Parallax page are smoother and more seamless, and you don't see layers interacting. Before that, you will see the Parallax scrolling page, where a picture layer will "slip" to a specific location with scrolling.

Basic elements

Sfcd

New deal

There are some common elements in these mixed parallax Web pages, in addition to the most basic scrolling and parallax effects, these common design techniques or design elements are integral parts of the mixed parallax effect.

• Single-page design: In order to maximize the variety of design effects, these sites usually use the previous single-page design, and some sites will add standardized navigation to guide users into other pages.

Bold layout: Bold layout and interesting font is also the manufacturer of your elements, on the one hand, enhance the visual, on the other hand, make the page readability better, more novel interesting.

• Bright colors: These colors are usually used in a flat color or material design color. Bold, bright, simple, especially with a background color.

• Changeable content type: This kind of website uses the basic interactive mode of the single page scrolling, picture, text, video, illustration and so on many kinds of media will crisscross appear, among them each kind of element interaction is very strong, and usually accompanies the smooth and the playful movement effect.

• Continuous Story: Many websites will use the story as the main thread of different types of media and information, which can be used as a go-between to connect the information. Visually, there will also be a systematic design context, which allows users to have a clear concept of the relationship.

• HD Big Picture: Now the designers are more and more like using the Big HD image on the homepage to create the visual impact and atmosphere.

• Scrolling instructions: For new things, users usually need appropriate guidance to understand the way the interaction and use, so the appropriate description is necessary. Typically, Web sites use simple scrolling or directional icons and elements to guide the user.

• Simple and refined language: Because the background is dynamic, complex text in this case can not ensure recognition, so designers are more inclined to use a simple and a certain guide text.

　Choose the right way to move

Sway

The design core of mixed Parallax Web page is still the movable element. But designers need to grasp the subtle balance of movement and interaction of different elements of the web. Large, too many games distracting, for some users will cause vertigo effect, the real balance of the movement effect is subtle and natural.

Of course, this design is a trick: it's good to set a fixed motion time range for each element's motion. It's simple, isn't it?

Dolox

So, what you really need to do is try not to let these individual moving visual elements run around when the user scrolls the page. Also, the hand icon in the lower-right corner of the site alerts the user to scroll down.

When you start scrolling down, the elements in the movement stop, and the simple and subtle movement begins again as you stop rolling. In this process, it is important that users experience a subtle sense of control rather than vertigo.

　Towards maturity

Publicis

True Trend

How did this hybrid parallax design start to become popular?

The maturity of HTML5 technology is the most basic condition. The natural evolution of various design trends at this juncture makes this design a possibility. The wide spread of flat and material design has naturally injected color, style and metaphor into it, making it a multivariate equation with many variables and infinite possibilities.

In fact, when you look back at the original design trends, you will find that they also experienced this process, a variety of ideas, styles, schools with the popular aesthetic and demand and natural evolution, gradually mature technology is adhesive, fusion fermentation, gradually formed an irresistible trend.