Timeless Website Layout Ideas & Examples

Source: InVisionApp

With so many product offerings and categories, it can feel overwhelming for users to navigate through Adidas’s navigation menu. That’s where split screen designs like this can enhance the user experience, making it easier for them to get to their desired location, faster.

Why it works:

• Gives users another way to easily navigate throughout the website
• Puts the most important information front and centre
• Offers a clean layout that’s easy to scan (when designed well)

2. Grids

From YouTube to Sephora, website grid layouts enable designers to showcase several different pieces of content or products in an equal manner that’s easy for a user to consume. Grids can vary across multiple factors including:

• Size
• Spacing
• Number of columns
• Style of cards
• Amount of text shown (I.e. just title, versus title with a short description)
• Use of carousels versus displaying everything on a skyscraper-length page

This is certainly a great layout design for eCommerce websites.

For eCommerce companies with a lot of products, like Sephora, a grid layout offers a great way to put a plethora of products in front of their customers. Within their grids, they’re able to further categorize their cards into categories. They’ve also opted to use carousels so that they’re not overwhelming their audience with hundreds of items at once. It's safe to say that this grid style is one of the most common website layout ideas for business with many products.

Why it works:

• The grid layout makes it easier to build responsive designs
• It organizes a lot of information in an easily digestible way
• It enables companies with large content or product libraries to share them all in one view (and increasing their chances to sell or engage more)

3. Asymmetrical

Our definition of asymmetry is when text or graphics are arranged unequally on either side of a central line. However, an asymmetrical design can still be balanced. For example, you can balance a single, dominant element on one side of the central line with several lesser elements on the other side.

While this isn’t the most popular page layout design, it still offers a great opportunity to entice and engage your audience, and even convert them. A great use case for asymmetrical web design is landing pages for eBooks, webinars, and other downloadable content.

Take Nauto for example. On the left hand side, they place a lot of information—from the use of an H2 to outline the asset being promoted, to the smaller text focused on what the reader will learn if they download the eBook. On the right hand side, they’re able to focus the viewer’s attention with the use of color, pushing them to the next step that should be taken on this page: filling out the form. While this page doesn’t look imbalanced, it’s still a great use of asymmetrical website design.

Why it works:

• Enables you to focus your audience’s attention in one direction while allowing designers to play around with a new design layout
• Gives you the opportunity to create interesting layouts that differentiate your website pages from one another
• Easier to guide users from one direction to another

4. Single column

We can’t forget to mention the single column design. Arguably one of the most simple website layout ideas, the single column lays out all of the content within a single vertical column. This is also one of the easiest layouts for users to navigate and scan through. Instead of their eyes jumping from left to right, they just need to go from top to bottom.

While this is a more basic layout design, by no means is it boring or ineffective. In fact, many big brands follow this layout, including H&MandMedium’s articles pages. Let’s take a closer look at H&M.

Within their homepage design, they’re able to create multiple designs within a single column website layout through the use of design. Their homepage design consists of a:

• Red sales banner that’s overlaid with text
• Hero image highlighting their new collection, which is overlaid with text and a CTA button
• Carousel highlighting trending products, navigating the user to multiple product pages
• Product image using two-column design to add another element to the page

Why it works:

• Single column layouts make it easier to design, develop, and optimize for mobile—they also work great for your homepage design
• It easily guides the user throughout the content on the page because there’s only one direction to scan (top-down)
• It forces designers to be simplistic in their design without removing creative freedom

Tips for choosing the best layout for your website

With so many website layout ideas out there, it can feel overwhelming to make a decision. That's why we picked 4 of the most tried and true designs to feature!

These website layout tips will help you narrow down and focus your decision to make the right one for you and your audience:

• Think through your user journey first: Interview your customers directly. Show them your wireframe, ask for their feedback, get a sense of what they expect (and hope) your website experience will be like. Once you have enough information, build it, and continue to get feedback. Most importantly, never stop gathering feedback because your company will evolve and so will your customers (and their expectations).

• Understand that you can use multiple layouts throughout your website: It’s important that similar grouping pages (i.e. a features overview page and subset pages) follow the same layout to keep consistency. However, your blog layout doesn’t have to be the same as your homepage or pricing page.

• Design for natural scanning patterns: Make it as easy as possible for your audience to scan your page the way you intend them to. A popular pattern that many designers optimize for is the Z-pattern, where a user's eyes will scan a page as if they were following the lines of the letter “Z”.

• Determine your website goals and optimize for that: If you’re focused mostly on being a thought-leader, maybe an F-pattern or single column layout might be best for you because they’re best for text-heavy pages. However, if your goal is to sell more products, like Sephora, then a grid style might be best for your product pages. Determine your goals and pick the layout that helps you achieve those goals.

• Don’t forget about information architecture: Before you start your wireframing phase, it’s important that you spend time thinking about your information architecture. This will enable you to plan out your primary and secondary navigation menus before you build out (or rebuild) your new website or a specific page. Doing this will make it easier for users to navigate through your website.

Wrapping up

When paired with great design, the right website layout will make your brand more credible, help your company stand out, and engage your audience. But, keep in mind that websites don’t need to be built off of one layout. Instead, choose the best layout for your website by selecting the right one for each key page. From there, you can tie all of these pages together with a smart and delightful design that’s built with the user in mind.

We hope you found these website layout ideas to be helpful! As you start to plan out the next iteration of your website layout, or even a particular page, take the time to understand what layout will work best for you and your customers.

Once you need an extra set of hands to bring great design to your layout, get in touch with our team at Superside. We’ve worked on website landing page designs for some of the top brands from around the world!