Layout design of Web pages (vii)

Source: Internet
Author: User
Tags copy split version
Design | Web Page Three, the basic type of layout

The basic types of Web page layout are skeleton type, full version type, split type, middle axis type, curve type, tilt type, symmetrical type, focus type, triangular type, free type 10 kinds.

1. Bone Type
The skeleton of the Web page layout is a normative, rational segmentation method, similar to the layout of newspapers and periodicals. Common skeleton has vertical banner, two columns, three columns, four columns and horizontal banner, two columns, three columns and four columns. Generally with vertical columns for more. This format gives people the beauty of harmony and rationality. Several kinds of columns are used in combination, which is rational, orderly, lively and full of elasticity.

2. Full-version
The page is filled with an image of the entire version. Mainly to the image as a point of appeal, can also be part of the text pressure on the image above. Visual communication effect is intuitive and strong. The full version gives people a feeling of stretching and generosity. With the popularity of broadband, this layout in the Web design more and more use.

3. Split type
The whole page into the top or bottom of the two parts, respectively, arrange pictures and copy. Two parts In contrast: There are parts of the picture sensual and energetic, while the copywriting part is rational and calm. You can adjust the size of the picture and the copy, to adjust the strength of the contrast. For example: if the proportion of the picture is too large, the text used by the font is too slender, kerning, spacing, paragraph arrangement is very lighter, resulting in a visual psychological imbalance, appear blunt. If through the text or the picture will divide the line to treat, will produce the natural harmonious effect.

4. Middle axis Type
Arranges the picture or text in a horizontal or vertical direction along the middle axis of the browser window. The horizontal arrangement of the page gives people a sense of stability, calm and implicit. A vertically arranged page gives a comfortable feeling.

5. Curve type
Pictures, text on the page to make the curve of the division or composition, resulting in rhythm and rhythm.

(The above content extracts from Gu Qun industry and so on "webpage art design" a book, Shandong Fine Arts Press publishes. )

Figure 21: Comprehensive use of a variety of columns form.
Figure 22: Bleeding at the edges, extending outward to suit the tastes of young people.
Figure 23: The image on the split line is not only breaking the blunt sense of the page segmentation, but also makes itself stressed. The small label on the left border is the crowning stroke.
Figure 24: Easy to detect the middle axis layout, give people a sense of lightness.
Figure 25: The navigation title of the Web site is arranged along a graph arc.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.