When starting a new web design project, I don't know if you will have a moment of hesitation: "Where do you start this project?" Accompanying this hesitation is "do something unprecedented" impulse. However, many times, these impulse and hesitation are gradually dilute in the running-in of requirements and the refinement of design. Compared to everyone, we have found that the layout of web pages is similar in many cases. It can even be said that some layout patterns are enduring.
Want to make a website, come to the Radix registry to choose a domain name!
As of June 2016, the total global holdings of its 9 top-level domain names exceeded 2 million.
These layout patterns, or frameworks, are almost "conventional", they are well known to users, and they are more in line with users' recognition patterns and usage habits of content. In today's article, let's talk about five excellent web layouts with long-lasting vitality. Maybe your next web design project can start directly from these five layout modes without much hesitation and entanglement.
1.Top big banner + simple grid
No matter how big the screen is, this layout can display enough content for users to browse and explore. Although this layout varies with the screen and device, some designers tend to design a fixed-width layout or span the entire page, but the overall pattern is similar.
· Navigation bar · Big picture at the top with text title superimposed on the picture · 2 ~ 4 sub-columns which carry different types of information, some will have icons · Main content area · Footer
This layout design is clean and fresh, has sufficient visual expression, and is often responsive, with breakpoints well controlled. The large area of the top carousel or Banner also has many plugins or applications to help you achieve it.
Principle: In this layout, each element performs its role, and the entire process is logical. The big picture on the top is enough to create an atmosphere and give the user a specific experience. The next-level elements below can do a good job .
Related trends: More and more of these web pages are beginning to use colorful, icon-like icons, and the flat design has a natural fit with this layout page.
2. Single page design, single column layout
One-page design has been very popular these past few years, and it is very suitable for showing minimal content or focusing on a theme. When the theme of the website is concentrated and the content is relatively fixed, there is no need for complex layouts to present it, and the single-page single-column layout is sufficient for everything.
· Navigation · Main content area, mainly text + pictures · Footer
When adopting this layout mode, the control of space is very important, which is quite a test of the designer's ability to design blank space and layout balance. The sparse relationship between elements needs to be considered repeatedly by the designer. If the space control is not reasonable, it will give the user a sense of confusion, and if it is too tight, it will produce a cramped feeling.
Principle: One-page design is suitable for the display of small websites or small projects. It can be used to make a simple introduction page, make simple content less monotonous, and strengthen the sense of form and weight of the content. For simple blog sites, single-page design is also a good choice.
Related trends: The closest combination with single-page design is dynamic design and parallax scrolling. They can make single-page design more lively and interesting, lighten the monotonous design, and give the page a stronger vitality.
The layout of those neatly divided pages has never been outdated. Whether it is a finely divided web page area or a large page block, most need to be supported by a clean and tidy grid. On this basis, the content is placed in different blocks step by step, and is carefully organized and displayed.
In the designer's portfolio page, you can find a variety of custom grid layouts. The advantage of custom grid display content is that it can present a large amount of visual content at the same time, and it looks rich enough without falling into inferiority. The effect of the gallery below looks quite shocking.
Fills the grid with color and can also be used to carry text content. Different blocks do not have to be divided by lines. There are many options to choose from, but you must control the grid size and spacing. With poorly controlled details, the balance of the entire design may be disrupted.
Principle: The advantage of a grid is its organization. For users, it has regularity and predictability. A beautiful grid system allows users to find what they need more quickly and is more visually coordinated and natural.
Related trends: Grids are easy to be viewed as elements like cards, and you can add a variety of animations, such as flips, to present more information and visual levels.
4.Classic F-style layout
Research shows that when browsing the web, users are accustomed to browsing information along the F-type reading track, that is, users like to read from left to right, then move down, and then continue reading from left to right.
The layout of the webpage corresponding to this F-style reading mode is the F-style layout. The most critical information is displayed on the left, and it is kept as much as possible from top to bottom.
· Header and navigation · The left column is relatively wide to display the main content · The right column is often a side column to display related links and other content · Footer
Principle: Human behavior is easily affected by habits, and research has confirmed that human thinking and behavior are indeed modeled. From left to right, top to bottom, people are mostly accustomed to this behavior pattern. The F-type layout mode has good applicability, which is easy for users to understand and interact.
Related trends: There are many side games in the F-style layout, and some designers will combine navigation with it, or add a large banner at the top of the page.
The extremely simplified design has always been popular, and its popularity is not without reason. The open space makes the user feel more relaxed and makes the content displayed in it easier to focus. If you add a few parallel content layers to the extremely simplified page, you can make the information more hierarchical, and also make the minimalist page have details.
This design is not complicated, but makes the page more interesting, it can adapt to more different types of projects. This also explains why users like designs like Apple's official website so much.
Principle: Add a few simple layers to the extremely simplified page, so that the page has a visual focus, especially when the designer wants to guide the user to focus on a certain key content, this page layout is very easy to achieve this a little.
Related trends: Subtle shadows and gradients are often used in such pages to enhance the sense of hierarchy between elements. Although these design methods were once "outdated", they are now making a comeback, and design styles such as Material Design are their charge