Home web design Novice to do web design? These 9 classic web page layout designs understand

Novice to do web design? These 9 classic web page layout designs understand


Nowadays, more and more people want to build their own websites, and they can make their own web pages through the self-service website system. This is undoubtedly a good thing, but many designers, especially the novice designers or the white people who are not designers at all, have gone through many detours in web design.

The most important thing about web page production is the layout of the webpage, the layout first, and the post-details. Only after selecting the appropriate website layout can the next work be carried out smoothly. What do you want to ask about the website layout? Today, Mockplus has selected 9 different classic website layout design cases for you, I hope to inspire you.

1.Diker Bau website

Website layout ideas: Featured image display brand identity

Diker is a construction planning group based in Berlin, Germany. The designer highlights the main features and attributes of the brand identity with a selection of diagrams. The featured map is used as the basis for the entire site structure and architecture. Due to the lack of other elements in this layout, the selection map will cause the user to pay full attention to the product.

If you want to design a website that can quickly sell products, you can use this layout. Featured maps create emotional connections with visitors, and a large, decent photo or illustration creates a strong resonance and creates an unforgettable first impression. This layout is useful when you only need to show a product or service and focus the user’s full attention on it.

2. Chekhov

Website layout ideas: split screen layout

The site uses a split-screen layout that displays two equally important content information at the same time. In addition, the designer pairs the two pieces of information to create a perfect contrast to attract more visitors. The split screen layout, coupled with the echo animation, creates a more refined experience.

If your site needs to provide two distinct user journey variations, use the layout of the split screen. But avoid adding too much content to the splits. If the content is too long, the split screen design will not scale well and will affect the experience. Therefore, if you need to provide a lot of text or visual information in the split section, it is not suitable for this layout.

3. Timothee Roussilhe

Website layout ideas: parallax scroll layout

The site is a simple and creative resume website for designer Timothee Roussilhe. He added parallax effects to provide visitors with a more enjoyable and impressive experience. When scrolling down, there are many boxes that move in and out. Surprisingly, all the boxes add parallax and you will feel like you are watching a movie.

The hacker design system is online! The three major benefits are not stopped!

Receiving benefits

If you want to design a website that looks cool, creative and impressive, add a parallax effect. But don’t mess it up, keep the layout simple and use a cleaner color scheme.

4. Happiness Abscissa

Website layout ideas: sidebar navigation

The site uses a fixed sidebar navigation to display the entire layout. Navigation is undoubtedly a key part of any website, and the main menu is what most users look for when navigating. In addition to the top horizontal navigation, you can also lay out by placing menu options in a fixed sidebar. The sidebar should select the vertical column to the left or right of the page. For this layout, the sidebar remains still and remains visible, while the rest of the page changes as the user scrolls down the page. Also make sure that this navigation is accessible.

This layout is for sites with a relatively limited number of navigation options. When the user enters the page, all options are preferably within line of sight. The sidebar can also contain content outside of the menu, such as social media links, contact information, or anything you would like a visitor to easily find.



  1. This could be a informative review of website design. However, without referencing a website that uses this design technique it’s kind of hard to see what is being described. One star.


Please enter your comment!
Please enter your name here