Web page layout plays a vital role in the entire web design. Different web page layout designs will produce different visual effects, which directly affect the viewer's first impression of the web page.
Web page layout largely determines how website users interact with web content. Good web design is highly practical and adaptable, so you must choose an appropriate design in layout to satisfy users.
This article introduces 8 common web page layout design methods
Card web layout
Cards are carriers of interactive information, often providing relevant web content in a condensed form. Cards web layout is great for placing large amounts of content on a page while keeping each piece of content clear. Example of card layout: Linear card design
Big title web page layout
With the rise of mobile design, typography design with large fonts has gained popularity, and large fonts are especially popular in headlines. When you choose the right font, larger text is more readable and improves the user experience. Additionally, it provides powerful visual effects. Large headlines are especially popular in simple designs with few other visual elements. Case: Online Cinema Web Design
Split screen web layout
This layout refers not only to splitting the screen vertically, but also splitting the screen horizontally. It divides the page into two parts: equal or unequal. The advantage of this method is that it can distinguish textual information and image elements more effectively, making the information more organized and easier for people to read. At the same time, this is also intended to support quick selection for better interaction with the site immediately. For example, the picture below is a typical horizontal split screen case. The entire webpage is divided into two parts horizontally, with text on the left and pictures on the right. The distribution of information throughout the page is more organized, making it easier for users to read quickly. Split screen is a web layout that has gradually become a trend in web design in recent years.
F-shaped and Z-shaped web page layouts
F layout and Z layout are a very scientific web page layout method. Its basic principle is based on the order of how people move their eyes across the page, i.e. how people scan the content. The F web layout has prominent content across the top of the page, with secondary content on the left side of the page (generally an "F" shape).
The Z-shaped web layout pattern has the visual characteristics of prominent content along the top and other valuable content further down. Draw the reading eye line diagonally from the upper right corner to the lower left corner of the page (roughly a "Z" shape).
Generally speaking, F web layout has more visual definition than Z web layout and is therefore suitable for more content pages. Z web layout can grab the user's attention when the browser sees two identical (or nearly equal) pieces of related content.
Personalized recommended web page layout
Personalized recommendation is to recommend content that meets the user's needs based on his or her personalized needs. The more common ones are NetEase Cloud Music’s daily recommendations and private FM. The system will automatically recommend songs you may like based on your listening habits. Amazon’s homepage product flow recommends things you might want to buy based on your shopping behavior data. This is the real reason why we keep buying and seeing but can’t stop. Rottentomatoes has an excellent prediction algorithm that delivers movies that users are most likely to watch.
Grid web page layout
The information is organized into a grid, making it easy to browse and people can stop and focus on specific topics of interest. Grids allow text, photos, and videos to be evenly distributed across a web page, letting users decide the importance of each unit. Case: Grid design for movies
Movie-like grid design instant design is a professional-level UI design tool that supports online collaboration. It supports the import of Sketch, Figma, and XD formats, and a large number of high-quality design resources are ready for use. Supports the creation of interactive prototypes and acquisition of design annotations, providing a one-stop collaborative office experience for production, design and research teams. 
https://js.design/community?category=detail&type=resource&id=643d1aa86c033db4007bcaac&source=csdn&plan=yscsdn9121
magazine layout
Magazine layout is perfect for displaying large numbers of regularly updated, varied images that are unique and memorable. Magazine style layout design includes featured articles (sometimes multiple featured articles in a rotation or similar format), as well as second and third articles on the home page. They usually have multiple columns of content, sometimes divided into sections. These magazine layouts are perfect for content-rich websites, especially those that add new content every day.
Web page layout asymmetrical
In a design, asymmetrical design elements can stand out from other elements and these asymmetrical designs look more dynamic. If you include buttons, controls, or links, they usually get more visual attention than other parts.
Navigation tab web layout
Navigation tags are the main framework of the product. The structural distribution of the product is basically organized by tag navigation, allowing users to understand the main functions of the product. The navigation tab web layout is best suited for web pages that contain only a few items and can be combined with drop-down menus to add submenus.