Six design tips for fast Web pages

1. Rotation method – Rotate the body or part of a page

Our General page layout is square, well-organized, a bit stiff. If the proper rotation of the local or the whole, break the stable composition, the screen will be more dynamic and interesting.

For the above picture, this kind of tone is relaxed lively and the content is relatively few pages, the main body after the rotation, the screen immediately lively up, see now this picture, really can't imagine before the flat before spinning. At the same time, the irregular Yu Bai will not appear empty compared to the large square blank.

Above, the background rotation, a large area of the bevel produced a very strong sense of speed, racing fast, as if the next second to be rushed out of the computer, the tilt of the big title and the background of the rotation after the cross, so that the whole movement of the picture. This approach can be applied to a variety of motion topics.

　　2. Golden Section-The flexible use of the golden ratio of the method to "cut" the page open

The gold ratio is considered to be the ideal rectangular ratio, and there are many such relics in the cultural heritage of the past. Applying this ratio to layout design, you can also design a composition that is easy for the user to enjoy. But do not be bound by these proportions, many are based on their own feelings to apply.

Above, the removal of the background is nothing but a clear layout of the page, the background after the segmentation, contrasting the color block to create a deep sense of the screen, the richness of the page and visual impact of rapid enhancement. The character also seems to have landed, the steady stand in the picture.

Above, with a strong contrast color block segmentation, emphasizing the division of the plate, even if there are many places to emphasize, but also allows users to quickly clear the focus of each section, not as usual 1, 2, 3 ... In turn, the contents of the vertical line down, the mouse has been dragged to the third screen is endless, and no fresh feeling.

　　3. Curve method – Use the curve for background or section segmentation to eliminate the harshness of rectangular segmentation.

Compared with the straight line, the curve has a rounded feature that makes people feel relaxed and cheerful. Enhance the visual sense and also can create a lively atmosphere.

Above, the popular logo and the focus of the robot products, all by the curve composition, in this case, with the curve to split the background and focus of the natural, the picture of the rational use of the curve has improved the level of sense, the robot and red headlines are more prominent.

Imitate the ball movement track, runs through the entire page the curve, will the user intuitively to bring into the intense baseball game scene. Seemingly arbitrary, in fact, with the curve precise the title, focus map and news and other sections according to the focus of different proportions of the division.

　　4. Borrowing method – borrowing real things, abstracting objects and abstracting large outlines for background

Can things in reality be applied to web design? Of course, just think about it.

As shown in the picture, envelopes are commonly used in our lives, so living things borrowed to the Web page, launched in front of the user, as if mailed to your letter, immediately let the person in front of a bright, intimacy arises spontaneously. As a game activity of the notice page, with white stationery to hold the main content is also suitable.

Above, put the car racing on the track onto the page as a backdrop, a virtual big city, an enlarged track, a racing car ... Just like sitting in front of the computer playing the car, the left hand is tightly pressed with the W, A, S, D key. Let the user immersive, completely grasp the other eye.

And so on, a lot of things in life can be borrowed, such as: Write a blackboard full of chalk word, computer screen, write diary book, antique map, open football field ...

　　5. Triangle collage-like doing manual, will cut a good triangle upset, re-tile

Different geometrical shapes have different personalities, the circle is lively and lovely, the square is smooth and neat, the triangle is sharp and dynamic.

Triangle imbalance and its sharpness can enhance the visual stimulation, quickly attract users, can be used in technology and fashion this style is also more "sharp" page.

Above, will be the same color with small triangles even collage up, immediately create a kind of diamond dazzling fashion sense. But the practice of time to pay attention to addition and subtraction, can not pile a pass, can be.

Above, use the gorgeous triangle to divide and tile the page. The combination of size, color block contrast, can bring users a strong visual impact. In collocation, attention to primary and secondary, to a large shape, to leave enough space for the content, and other auxiliary small shape difference.

　　6. Color Block Method-separate the plates with different colors

Always face the demand side here is the focus, that is also the key, that that is also very important, all need to highlight the requirements of the theme of a more lively page can be considered to distinguish between different colors, through the color block to enhance the layout and layout of the page, it is difficult to achieve a balance in color matching.

Above, the layout in the page to reflect the block, no effect, in order to highlight the key areas in the selection of a high saturation of the red-yellow-green three colors, resulting in a clear visual center, so that users can follow the way we want to read down. But contrast tonal easy to cause disharmony, red and yellow and green with gray bottom neutral color to reconcile a bit will not appear abrupt.

When using four to five kinds of pure color to match, note that as long as the hue, purity, lightness three attributes are basically the same or close, with basically will not feel too far-fetched