Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the methods of web layout design". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. The main picture of the advertisement is matched with a simple grille system

Regardless of the screen size, this tightly structured layout provides users with a wealth of content for quick preview or further understanding, although the actual size of this layout varies with the type of device. but it's pretty much the same as a whole.

Main navigation of website

Main picture and title

2-4 columns of modules with subheading information elements

Main content area

Bottom

This simple and fashionable layout not only establishes a strong visual order for users, but also its own code structure is very suitable for responsive website design. In addition, you can also change the style of the main navigation, or change the main image to a short video.

Working principle: each visual element and the corresponding text content have their own position, and are arranged neatly according to the order of importance and logical flow; the main picture as the first sight of the user entering the website should have a strong visual impact, and other auxiliary information should have the effect of arousing the user's impulse to click.

Design trend: add bright color icons to neatly arranged information elements, or add strokes to rectangular pictures, in addition, a flat design language can be used to co-ordinate the user interface throughout the design.

two。 One page, one column

When the content of the site is relatively little or there is only one focus information, it is the best layout to distribute all the content reasonably on one page; the information is simple and there is no complex logical relationship, then we do not have to divide the page into many modules, we only need a page to horizontally divide each content area, not only with a clear hierarchy, but also with appropriate blank space and appropriate matching pictures, especially the high-end atmosphere.

Main navigation

The main content area of the combination of picture and text

Bottom

When using this layout, space planning is a very important content. We need to ensure that there is sufficient white space between the content, which can be achieved by increasing the spacing between the edges of the content; but this approach also brings some hidden dangers, if the spacing is set small or unevenly spaced, it will make the whole page appear crowded and chaotic.

How it works: single-page page layout is suitable for small websites, it can enrich pages with poor content or simple structure; this kind of layout is also suitable for simple blogs or pages with only one content style repeated.

Design trend: add visual error effects to a single page to attract users to continue scrolling the page, and these simple and interesting interactions enable users to learn more with interest. at the same time, it also enriches the content of the site (as if every time the user scrolls the mouse is a new page).

3. Grid layout

The neat and concise grid layout (similar to the Nine Palace grid) style has never been out of date, regardless of whether it is finely divided according to the grid system or only the block structure of 4X4, neat rows of grid squares clearly show you the content framework of the site from the very beginning, they have been highly summarized and let you see the general outline of the site. In order to find the plate you are interested in.

Grid layout is very popular among designers, they are often used to make personal websites, through the grid style to display their visual works, so that the viewer has the feeling of walking into the gallery.

Grid layout can also be presented in the style of color blocks or the combination of containers and text, and grid segmentation lines are optional according to the actual situation. There are many parameters to consider, remember to scientifically plan the size of each grid, as well as the spacing between grids, these details are important factors that affect the success of the whole design.

Working principle: a well-functioning grid layout is unparalleled, it allows users to easily find and in-depth understanding of what they are interested in, and the whole page will be more visually harmonious and unified.

Design trend: use simple interactive animation in the grid, when the mouse is over or clicked, the grid flips to display auxiliary information, do you want other options? You can refer to Google's Material Design and use the paper style instead of the grid.

4. Classic F mode

Research shows that the area where people's eyes roll when they view a website shows a specific F pattern. First look at the navigation at the top of the site, then read from left to right, and then move down vertically to the auxiliary information at the bottom.

According to the F mode, we can put the content of interest to the user in the most appropriate position. At the same time, according to this concept, the content can be arranged in order.

Head and navigation

The left column serves as the main content area

The right sidebar can put relevant links and some auxiliary information. The sidebar is moderately high and does not have to extend to the bottom.

Bottom content

How it works: people are habitual creatures, and this test shows the way people think and the habit of browsing websites. If you fully apply this habit to website design, you can design great works.

Design trend: sidebar navigation, click Flip to display all navigation information, or add the main image of the advertisement above F mode.

5. Minimum layering

The focus of this approach is to highlight the smallest hierarchical content area, and the solid color background makes the user feel relaxed, so that all energy will be focused on browsing the focus information. There are seemingly simple and neat layers in the large space, but the information of these layer sets is not simple, they may be more complex than you think, and its style is relatively more exquisite.

This way of combining commercial purpose with minimalist design has been applied in many project types, and its feasibility and plasticity are very high. This enables users to habitually complete orders without any learning costs. For example, the official website of Apple is a good example.

Working principle: hierarchical layout can be arranged according to the important level of visual elements, especially suitable for simple style websites, the layer is very refined to describe the characteristics of the goods in words, combined with exquisite pictures, greatly promote the user's desire to buy.

Using subtle gradients and shadows to define the differences in the content of different layers is out of date, but it works well when used properly. These subtle changes are details of the interaction that can only be detected by the user during the operation. Google's Material Design is the best example of bringing real experience into the two-dimensional space.

This is the end of the content of "what are the methods of web layout design". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.