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.

 

Related articles

15 Best Free Adobe XD Plugins That Designers and Developers Should Know in 2024

Thanks to its simple interface and powerful functions, an...

11 Best Free Wireframing Tools for Designers (2024)

This post was originally published October, 2019. It has...

HTML Basics – 15 Tips to Make Website Design Easy

Web page design plays a crucial role in creating...

Website Management: How It Can Boost Your ROI

Your website is the foundation of all your...

An Honest Look at 10 Website Builders Without Coding

Starting a successful business is hard work. With...

Case Studies

Content & copywriting

Compass Music Platform

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...
Content & copywriting

NewsWeek Magazine

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...
E-commerce development

Beauty & Makeup Shop

A clothing brand wanted to launch a new e-commerce website that would allow customers to browse and purchase their products online. We developed a...