Full 04.12 cover

06 December 2018

10 Best Website Layout Ideas

Thumb veider
Agente Content Team
10 Best Website Layout Ideas

Share

Why do people prefer one website to another? Is it the design, content, or something else that entices them into browsing the site? There are many things that together go to make a great website; the layout is one of them.

How many times have you hit the “close” button, failing to find what you were looking for? This will never be the case for a site with a good layout. Such a layout attracts users’ attention by making essential information intuitive and easily accessible. In a nutshell, it turns first-time visitors into engaged users.

To ensure that people like your website, and come back to it again and again, spend at least a couple of hours selecting the best layout for your content.

Many popular sites have a similar layout, and there's one simple reason for that: they really work. So when deciding to introduce a custom layout that no-one else has, think first whether you need it. It can make the website either memorable or a nightmare for users.

Common website layouts have already proven their usability. People are familiar with them. So it takes a few seconds to find the necessary information. Such layouts save money for site owners—they don't have to pay designers for the time they have spent inventing a custom website layout. They also save time by being able to launch quickly.

Basic Elements

In an established system, basic elements determine the layout. What are they?

  • Header. Located at the top of a page, it has a unique and irreplaceable role in the delivery of a consistent user experience. Brand identity elements, navigation elements (e.g., links to major product categories), and a search field are some of the layout elements usually put there.

  • Main content—the biggest area—contains unique page content.

  • Other content. E.g., duplicate blocks used across the site and additional navigation.

  • Footer. Located at the bottom of each page, it contains less important information than a header. E.g., legal notices.

Best Website Layouts

There are many great website layout ideas across the web. In this blog post, we will cover the most common ones.

Single-column

Websites with such a layout can be easily recognized since they have only one, vertical column. Navigating them is as easy as ABC: site visitors simply scroll them down.

That's why single-column layouts are frequently chosen when it comes to website layout designing. Blogs, long-form articles, and research magazines frequently utilize them.

And the growing number of people who take advantage of the mobile Internet is one of the major factors contributing to the use of sites with long-scroll pages.

website layout ideas

Source: Steemit

Split-screen

This type of layout splits the screen into two equally important areas. This usually serves a dual purpose: giving prominence to the elements displayed in the area and giving visitors a choice between them.

This website layout design is also a great way to communicate your company’s strengths, encouraging visitors to click one side of the page for more details.

website layout ideas

Source: Dribbble

Broken and Asymmetrical Grid

Broken and asymmetrical grids were extremely popular in 2018 as they made it possible for web designers to deliver a unique user experience. Innovative and engaging, they catch the visitor’s eye, keeping them on the website longer through the visual tension they convey.

Some of such website layout examples are designer brands, startups, and web design agencies. But this grid is not a perfect choice for every website. Before putting it to use, make sure that it will work for your content, not against it. Play with colors, they can add the necessary visual weight to a design.

website layout ideas

Source: Dribbble

Brutalism websites are all the rage, as well. Seemingly similar to the layouts covered above, they have a different structure. They rebel against “polished”, clean designs found on the web and come in handy for those willing to stand out in the crowd.  

broken grid

Source: Slugz

Card-based

Cards are usually brought into play when there’s lots of content with the same priority. By dividing content into smaller pieces (previews) and placing them in cards, it is made more digestible. To see more, visitors simply click on these previews.

The grid, spacing, the number of cards, columns, as well their style may vary according to the design needs. Card-based layouts are found on many sites. Besides better-organized content they have another advantage—they add to the website’s responsiveness.

card-based layout

Source: Pinterest

Boxes

The name of this layout type is self-explanatory. Pages, where the layout is used, have one large box of grid width, with smaller boxes placed under it. Combined, they tell a story about a company, brand, or product.

A useful tip: if it’s a product site, add its photo and name to a larger box and display previews of its features in smaller boxes.

website layout ideas

Source: Nowness

Fixed Sidebar

Easy-to-use, intuitive navigation is crucial to any website. Keeping this in mind, designers introduce a fixed sidebar on the left or right side of the page to permanently showcase the most important menu options and navigation elements.

It’s also a great idea to add links to social media accounts, contact details, and any relevant information to the sidebar.

Sidebars can also contain content other than—or in addition to—a menu, such as social media links, contact information, or anything else you want visitors to find easily.

fixed sidebar

Source: 1Bite2Go

Featured Image

This layout is mostly chosen when site owners are seeking a way to sell a product or service. Building an emotional connection with users, they entice them into buying it and raise product awareness.

To reach the goal, use a high-quality photo, image, or illustration and be selective about typography that accompanies it.

website layout ideas

Source: Samsung

F-shaped

This pattern makes content easy to scan, complementing most users’ reading behavior that resembles the “F” letter. It enables the designer to quickly communicate the purpose of the page to readers.

The F-shaped pattern will help you achieve a good visual hierarchy, contributing to your site’s readability and usability. It’s extremely useful for blogs, online magazines, news portals, and other sites loaded with information.

f shaped layout

Source: Dribbble

Z-shaped

Also based on reading behavior patterns, it is about scanning a page rather reading it. That’ why it’s quite common for landing pages. Mimicking viewers’ eyes move, it represents a great conversion driver.

Note: if there’s much text in your content copy, this layout won’t do you a good turn as it is not suitable in this case. It’s better to choose another one instead.

z shaped layout

Source: Irregulart

Full-Screen Image/Video

One large background photo forms the core layout element set to capture website visitors’ attention and create a killer first impression. It can say much more than words. Charity organizations and designer brands are among those who benefit from using the background photo.

Background videos are also increasingly popular since they demonstrate the necessary message in action.

Excellent Examples: What Are They?

We have cherry-picked some real-life examples of website layouts to show how they look. Check out them below.

website layout example

Source: Dribbble

website layout examples

Source: Dribbble

website layout examples

Source: Dribbble

website layout example

Source: Dribbble

website layout examples

Source: Tech Style Fashion Group

website layout ideas

Source: Clemens Hill

website layout examples

Source: Dribbble

website layout examples

Source: Dribbble

website layout ideas

Source: The Offshore Partners

Final Words

Be cautious when selecting a layout for your site—it can either make it or break it. Take a careful look at your content and try separate ways of organizing it. In this blog post, we have discussed both proven and popular approaches to help you make the best choice. Still have questions or concerns? Ask the AGENTE team for advice.

Let's talk

Share

> To the top

Let's talk

Is there a challenge your organization or company needs help solving? We’d love to discuss it.
  • Budget
Attach a file

File size should not exceed 10mb