9 Best Website Layout Ideas, Examples and When to Use Them

  • Orlee Gillis
  • on Web Design
  • Updated on: 20.04.21

elementor types of website layouts

The role website layouts play in impacting the quality of the design is clear to every professional designer. A website’s pattern and structure are the very first things we think about in the earliest stages of our design process. After identifying the goals of our site and the elements it should include, page layout design effectively begins the first stage of putting ideas on paper. 

It is only once you decide upon the anatomy of your website and how to map out your content accordingly, that you can then build lo-fi wireframes and explore what works best for what you’re looking to achieve. 

Is it a heavily-visual homepage that will work best for your content strategy, in the form of a full-screen media layout? Or does it make more sense to distribute the information hierarchy in a more even format, using a split-screen layout to display several sections of content with mutual significance? 

This is exactly what we’re about to explore, by looking at our nine hand-picked examples of the website layout designs most frequently used by professional designers. 

Evaluating these examples will help us understand the role each layout-type serves in building website content that actualizes our design goals. Ultimately, knowing when and how to leverage the right layout for our sites — will equip and empower us to build more robust design strategies and craft websites that are even more beautiful.

Table of Contents

What is a website layout.

  • What Every Website Layout Must Include​

The 9 Most Effective Website Layouts

1. single column layout: the world famous ipad, 2. two column layout: earmark, 3. three boxes layout: katchme, 4. split-screen layout: bose, 5. asymmetrical layout: underbelly, 6. fixed sidebar: arbor restaurant, 7. full-screen media layout: dutch national opera & ballet, 8. grid layout: malika favre, 9. boxes layout: tsx broadway, ready, set, build.

A website layout is a framework that defines the structure of a website. The layout places the key elements of the website front and center, and it provides users with a clear path for navigation. The website layout is a critical element that determines whether the site will succeed or fail.

The goals of a website layout are to improve user engagement, make web pages visually appealing, and organize the site’s content so that it fits together in a clear sequence

What Every Website Layout Must Include

While we certainly see the beauty in how many layouts there are to choose from in professional web design, there are also essential components that each layout type must include, even if included in a non-conventional way. As we know from Jakob’s law, one of the most fundamental principles in web design , is that interface layouts and navigation flows should bear engaging uniqueness, yet balanced with familiarity that’s logical and intuitive to users.

Essentially, what we must never forget when planning our page layout is to include: 

  • The website header , which should always capture the most simplistic navigation elements that convey the basic structure of your website and how to find what you’re looking for
  • The page body, meaning the core section of your web page, such as your visual content, main messaging, and so on.
  • The navigation menu, whether it’s in the form of a sidebar , hamburger menu, sub-header, mega menu, scroll-triggered, a sticky or fixed menu, and perhaps others.
  • The website footer, no matter how short or tall, footers generally contain social channel links, copyright notices and privacy policy links, and other optional items, such as a duplicate of your header’s menu content, call to actions, such as “subscribe”, “contact us”, or even a submission form.

And now, for the web design inspiration we’ve been waiting for, some of our favorite examples of the most commonly used website layouts.

website content layout

For web designers, an understanding of the wide spectrum of layout types becomes a bedrock of their design workflow and path to success. By looking at top-tier examples of website layout designs, we can go home with a brand new toolbox that will help us solidify our understanding and skills of what makes a website look its absolute best.

example one column website layout

As you can see on Apple’s iPad product page , single column layouts present the main content in a single, vertical column. Surrounded by plentiful white space , the scrolling experience is smooth sailing, and the large-sized images are crisp and clear. This innovative usage of white space is what makes the page’s main content look so detailed and comprehensive — without being overwhelming to the eye. 

What we can infer from here is that when emphasizing distinct details is what you’re looking to do, single columns and white space are the perfect option. When used appropriately, single column layouts tick the boxes of both the user experience and the user interface, making it not only comfortable for users to visit your site (regardless of their device), but notably visually-pleasing as well.

When To Use Single Column Layout

  • Textual stories in a personal blog or an article.
  • Minimalist design .
  • Mobile-friendly design.

two column layout example

A two column layout describes a page that is divided into two vertical sections/columns, splitting the screen into two vertical sections (the sections can be of equal width but can also be split unevenly). Two column layouts are recommended for pages that have two main pieces of content that share a mutual level of importance. 

As shown above, Earmark is a financial management platform that helps users track their finances across multiple bank accounts — all on one dashboard. The purpose of this web page is to provide visitors with a sneak peek of what this new product will entail and what its benefits will be. Ultimately, this one-page website is focused on communicating the product’s value proposition in a brief yet comprehensive way. 

In this context, the virtue of a two-column layout is that it takes advantage of the page width, and makes room for rich, detailed visuals — alongside explanatory texts that find the minimal number of words they need in order to tell their story. The sentences are concise, the call to actions are clear and easily identifiable, and the images accurately visualize the verbal content.

When To Use Two Column Layout

  • Showcasing visuals and text elements of mutual importance.
  • A highly engaging, or even interactive experience.

Overall, when you’re looking to avoid tedious visual monotony, two column layouts are a great solution.

katchme screenshot

KatchMe is a recruitment agency based in Paris that specializes in recruiting professionals for IT and digital roles. Their website uses the three boxes layout to present a combination of video, text elements, animations, accents, and more.

As you can see once you scroll below the hero section, the “three boxes” website layout describes a web page that features one main graphic content area followed by two smaller boxes or sections beneath it. Each of these individual sections can contain content of any kind — graphics, text or a combination. That being said, the three boxes layout is very often used for pages looking to present several large photos in an organized, hierarchical manner. 

What’s unique about using the three boxes layout is that it allows the designer to take advantage leverage both a full-screen width as well as a “sectional” or “divided” space. Given that individual design elements often thrive on having their own unique widths and overall dimensions, the three boxes layout is a fine choice for accommodating multiple content types in a case-specific format that complements their appearance best.

When To Use Three Boxes Layout

  • Combining video content. and static image content
  • Portfolio page of a few sample graphics or visuals.
  • Visual hierarchy between multiple images on a page.
  • E-commerce sites with a featured product image and related products.

bose split screen layout screenshot

A split-screen layout exists when a page’s main content area is divided into two or more vertical parts. When the division is done in a logical, organized way, split-screen layouts can offer a one-of-a-kind viewing experience for your users.

This example from Bose’s website is highly unique, as a five column screen is a lot less common than typical split screen websites that feature two or three columns. Using a particularly creative divided layout, the world-famous audio equipment manufacturer shows an out of the box way to revolutionize the split-screen layout look. 

In this particular setting, Bose’s use case of a five column website works well for three reasons (among others): 

  • All page content is above the fold. 
  • Each column has one picture of a similar object type, allowing consistency between the images and columns. 
  • The analogous color scheme in place fits together nicely, and they are each similar shades — bold and bright but not too much of either.

When To Use Split-Screen Layout

  • Two (or more) distinct options for users to choose.
  • Highlighting a vertical image.
  • Layout directly corresponds exactly to the visual flow.
  • Static image juxtaposed with a video or animation.
  • Contrast between two or more content types or areas. 
  • Side-by-side style landing page .

asymmetrical website layout example

Underbelly is a digital design and development agency based in Salt Lake City, Utah. They provide an array of services for brands and businesses, including interactive projects, development, brand and marketing, and content creation. As you scroll down their homepage, you’ll notice some big brand names, such as Facebook, Citi Bike and XBOX. 

Underbelly’s homepage is an asymmetrical layout in all of its glory, as it perfectly represents the most basic definition of what an asymmetrical layout is: distributing content of different sizes unevenly throughout the page — with no symmetry at all between them. 

In line with the motif of asymmetry, Underbelly also applies a theme of diversity in its choice of types of visual content. This includes full-sized photographs, photographs with filters, simple squares with a solid background and a centered text element. And, of course, the full-width video background slideshow is diverse within itself, as it combines different media-types: both illustrated videos as well as real footage. 

When To Use Asymmetrical Layout

  • Visual balance is top priority.
  • Wide variety of visual-elements and content-types.
  • Advanced image gallery .
  • Balance between contrasting colors.
  • Interactive dynamic with visitors.

arbor restaurant sticky sidebar

Arbor is a Michelin-plate, AA Rosette gourmet restaurant, bar and event space located in Bournemouth, England. The unique homepage layout found consists of a full-screen image background slideshow with a sticky sidebar pinned to the left edge of the page. 

In web design, the sticky sidebar is universally defined as a fixed navigation menu on a web page that stays in the same position as a user browses and scrolls down the page, remaining visible the entire time. 

Arbor Restaurant finds several unique ways to incorporate the sticky sidebar technique into each page of their website, proving themselves to be a champion of creative website layouts.

When To Use Fixed Sidebar Layout

  • Easy access to core functionalities.
  • Advantages in usability.
  • Large number of category pages or single pages.

dutch opera screenshot

As the name suggests, the Dutch National Opera & Ballet is the Netherlands’ national ballet company, housed in the Amsterdam town hall and theater. The company is one of the country’s largest cultural institutions, and operates on both a national and an international level. 

The Dutch National Ballet’s website uses a full-screen media layout for their homepage design, which essentially means using a background video as their hero image . Full-screen media layouts are a win-win in web design for a bunch of reasons:

  • They provide a rich user experience. 
  • They’re great for responsive design. 
  • It’s an impactful yet simple design choice.
  • They’re easy to develop.
  • They increase visitors’ curiosity to scroll down and find out more.

This particular usage of a full-screen media layout when it contains a video (or multiple videos) is a unique work of design inspiration. It not only gives the website visitor a truly authentic focal point of what the brand or product represents and offers — it does more than that, too. Videos, especially, present a real-life, interactive perspective of the content. Because of the authenticity of full-screen, this type of media layout helps establish user trust when visitors first enter your website.

When To Use Full-screen Media Layout

  • Conversion rates are a top priority.
  • Quick user decision-making.
  • Emphasizing the use-case of your product.
  • Strong branding.

grid layout example

Grid layouts, as you can see from this website created by Malika Favre , a London-based French artist, can be a profound opportunity to showcase many visuals and works of art in one interface. Always a balancing act in web design, the challenge of juggling different color contrasts between multiple illustrations is alleviated by the color block style of the overall grid.

Starting out as a modular grid and then dabbling in the hierarchical grid layout about halfway down the page, this design choice lets visitors know which projects may be more dominant within the design portfolio. 

Another unique design technique in this example is the choice of no gaps between the images, what’s known in web design jargon as gutters (or alleys). When constructed carefully, symmetrical grids (and especially grid-shaped image galleries ) can enhance the look and feel of website content with a unique, eye-pleasing presence.

When To Use Grid Layout

  • Organized-looking archive pages and media galleries. 
  • Images with text overlays.
  • Blog with a clean layout.

boxes layout example

Next comes (what’s widely popular among web designers) — boxes layout. This layout-type refers to webpages (very often the homepage) whose hero section is a large full-width box (often, but not always, a full-width image or video), followed by smaller boxes directly underneath. Ideally, the number of these small boxes should range from at least two, to no more than five. 

TSX Broadway is an outdoor stage in the middle of Times Square, which includes an 18,000-square-foot podium and an outdoor terrace — where live streaming, broadcasting, performances, and the liking take place. 

TSX’s site uses the boxes layout to create a visual representation of the experience you get when standing at their venue, seeing the scenic, bird’s-eye view of Times Square. Once you take that all in, you proceed down the homepage to the various columns and squares, each element guiding the website visitor to the concrete details and explanations needed to understand what the TSX experience is all about.

When To Use

  • Pages with several media-types of multiple sizes.
  • Provide a visual, wide-lens perspective.
  • Responsive visual layouts.
  • Evergreen website layouts.

The value of understanding the rich variety of website layout options and how to incorporate this knowledge into your web design processes is absolutely priceless. Professional layouts are every web creator’s entry point to a web design workflow that boasts organization, efficiency, logical structure, and of course, high-caliber, engaging websites.

Looking for fresh content?

By entering your email, you agree to receive Elementor emails, including marketing emails, and agree to our Terms & Conditions and Privacy Policy .

Orlee Gillis

Web creation

Website Builder & Hosting Strattic Page Builder Plugin Hello Theme Dynamic Content Ecommerce Theme Builder Landing Page Builder Popup Builder Form Builder Workflow Optimization Elementor AI Image Optimizer

WordPress Hosting Strattic Page Builder Plugin

Elementor For

Web Designers Developers Marketers Agencies

Help Center Academy Blog Add-Ons Roadmap Developers Website Support Web Creators Glossary Integrations Web Creator Stories Meetups AI’s Prompt Library Apps

About Us Contact Us Careers FAQs Affiliate Program Trust Center Media Trademark Terms & Conditions Privacy Policy Cookie Policy Website Accessibility Statement Open-Source Software Components

Elementor is the leading website builder platform for professionals on WordPress. Elementor serves web professionals, including developers, designers and marketers, and boasts a new website created every 10 seconds on its platform.

Subscribe to our newsletter

© Elementor. All rights reserved

10 Good Website Layout Ideas (with Examples)

Paul Boag

UX and CRO specialist

The layout of your website can define its success.

Get the wrong design and people will be confused and disorientated, destroying the user experience. They are likely to miss critical content or fail to see a call to action.

So before you build a website , make sure you got the layout idea right.

But the importance of your layout goes further. The design has to fit the content of your site. With the right layout, your content can shine, but with the wrong one content can become crowded, hard to read, and uninspiring.

Ultimately all sites have a grid system that sits beneath the website design . These columns and rows provide order to your content and guide the user’s eye around the page. Within these grids, you can create a plethora of different approaches. Every website has an underlying grid upon which the designer has built the layout.

However, when it comes to choosing the right layout design for your site, there are several common starting points you can use to begin.

It is worth saying that you do not need to stick to one approach. You can easily combine multiple layouts across your site or even on a single page such as a landing page.

That said, let’s look at the most common layout options available to you.

1. Single Column Layout

Although the most uncomplicated layout you will find, it has grown significantly in popularity since the growth of the mobile web. That is because the website can use the same design on mobile devices, tablets, and desktops, reducing development time.

Medium uses a single column layout to enhance the reading experience.

Because of its simplicity, there are few challenges around a single-column layout. However, you do need to consider the flow of information carefully. What order does the user need to see your content?

For example, it is helpful to give users a summary of what the page covers at the top to draw them in and offer a clear call to action towards the end.

Also, think about how you can keep the user scrolling down the page. Single column layouts tend to be longer, and it is not always apparent to the user that there is more content below the fold. A visual indicator, such as an arrow can help.

If a single column layout seems a little restrictive, but you still have a lot of content to communicate, consider adopting a design that focuses on the content.

2. Content Focused Layout

Web designers often use the content focused layout on news sites or blogs, and it usually has a primary column for content and one or more side columns for additional information.

The advantage this layout has is that it can help you manage the line length of the central content by varying the width of side columns. That matters because if the line length of the text is too long or short, it becomes harder to read , so reducing comprehension and retention of the information.

The posts on Boagworld breaks up content with headings, lists, images and pullout quotes.

Careful consideration also needs to be given to the side columns. It is essential that the web designer places the right content in these columns and that they visually have the correct weighting.

The problem is that users expect to find secondary content in the side columns and so give them less attention. Therefore, if you plan to include something like a call to action in a side column, it needs to be strong enough to draw attention.

Smashing Magazine uses its side columns to provide secondary information about the post.

3. Magazine Layout

As the name implies, this layout approach is used extensively in magazines or news sites to show a large number of different stories.

Inspired by print layout, they allow for the combination of headlines and imagery to introduce stories. That can be an engaging way of conveying what is essentially a list of links.

News websites tend to favour the magazine-style layout.

This website layout style can also be somewhat overwhelming, with a large number of images and headlines shouting for attention.

By varying story sizes they guide the users eye.

It also helps that the rest of the user interface is straightforward, with clean typography and simple navigation bars. If you are going to use the magazine layout, you will need to work hard to keep things simple.

Another potential downside of the magazine layout is that it can look ‘boxy’ because the grid that underlays it is so visible. However, you can mitigate that by taking inspiration from our next layout type.

4. Grid Breaking Layout

Layouts that appear to break their underlying grid can be visually much more interesting than more traditional approaches. They are also excellent for drawing attention to particular screen elements that break out of the usual columns.

The VR Arles Festival draws your attention to their navigation bar by having it overlap two columns.

Their inherent complexity is why you tend to see them used by design-led companies such as design agencies or fashion brands. They demonstrate a degree of design sophistication that appeals to a particular audience.

If a grid breaking layout feels too complicated for your situation, but you still want to do something more innovative and unusual, consider a full-screen design.

5. Full-Screen Layout

Full-screen layouts, as the name suggests, fit on a single screen with no need for the user to scroll. That makes them ideal for storytelling or presentations.

Species and Pieces is a rich, interactive experience that all takes place without the need to scroll.

You also need to put careful consideration into how the layout will adapt at various sizes. For example, will the full-screen approach work on a mobile device? Also, will images crop as the screen size changes or simply shrink? You can quickly find the focal points of images being crop out of the viewable area at smaller sizes.

That said, if you have stunning images to show off, you will struggle to find a better layout design. But, if you want the option to add some description and calls to action alongside those images, you may want to consider an alternating layout.

6. Alternating Layout

The alternating layout pattern is one of the more commonly found on the web. You will find it is made up of a series of content blocks, each of which has a two-column layout. The blocks are typically made up of an image on one side and text on the other.

What gives it its name is that the image alternates side. So the first block will have content on the left and the image on the right, while the next block reverses that layout.

Webydo alternate text and imagery in different content blocks down its homepage.

Of course, your requirements might be different, so another option to consider is the card-based layout.

7. Card-Based Layouts

Card-based page layouts are another common layout approach you will see all across the web.

Card-based layouts are a great way to give people a series of options for the user to choose between, presenting them with enough information on each choice to make a decision.

Ecommerce sites like Asos favour card-based layouts to display product listings.

There are a couple of minor drawbacks to the approach, however. First, cards work best when you include the image. That means if you are struggling to find suitable photos for each of your list items, you might be better with a different design.

If cards have varying amounts of content it can leave spaces between cards.

Another equally popular design is the hero image layout.

8. Hero Layout

Apple make good use of the classic hero image.

As you can see from the Pixave and Apple websites above they usually consist of a large background image, a title or strapline, and a description. Hero layouts also often come with a prominent call to action.

If you need to clearly explain what you offer on your homepage or landing page in a way that will grab attention, then a hero image could well be the way to go. However, that is probably the extent of their use.

Occasionally you will see the hero layout used on subsequent pages. But, in most cases, the hero image simply draws attention away from more valuable content. So use with care.

Aside from that, there is a little drawback to using a hero layout. Yes, they are common, but users are familiar with them, and they are effective.

A considerably less common layout option is the split-screen layout.

9. Split Screen Layout

This site uses the split-screen layout to explain the two parts to their offering.

A similar example is when you want to give users a clear binary choice. A split-screen makes a lot of sense in that situation as it divides the screen equally between the two options.

62 Management use a split-screen design to encourage users to make a choice between two options.

A similar option that would provide a bit more flexibility is the asymmetrical layout.

10. Asymmetrical Layout

Whereas the split-screen layout forces an equal split down the middle of the viewport, an asymmetrical design allows you to divide the screen however you see fit.

The advantage of this layout over split-screen is that it allows adding emphasis to a particular side of the page. The more real estate a side has, the more focus you are placing on it. That, in turn, allows you to identify primary and secondary content.

Félix Lesouef uses an asymmetrical layout to highlight his sites navigation.

How to Pick a Layout

By reading this article, you have taken your first step in picking the right layout for your site. You have learned what kind of options are available to you.

Next, you need to get a sense of which options might be appropriate for your site. One way of doing this is to look at your competitors. However, I would advise not stopping there. The danger is that you will copy them, and that will always put you one step behind.

Instead, take a look at sites in other sectors that have related types of content to your own. If you have a brochureware website aimed at a B2B audience, have a look at other similar sites. Equally, if you have an eCommerce site, look at eCommerce in other sectors.

From there, work with your designer to experiment with some different approaches. Get them to wireframe some ideas based on different layouts and see what suits your content the best.

If you find yourself unable to make a decision or lack confidence in the right direction, try putting the options in front of some users and get their reactions. Don’t just ask them which they prefer, also ask them whether they spotted critical content or understood what the company was about.

In truth, you will probably find yourself picking and choosing from different layout approaches for different parts of your website, and that is okay. Because when it comes to website layout, using the right one at the right time is critical.

WEBSITE ESSENTIALS

10 best website layout ideas to get you started

  • Jenna Romano
  • 10 min read

Get started by: Creating a website → | Getting a domain →

website layout ideas

Deciding on the right layout is one of the first steps in website design . Serving as the foundations of your site, a website layout can greatly impact how communicative and intuitive you are online.

From asymmetrical designs to classic patterns and split screens, this article includes 10 website layout ideas that will help you get it right the first time when figuring out how to build your website .

What is a website layout?

A website layout is the arrangement of all visual elements on a webpage. Through the intentional positioning of page elements, we can control the relationship between them to better guide the user experience.

Acting as a key component of web design , a layout determines the sequence in which page elements are registered among visitors, which elements draw the most attention, and the visual overall balance of the site. Because of its visual significance, a website layout can enhance a website’s message and usability.

Put plainly, a good website layout can lead visitors’ focus in the right direction—gravitating them toward what matters most first, and then continue to the following sections in order of significance. A layout can also be used to enhance your design, create interesting interactions and show that you’re up-to-date with web design trends .

How to choose the right website layout

When approaching the task of choosing a website layout , there are two main factors to take into account:

Accommodate your content

The layout you choose should be fitting for your type of content. Why? A website layout needs to help tell the story you wish to deliver to visitors. Hence, choose one whose arrangement will enhance and support your message.

Some types of website layouts are best used for showcasing products or works, making them more suitable for an online eCommerce website or portfolio websites . Others convey factual information quickly and efficiently, and might work better for creating a blog or news platform.

Use common layouts

While there’s room for creativity, the most well-known, tried-and-tested website layouts are usually the best option. These classic layouts tend to feel familiar to users, as they build on existing expectations, past experiences and the principles of design .

It's also worth considering some more general and commonly respected design principles. Gestalt psychology is often applied to website design and is especially relevant when it comes to the design of website layouts. This is because how elements are grouped, in order to create a positive user experience, lies at the heart of Gestalt theory. The main principles are:

Proximity : elements that belong together, such as menu and navigation bar, should be grouped together for usability.

Similarity : elements that look the same and behave the same should also be positioned together.

Continuity : this focuses on providing an easy flow for users through a webpage through continuity between elements.

Closure: this means users are not left with nowhere to go, or without another element to lead them through a page. Overlapping images are a good example of closure applied to a website layout.

Figure-ground related : making sure the main elements of the site layout stand out from the background.

You might also want to consider applying the rule of thirds to your website layout. This a fundamental principle in photography and visual composition. It suggests dividing an image into a grid of nine equal parts by drawing two equally spaced horizontal lines and two equally spaced vertical lines, resulting in four intersecting points. It encourages designers to place key elements of interest along these lines or at the points of intersection. The idea is that by doing so, the composition becomes more visually appealing and balanced, as it avoids placing the subject or important elements directly in the center of the frame.

Since a familiar layout will result in a more intuitive, easy-to-use interface, we’ve highlighted 10 of the most effective layouts below. We’ll explain what makes them work and which type of website is the best fit for each. The visual examples included are all Wix templates , which are fully customizable to match your style and needs.

10 best website layout ideas

Z-pattern layout

F-pattern layout

Fullscreen image layout

Split screen layout

Asymmetrical layout

Single column layout

Box-based layout

Cards layout

Magazine layout

Horizontal strips layouts

01. Z-pattern layout

When coming across a new webpage, we immediately glance over it to take in the gist of things. This speedy scan, called skim reading, is often done in the shape of the letter Z or in zig-zag form. Our eyes move from the top left corner to the top right corner, then down to the bottom left, and finally to the right again. The Z-pattern website layout utilizes this reading habit through asymmetry by spreading important information across a Z shape.

Using this layout, a logo is usually placed in the upper left-hand corner of the homepage, so that it registers first. Across from it, in the rightmost corner, it’s common to place the navigation menu along with a prominent call-to-action.

The diagonal part of the Z-pattern, spanning across the page from top to bottom, is where the most attention-grabbing information should go - and this is where you can really use typography and emphasis to your advantage to make this impact count. This can be achieved by use of captivating visuals and a concise line of text that represents what the website is all about above the fold .

Toward the bottom of this Z-pattern, users should find your most important call-to-action (CTA). Whether you’ve been building up anticipation to purchase a product or book a service, now’s the time to get visitors on board and encourage them to take action.

This website layout idea is great for pages that are highly visual, and landing pages that serve a specific conversion purpose are usually a perfect fit.

Best website layouts example of z pattern layout

02. F-pattern layout

Much like the Z-pattern layout, this design is also based on a common page scanning behavior. With webpages that are more text-heavy, we tend to skim or read the information in an F shape. This means that the top horizontal part of the page gets the bulk of our attention, and our eyes go vertically downwards from there, with the left-hand side tending to serve as our focal point.

When using the F-pattern layout, make sure to invest resources on the top fold of your page, where visitors are likely to linger longer. This usually includes a headline, subtitle and featured image—content that can introduce the remainder of the site in a compelling manner. You can also include anchor texts to lead visitors towards information and a navigation menu to guide them to the parts of your website that are most relevant.

The vertical line of the F-pattern on the left-hand side of the page can help make the text more appealing. This can be done using imagery, icons, your color palette or with formatting elements such as bullet points or numbering.

An F-pattern layout is suitable for websites that mainly revolve around text. When creating a blog, for example, this website layout is applicable for both the homepage and the individual blog post pages.

best website layouts f pattern example

03. Fullscreen image layout

With an extra large visual placed front-and-center, a fullscreen image layout can result in an eye-catching and immersive homepage design. Large media features can convey a lot about who you are and what you do in as much as a glimpse. The great thing about this layout is that it looks great on mobile devices, too.

The visual you use can be anything from a photograph to an illustration or video. Either way, it should be high quality and relevant to your service, product or overall feel in order to take full advantage of this layout.

Your fullscreen image should also be accompanied by a short line of text to further explain what the site is all about. Craft a strong header or a catchy slogan to introduce what you offer as a business, exciting visitors to explore more.

A fullscreen image layout is great for businesses that want to highlight a specific niche or product and who have great visuals in their arsenal of marketing assets. For example, photography websites will proudly reveal new series or styles of photographs for sale, while a wedding website can make a heartwarming impression with a photo of the happy couple.

fulls screen website layout example template

04. Split screen layout

By vertically splitting the screen down the middle, a split screen layout creates a perfectly symmetrical balance and avoids the presence of negative space. This neat division into two parts allows for each section to express an entirely different idea—or alternatively, to support one idea from two different angles.

The website layout template shown here presents a dining experience with an eye-catching visual to the left, and text and matching vector art to the right. The layout enables both sides to fully complement each other, rather than compete for attention. This same design can also work well in cases where site visitors are asked to choose between two opposing options, such as ‘Men's’ and ‘Women’s’ categories in an eCommerce website.

To make the most of the split screen layout, consider incorporating some motion by making each half of the screen behave slightly differently. For example, you could employ parallax scrolling effects on just one side of the screen. Another option is to extend this layout onto the second fold of your design too, but swap the content on the two sides of the screen for added visual interest.

A split screen layout is ideal for websites that offer two significantly different types of content, or websites that want to evenly combine written copy and imagery. Online stores that segment users by age, gender or behavior are a good fit for this layout.

example of split screen website layout image of carrots on one side, text on the other

05. Asymmetrical layout

Similar to the split screen, this stylish website layout also divides up the website composition—but this time, the two parts are not equal in size and weight. This asymmetrical shift of balance from one side to the other creates visual movement, making the entire design feel more dynamic.

Through a non-uniform distribution of scale, color, space and width across the page, visitors’ focus can be drawn to specific elements over others. To achieve this in your own website layout, you’ll want to give certain elements more visual weight—making them bigger, bolder or brighter—so they act as focal points.

Decide which part of your content you wish to highlight. This can be anything from a photo of a product to call-to-action encouraging people to sign up. Then, make it stand out using high color contrast, enlarged proportions, and other types of visual emphasis.

An asymmetrical layout is ideal for websites that are going for the contemporary and innovative look, and are interested in driving user engagement. A business website or online portfolio of a design agency are good examples.

best website layouts example using assymetrical template

06. Single column layout

This website layout includes all of its content in one vertical column. It’s a simple, straightforward design (and in fact, it’s the one used on this very page).

Navigating a single column layout is easy —visitors immediately know to scroll down the page for more information. However, there’s one important website navigation tip to keep in mind using this layout:add a “Back to Top” button or a fixed menu to help users explore your site further.

When using the single column layout for text-heavy sites, remember to break up the text every so often with imagery, line breaks, headers or sub-headers. This is a great layout idea for long-form content websites, or websites that display content in chronological order— anything from blogs to social media feeds.

food blog template example of single column website layout

07. Box-based layout

The box-based, or grid-based website layout merges multiple pieces of content into one geometric design. With each bit of information neatly constrained into a box, the elements don’t overshadow one another—resulting in a unified look. Each box leads to a different webpage, where users can learn more about the topic they’re interested in most.

A recommended practice is to add one large featured box to serve as your website’s header and tie different boxes together below. The featured box can include the page’s title and a brief explanation of its content, along with a menu for navigation. Another tip is to curate the visuals in each of the boxes so that they work together well, creating a cohesive brand identity.

If you’re building a website on Wix, the Wix Pro Gallery is a great way to create this layout. With quality images displayed, you’ll enjoy full control over your box-based layout, starting with the number of columns and rows, down to their size and spacing.

This is an ideal layout for a website that includes many important pages. For example, it’s a good solution for a graphic design portfolio, where you can conveniently link each box of the homepage design so that it leads to a different project page.

box website layout example on art portoflio website template (with purple and yellow color scheme)

08. Cards layout

Much like the box-based layout, a cards layout uses multiple boxes or other rectangular-esque containers to display diverse content. This website layout is for the most part non-hierarchical, meaning that no one item truly stands out over the others, and all of the information is treated equally.

With all cards carrying identical features (in terms of size, font, etc.), it’s easy to import your content into each one. This results in a modular design that’s a good fit for all screen sizes, and allows for intuitive and approachable browsing despite the large amount of information, improving the user experience.

A cards layout is a great idea for a content-rich website, especially perfect for a vlog or online store.

example of cards website layout using online store template for beauty products

09. Magazine layout

Deriving inspiration from printed newspapers, the magazine website layout is based on a multi-column grid to create a complex visual hierarchy. By implementing containers that can be modified individually, a magazine layout lets you prioritize major headlines over smaller articles.

This can be done by playing with the size of your elements (larger images and headlines are the first to command our attention), placement (the article at the top of the page will usually be the first we read), or with the amount of design detail provided (an article with an added photo draws more focus than one with just plain text).

Note that the magazine layout also utilizes the F shape skim reading pattern, as mentioned earlier, catering to readers’ decreasing attention spans. Combining the F-pattern with a more complex grid enables large quantities of information to be broken down into digestible reads, while retaining a sense of order and a clean, uncluttered design.

The magazine layout is a fantastic choice for content-heavy websites such as news publications or blogs.

website layout news magazine example

10. Horizontal strips layout

This website layout breaks up the long scroll of the webpage into full-width strips. With each strip functioning as a fullscreen fold (or close to fullscreen), the diversified composition builds user anticipation with a different surprise each time they scroll.

To make each strip different from the one before, try using a different shade from your website color scheme in each strip, or by including images on some strips and written copy on others. In addition, by incorporating effects like parallax scrolling on your strip, you’ll be able to infuse this layout with a sense of motion and depth in the website background .

This layout is particularly beneficial when it comes to one page websites , especially with long scroll designs.

website layout example with horizontal strips

What are the main elements of a website layout?

A website layout typically comprises a header, containing the logo and navigation menu; a main content area, presenting the core information or services; sidebars for additional content or navigation; a footer with supplementary links and copyright information. When planning your website layout it's important to be with consistent with your use of color, typography and spacing fpr visual cohesion. These elements collectively create an intuitive and engaging user experience.

Website layout ideas FAQ

What is a good layout for a website.

A good website layout is one that is easy to navigate and understand. It should be visually appealing and engaging while highlighting your most important content. Make sure to consider your target audience, the purpose of your website, the content, the navigation and the design when you are planning your website layout.

What are some tips for designing a website layout?

What are some examples of popular website layouts, related posts.

Website launch checklist: 50 essential things to do before (and after) publishing

What is web design? A comprehensive guide

The 9 biggest web design trends of 2024

Was this article helpful?

  • WordPress Hosting
  • Domain Names
  • Website Builder
  • Create a Blog
  • Professional Email
  • Website Design Services
  • Course Maker
  • Enterprise Solutions  
  • WordPress Themes
  • WordPress Plugins
  • Google Apps
  • WordPress.com Support
  • WordPress News
  • Website Building Tips
  • Business Name Generator
  • Discover New Posts
  • Popular Tags
  • Blog Search
  • Daily Webinars
  • Learn WordPress
  • Plans & Pricing

website content layout

How to Design an Effective Website Layout (+ Ideas and Examples)

' src=

Everyone who uses the Internet looks at website layout examples every day. Yet, unless you are a designer or in the process of building your own site, few of us ever stop to think about what actually makes a good web-page structure.

You may instinctively feel it when you encounter one that is less than satisfactory. But do you know how to design a website layout that both pleases your visitors and allows you to achieve what you want with your site?

If the answer to that question is no, don’t fret, that’s exactly what this article is here for. In the following, we will define what a website layout is and which elements are important to create one. After that, we go over different types of layouts including some examples. Finally, we tell you how to choose a layout for your own website as well as how to create a simple mockup to visualize it.

website content layout

In this article:

What Is the Goal of Your Website Layout?

1. z-pattern, 2. f-pattern, 3. magazine, 6. single-column, 7. content-focused, 8. full-screen, 10. split-screen, 11. asymmetrical, consider the type of website you are building, define your goals, do your research, consider what you like, base your design on common layouts, what is a wireframe and how do you create one, additional tips, tools for wireframing, find the right website layout for your wordpress site, website layout: a definition.

Let’s start with the most basic question, what do we even mean by “website layout”? In a sentence, it means the way that the elements on your web pages (content, navigation , header, footer, and everything else visible) are arranged to present the information included within them.

In contrast to website structure , layout focuses on the individual page experience and how users consume the content on your pages. It is less concerned about leading them around your site as a whole (though, of course, that’s part of it as well).

While different web pages on your site can (and should) have different layouts, the basic structure usually stays the same. For example, the information needed on a shop page is very different from that of a product page or something like an About section . At the same time, the basic layout elements, especially header and footer, usually stay constant across most pages.

website content layout

This makes for a consistent user experience, while allowing for flexibility to deliver different types of content to users.

Good layout has the power to keep users on your page longer and engage them. Bad layout can do the opposite. In times where most visitors leave your site within ten seconds , you need all the edge you can get. Here are some things that good website layout accomplishes:

  • Makes a good first impression – Users decide within less than half a second whether they like your site or not, so you better make sure your layout is on point.
  • Naturally leads the eye to important content – The focus of every website is content, whether that is products or information. Your page structure can either direct users towards it or away from it.
  • Provides strong user experience (UX) – A good layout helps visitors find what they are looking for, both on page as well as sitewide. It also sets elements in relation to each other, determines their sequence, and gives weight to the right elements.
  • Gives guidance – Layout provides guide rails for your users. It places the most important content at the top and leads them down the page toward your goal. 

The best website layout is one that you barely notice because you can easily find every element you are looking for. It is also one aimed at your target group , their preferences, behaviors, and needs.

11 Common Types of Website Layouts

In order to give you ideas about what a website layout can look like, let’s go over some common types, the kinds of websites they are most suitable for, and examples. Be aware that for some of these, the distinction is a bit fluid. You can often apply more than one layout principle to a single site.

This Z-pattern layout is based on the way many people naturally look at website content. They start at the top left, scan to the top right, then go down to the left and to the right again.

website content layout

You can take advantage of that, for example, by placing the logo in the upper left corner and the navigation menu across from it. Your most important information, such as your heading and visuals, appears diagonally down left from that, while the call to action is to the right of it again.

This website layout is very skim friendly and most appropriate for sites that have relatively little content that you want to give much attention to, like CTAs, forms, and buttons.

You can also line up several Z-patterns with alternating elements to lead visitors down in zigzag form and keep them engaged.

website content layout

This layout is also based on common page-scanning behavior, first discovered/defined by the Nielsen Norman Group .

website content layout

It is observable on both desktop and mobile and especially for more text-heavy sites. That makes it well suited for websites with lots of options or written content that needs to be scanned quickly, e.g. news sites or search result pages. You can take advantage of it by using the left side as an anchor.

website content layout

However, it is important to note that NNG has come out in recent years saying that, while the F-pattern is a natural reading sequence, it is not good for users and websites. They state you should encourage readers to consume the rest of your content through text formatting like bullet points or visuals like icons and images.

Magazine layouts are inspired by printed newspapers and magazines and there are many examples of this kind of website out there. They usually consist of multiple columns made up of individual containers that create a complex visual hierarchy.

website content layout

In this website layout, different elements often have different weights assigned to them to show their relative importance. You can do this, for example, with bigger headlines or the use of images . This creates a multi-level hierarchy.

The goal is to allow visitors to scan a great amount of information quickly. As a consequence, it’s a great choice for content-heavy websites, especially those covering a multitude of topics. Dashboards, such as for web applications, are also good candidates. The Gazette theme is another great example for how to use a magazine layout.

website content layout

Also called box-based website layouts, grid layouts distribute elements across the page according to a clear underlying order.

website content layout

The result is a well-structured and geometrically-arranged design. It’s ideal for sites that have a lot of content of equal importance, e.g. portfolios. Linked pages often appear in the form of an image plus title and a short abstract.

If your content does not all have the same priority, there are lots of options to determine relative importance of different elements as well.

website content layout

Next in our list of website layout examples, we have a special kind of grid structure, which is also known as block layout. In it, each unit of content has their own space, is evenly spaced, and thus easy to locate. You might be very familiar with it from Pinterest and other sites that use a card layout.

website content layout

This website layout is also great for mobile design, as it rearranges well for smaller screens. If you want to use it, it is most suitable for business websites, content collections like product pages, or the display of custom post types .

Our next website layout example arranges all content in one vertical column and orders it sequentially.

website content layout

Single-column layouts are popular and easy to use, especially on mobile, where users prefer to scroll over clicking from page to page. To that end, it benefits from a back-to-top button and sticky menu.

If your content is very text-heavy, remember to break it up with images to ensure readability. As you can imagine, this website layout is frequently used for blogs and anything that has a feed-like content pipeline. Landing pages are also a good candidate.

As the name already suggests, this layout is most appropriate for websites whose primary appeal is (written) content. It’s similar to the single-column variety, often with one main column and one or more side columns for additional information.

website content layout

While the focus is on the primary content, you can surround it by other elements that you want visitors to notice after landing on the page for the main attraction. This could be a newsletter signup form in the sidebar, advertisement for your product or service, or a sales banner.

Naturally, this page structure lends itself best to blogs or other websites that mainly deal in writing. At the same time, singular pages on websites with a different layout can also benefit from a content-focused approach.

This is a website layout that covers the entire page. There are no sidebars, the screen comes across as a singular unit.

website content layout

Sometimes this design is coupled with a modular build that scrolls screen by screen, so that each section is like a separate page. It often has an image or even video in the background.

Full-screen layouts are best suited for one-page designs, storytelling, and product pages. They work best if you couple them with captivating colors and/or visuals. If you like this look, the Afterlight theme might be a good option for you.

website content layout

A special type of full-screen website layout with a large image at the top (also called “hero image”) that contains the main elements like your site title, CTA, etc.

website content layout

Hero layouts are a good way to quickly capture attention and clarify the topic of the page, especially for products. It’s a big, bold visual statement with additional information in the form of text elements.

The layout works best for product pages and ecommerce websites in general. However, some blogs also use it.

In this website layout, the screen is divided in the middle.

website content layout

Split-screen layouts provide a balanced symmetry allowing you to represent two different ideas and give them the same consideration. Alternatively, you can also show off the same idea from different angles or use it to divide ecommerce customers at the start of their journey.

Split screen is a great option for websites that use two different types of content (e.g. images and text) or provide two distinct customer journeys. It’s also suitable simply for websites that want a modern look. However, it’s not so great for text-heavy designs because it doesn’t scale well, especially on mobile.

A design similar to split screen or grid but with uneven distribution, offering an added dynamic.

website content layout

You can use scale, color, width, and more to provide different focal points and highlights on the page. However, asymmetry does not mean chaos. There’s an underlying order that provides elegance and congruity.

What are good candidates for asymmetrical website layouts?

Websites that want to go for something modern, innovative and guide the user’s attention in dynamic ways. Business websites, online portfolios, or landing pages are prime beneficiaries.

How to Choose a Website Layout

website content layout

With a better idea about what types of website layouts exist, how do you pick the right one for your website? Here are a few practical tips to do so.

As you have seen above, different website layouts are more or less suitable for different types of websites. Therefore, in order to choose the right one for you, you first need to be crystal clear about what kind of site you are building.

Business sites, shops, blogs – they all have very different focal points and demand different layouts. Clarity in this area is the first step towards making the right choice.

In addition, layout is also subject to what you are trying to achieve. When creating one, always do so with a goal in mind. What does success look like for you? What user behavior are you trying to encourage?

Knowing this beforehand allows you to make design choices that complement your goals.

Your website does not exist in a vacuum. Look at websites that are the same type as yours (e.g. blog, ecommerce, B2B, B2C, etc.) but sell different types of products/services or serve different industries/niches than your own.

When you do, identify common website layouts, best practices, what looks good, and see what you can do better with your layout.

Yes, a website is primarily there to serve other people. However, at the same time, it also needs to be something you like. If you are turned off by your own website, it’s unlikely that you will put in the energy and enthusiasm needed to run it and make it successful.

For that reason, while considering which website layout to choose, also do some introspection. Think about what you personally like and would like to see on your site.

The website layouts we discussed above are commonly known because they work. They have proven to be usable over time, are familiar to users, and ready to go. Therefore, it’s a good idea to go with one of the established layouts and then add your individual flavor to it.

Creating a Website Layout Mockup

WordPress themes are flexible enough to support different types of page layouts out of the box. But what if you are designing your own theme or are working with a website developer? In this case, you might want to create a wireframe. This helps to map out your page layout and is also good to clarify your ideas and get them onto paper.

A wireframe is like a map of your page. It’s not the finished design but something that shows its structure.

website content layout

Here’s how to create a simple wireframe:

  • Think about the user journey – Be aware what your goals are with your layout, where you want to steer visitors and what you want them to do.
  • Get sketching (and start with mobile) – Wireframes are not meant to be superfancy or detailed. Therefore, you can get started right away (see the tools below). A good idea is to start with the mobile design, then move on to larger screen sizes.
  • Create the basic framework – Take a bird’s-eye view, tackle the basic design problems first. Think about where to place the navigation and other basic UI elements.
  • Identify content areas – Mark where your content goes. For that, it’s important to know the content you will use ahead of time (both word count and images) so that you can accurately include it in the map.
  • Iterate – Even if you are satisfied with your first idea, do a few more passes to give yourself options. It often takes a while for the best ideas to bubble to the surface.
  • Test – Once you have some website layout ideas collected, it’s time to put them in front of potential users and collect feedback. The tools listed below are suitable for that as well. Getting some real-life feedback is great to improve and get closer to the final version.
  • Rinse and repeat – Do this over and over until you are satisfied with the results and ready to move to the design phase.

Pro Tip : Did you know that sites hosted with WordPress.com includes wireframe block patterns that you can use? These are patterns that are closer to a blank slate for your page without much design, but they include a basic structural layout. Just choose a wireframe pattern you like from the patterns library and customize it to suit your needs. 

website content layout

In order to create the best possible website layout, here are some tips and concepts to keep in mind:

  • Create a visual hierarchy – Decide which elements are the most important and build your website layout so that it focuses on them. Make sure that they are placed where they are easily noticeable and identifiable.
  • Use a grid – Almost all web design is based on some sort of grid. It provides order and a basic structure and scaffolding that you can order your page elements along.
  • Employ the rule of odds – Use odd numbers of elements rather than even. That way, the focus is always on one element instead of in between two of them.
  • Ensure scanability – We have already talked about reading patterns. When designing your website layout, be sure to accommodate the way visitors consume content to make it easy to catch the gist of your site.
  • Focus on the fold – The fold is where the screen cuts off when someone first gets to your site. Above it, in the part that visitors see first, you should have your most important content and call to action.
  • Use enough white space – Negative space, the part without content, is as important as the content itself. It provides space to breathe and allows the emphasis to be where you want users to focus.

website content layout

You can use different kinds of tools to build wireframes:

  • Pen and paper – Classic but powerful, easy to use, and great to quickly whip up some website layout ideas without having to learn a new tool.
  • Whimsical – A collaboration tool that works for wireframes and also allows you to get feedback. It’s also easy to use and has a free plan.
  • Invision – Similar to Whimsical. Also works for collaborative designing. Comes with wireframe templates and has a free plan for up to three online whiteboards.
  • Figma – A popular tool for design and prototyping that has free wireframe kits to hit the ground running. Use the free plan to get started without paying.
  • WordPress.com ’s wireframe patterns – If you want to start with an pre-designed wireframe template, and adjust from there, WordPress.com has some patterns to make this simple.

The layout is one of the most decisive factors for the usability of your website. For that reason, it deserves ample consideration so that you can serve your visitors in the best way possible.

Established page structures are a great way to get started. They have proven themselves over time and are able to fulfill established user expectations. While you can (and should) add your own flavor, you don’t have to reinvent the wheel. It’s also often feasible and sensible to use more than one layout in a website, especially on different pages.

When making decisions, consider your type of website, goals, industry, and personal likes. Then, use wireframing to capture your ideas for your website layout. And remember, it’s all about your users. The best layouts are those that they hardly notice.

Want more tips? Get new post notifications emailed to you.

Type your email…

website content layout

WordPress.com Gives You More

Our designers create beautiful block-based themes, with Site Editing built-in. Curious to know what some of them look like?

Share this:

About the author, nick schäferhoff.

Nick Schäferhoff is writer, entrepreneur, and online marketer. He has been building websites and writing about digital marketing for more than a decade. Outside of work, you can most often find him at the gym, the dojo, or traveling with his wife. Get in touch with him via nickschaeferhoff.com.

More by Nick Schäferhoff

Design your portfolio. Open a store. Launch a business.

You can. you will. we’ll help..

Invent the world’s greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it’s going to need a website—that’s where we come in.

Man with Shadow

WordPress.com

  • WordPress Hosting
  • Domain Names
  • Website Builder
  • Create a Blog
  • Professional Email
  • P2: WordPress for Teams
  • Website Design Services
  • Enterprise Solutions
  • WordPress Themes
  • WordPress Plugins
  • Google Apps
  • WordPress.com Support
  • WordPress Forums
  • WordPress News
  • Website Building Tips
  • Business Name Generator
  • Logo Maker
  • Discover New Posts
  • Popular Tags
  • Blog Search
  • Daily Webinars
  • Learn WordPress
  • Developer Resources
  • Terms of Service
  • Privacy Policy
  • Do Not Sell or Share My Personal Information
  • Privacy Notice for California Users

Mobile Apps

  • Download on the App Store
  • Get it on Google Play

Social Media

  • WordPress.com on Facebook
  • WordPress.com on X (Twitter)
  • WordPress.com on Instagram
  • WordPress.com on YouTube

' src=

  • Already have a WordPress.com account? Log in now.
  • Subscribe Subscribed
  • Copy shortlink
  • Report this content
  • View post in Reader
  • Manage subscriptions
  • Collapse this bar

11 Elements of Modern Web Design (And Web Design Trends to Watch)

Jeffrey Vocell

Updated: April 01, 2022

Published: September 03, 2021

Website design is changing. While some constants remain — such as the need for relevant, timely, and engaging content — additional elements that can boost website impact continually emerge.

web designer incorporating the elements of modern web design

Some of these elements help tell stories and explain the essence of your company, while others work to immediately capture user interest or improve the experience on any device. Using every element simultaneously isn’t required (this can lead to a cluttered and confusing experience), but selecting specific elements that align with your brand and website goals can help boost overall impact.

To help narrow your focus and find the best elements for your site, we’re breaking down the most important elements of modern website design you can implement to improve your site's performance.

Access hundreds of Website Themes & Templates on HubSpot

11 Modern Website Design Elements

  • Unique Typography
  • Engaging and Responsive Hero Images
  • Background Videos
  • Semi-flat Design
  • Hamburger Menus
  • High-quality Product Images
  • Card Design
  • Feature Videos
  • Mobile-Friendly Layout
  • White Space
  • Speed Optimization

1. Unique Typography

Most companies have a particular font or typography that they use to help their customers immediately identify them versus their competitors. In recent years, designers have access to a larger selection of fonts making it easier for businesses to more accurately express their brands through typography.

For example, The New Yorker is recognized instantly through its use of the unique font, Adobe Caslon Pro .

unique typography in modern web design by the New Yorker

Image Source

Why is unique typography useful in modern web design?

Typography is a singular design element that gives a uniform look across each page on a website. For instance, The New Yorker  website leads visitors from one section to another based on the typography and font sizes.

When creating your company's brand, your choice in typography can indicate subtle hints about what you represent. Is your business fun or serious? Functional or informational? Regardless of what font you choose, be sure your designer considers its applicability across browsers and computers. Choosing a font that is not supported by common browsers and computers could mean that your website will display awkwardly on different devices.

2. Engaging & Responsive Hero Images

You don't have to go far beyond the popular publishing website Medium  to see an example of a great hero image.

modern website design elements: hero images

Hero images are also often placed in the background with text and other content overlaid on top. Regardless of the approach you utilize, large images can help visually tell your story without having to rely on just text.

Why is it useful?

Hero images set the tone for your website without the need for text or video — the right image can instantly give visitors a sense of what your brand is about, what you do, or what makes you unique. As a result, it’s a good idea to both brainstorm hero image ideas and get feedback from multiple sources to see which image offers the biggest impact.

3. Background Videos

Videos that automatically play in the background can add a lot of intrigue to a page. They can be used to tell a story and significantly reduce the amount of other content that is needed to explain your business.

Take Wistia's  website, for example. When you land on their homepage a large video automatically starts playing in the background, and by clicking on the play button, you get a deeper look at the company:

background videos in web design by wistia

This background video serves as a brilliant way to get the visitor to click-through and stay on the page longer.

Background videos focus on enticing the visitor from the moment they land on your page. The video allows your visitor to understand the key points about your company without ever having to read a single line of text.

In addition, video is processed 60,000 times faster  by our brains compared to text. While people are often hesitant to read heavy blocks of text, videos appear effortless and can be consumed very quickly. It also helps that connection speeds are increasing and mobile device sizes are growing, making for better video experiences.

4. Semi-Flat Design

Simply put, flat design is any element that does not include or give the perception of three dimensions, such as shadows. Not only is flat design easier for users to understand, but it can also load more quickly on websites without complicated or overly technical elements.

Many organizations — both large and small — have shifted from realistic skeuomorphism to flat design. However, companies like Uber have put their own spin on the style by adding subtle shadows and dimensions.

As you can see in the image below, the graphic elements have a sense of depth thanks to the shadows around them without overdoing it.

sem-flat elements in modern web design by uber

Flat design helps the visitor understand your content more quickly, and adding some elements of depth can bring it to life. Regardless of whether you fully design your website using flat design or utilize shadows and other elements, it's important to be consistent throughout your website. Ensure that your homepage, product pages, and any other key sections of your website all utilize the same design cues so that visitors can instantly understand what they're viewing.

5. Hamburger Menus

modern website design elements: hamburger menus

Wondering why it's called a hamburger menu?

If you use your imagination, the three lines that are stacked on top of one another look like two burger buns and a patty. Clever.

The pages of your website should have a clear path for the user to take. Removing a busy navigation makes the experience cleaner and distraction free. This increases the likelihood that users will find the information they need to complete a desired action.

6. High-Quality Product Images

Many B2B websites are starting to display large product images on their sites to highlight different features or parts of their product, and this isn’t by accident.

To give you a better idea of what we're talking about, let's take a look at the product page for HubSpot’s Marketing Hub :

high quality product images in web design by hubspot

There is a large featured image on this page, and as you scroll down, you’ll find additional in-depth product images. The images are also responsive which aims to ensure an optimized experience for viewers coming from different devices, as we mentioned earlier.

High-quality product images help designers highlight different features of a product in a more efficient and effective way.

This approach reinforces the benefits of a feature by providing the opportunity to highlight the most valuable pieces.

These large images are also scan-friendly. They help visitors generate a solid understanding of what the different product features do by conveying them through images instead of words.

7. Card Design

With the rise of Pinterest, designers and marketers alike have become fascinated with cards. Individual cards help distribute information in a visual way so the visitors can easily consume bite-sized pieces of content without being overwhelmed.

Miiryia’s  homepage serves as a great example of card design in action:

card design as a web development element featuring Miiryia

By breaking up different pieces of content into cards, users can pick and choose which articles they want to expand. This helps to keep the homepage feeling clean and organized, without relying on a ton of text.

Card design is becoming more and more popular across B2B and B2C websites because it helps to deliver easily digestible chunks of information for users. Using this design on your site can help highlight multiple products or solutions side-by-side.

Keep in mind that your cards should be responsive. This means that as the screen size gets smaller or larger, the number and size of cards shown should adapt accordingly.

8. Feature Videos

In addition to background videos, short product or feature videos are also on trend as they can be used to highlight a specific use case. These short videos are great at bringing your solution to life, while not overwhelming the visitor with a long experience that they must sit through.

A strong example of this comes from the folks at InVision . They display this short illustrator of how easy it is to use their product by dragging-and-dropping a design directly on their homepage:

feature videos in web design by invision

B2B companies benefit from videos that explain their products to help positively influence the buyer's decision-making process.

9. Mobile-Friendly Layouts

modern website design elements: mobile-friendly layouts

First-generation websites were designed for desktops. As a result, they were built to accommodate larger monitors and point-and-click mouse control. The rise of mobile devices, however, means that web traffic may come from multiple sources — and your website must deliver the same experience regardless of user device type.

In practice, this means creating mobile-friendly website layouts that leverage the principle of responsive web design, which allows website elements such as images, text and user interfaces (UIs) to automatically rescale and resize depending on the device used to access the site.

Mobile device traffic now accounts for more than 54 percent of all web traffic worldwide . This means that if your site isn’t mobile-friendly, you could be losing up to half of all prospective customers.

Consider a desktop-friendly site accessed by a smartphone user. If text, images and buttons don’t resize to match touchscreen controls and smaller screen size, it’s almost impossible for prospective customers to find what they’re looking for — after a few misclicks they’ll likely take their business elsewhere.

10. White Space

white space in web design

White space is an often-used element of minimalist web design, but is now a critical feature of effective modern site frameworks. By balancing content such as links, text and videos with similar amounts of white space, users are naturally drawn to key aspects of your site. While there’s no hard-and-fast standard for the amount of white space you need, a good rule of thumb is to create at least some white space between every content element.

Website navigation plays a critical role in user satisfaction. If visitors struggle to find your product or contact pages, they’re far less likely to click through and begin the conversion process.

White space helps focus user attention on the elements that matter most to your business. For example, if you have a featured product image or video at the top of your homepage, separate it from further content with white space. This helps it stand alone and highlights its importance compared to the rest of your site. If you surround it with visually noisy elements, however, the focus is quickly lost. 

11. Speed Optimization

Speed Optimization in web design

Having an engaging, content-rich website won’t help drive conversions if your site loads slowly and users point their browsers elsewhere. As a result, it’s critical to optimize all elements of your site for speed to reduce the amount of time between click and content.

In practice, this means optimizing all images to balance image quality and file size. For example, while PNG images offer higher quality and transparency, they’re much larger than JPEG images; in most cases JPEGs offer the best balance between speed and quality. GIFs, meanwhile, are ideal for animated images but use fewer colors, making them less-than-ideal for static images.

It’s also a good idea to compress any files hosted on your site — many modern compression tools can significantly reduce file size without any commensurate loss of function. Site owners should additionally consider their hosting environment: For example, dedicated or VPS hosting will typically provide faster site loading speeds than shared hosting solutions.

According to statistics from Google , as page load times increase from 1 second to 10 seconds, visitor bounce rate rises by 123 percent. The search giant also notes that despite the shift to more robust 4G connections, “the majority of mobile sites are still slow and bloated with too many elements.”

As a result, even small investments into website speed optimization can pay significant dividends, especially since landing page speed is now used by Google as a ranking factor for mobile searches and Google Ads.

The Elements of Style

Modern web design requires regular evaluation to ensure your site delivers compelling visuals, engaging content and offers a unified experience for users, regardless of device. The elements listed above offer a solid starting point to create stylish, streamlined, and speedy websites that capture user interest and help drive conversions.

Editor's note: This post was originally published in August 2018 and has been updated for comprehensiveness.

New Call-to-action

Don't forget to share this post!

Related articles.

How the Internet Works: An Explanation Even Non-Techies Can Understand

How the Internet Works: An Explanation Even Non-Techies Can Understand

25+ Web Design Statistics that Are Essential to Know in 2023

25+ Web Design Statistics that Are Essential to Know in 2023

24 Best “Meet the Team” Pages We’ve Ever Seen

24 Best “Meet the Team” Pages We’ve Ever Seen

The 29 Dominating Web Design Trends for 2023

The 29 Dominating Web Design Trends for 2023

30 Proven Tips to Improve SEO Performance

30 Proven Tips to Improve SEO Performance

How to Optimize Your 404 Error Page for SEO & Conversions

How to Optimize Your 404 Error Page for SEO & Conversions

Product Launch Plan: 17 Tips to Ensure a Seamless Launch

Product Launch Plan: 17 Tips to Ensure a Seamless Launch

Does your Website Make the Grade in 2021?

Does your Website Make the Grade in 2021?

15 Stunning Examples of Small Business Website Design

15 Stunning Examples of Small Business Website Design

80 Things to Check Before, During, and After Launching a Website

80 Things to Check Before, During, and After Launching a Website

Access hundreds of website templates in HubSpot's Theme Marketplace

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

CSS Tutorial

Css advanced, css responsive, css examples, css references, css website layout, website layout.

A website is often divided into headers, menus, content and a footer:

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Advertisement

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

  • 1-column (often used for mobile browsers)
  • 2-column (often used for tablets and laptops)
  • 3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter .

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above). To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter .

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

Try it Yourself »

Ever heard about W3Schools Spaces ? Here you can create your website from scratch or use a template, and host it for free.

* no credit card required

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

website content layout

How to Create the Perfect Website Layout

Creating a great website layout is not as easy as it looks. Luckily, we’ve compiled a list of tips, steps and examples to help you create a sound structure for your site.

Table of Contents

‍ When the bones are good, the rest don’t matter! This isn’t exactly true for web design, but a layout is definitely a prerequisite for a well-performing site. Learn how to design a website layout that will boost your site’s performance!

If you’ve been looking for web design inspiration , there’s a good chance you haven’t paid attention to great website layout examples.

You’re not alone! A good layout is like salt in food - it’s only when it oesn’t work that you start to notice it.

But don’t worry, you’re in the right place. Here’s everything to know about good web design layout.

How to design a website layout in 6 steps

Website design is a long and complex process. And the foundation of it is creating a sound layout. 

1. Define goals and audience

The layout of an ecommerce website will be widely different from an online magazine layout. In order to start creating webpage layout, you should answer the following questions:

  • Who is using your website and why?
  • What steps should they take to complete their goal? 

2. Research and inspiration

Can you copy a website layout? Absolutely! Unllke images and , it’s pretty difficul to copyright a website layout.

With web design, it’s advisable to research widely. However, with layout design it’s best to stick to businesses in your industry (as we’ve explained layouts will differ significantly with different types of websites). 

In the last section of this article, we’ll show you some of the best website layout examples, so you can always start your research there!

3. Create a wireframe

A wireframe is the draft of your website layout. It’s supposed to help you decide on positioning key elements and focal points like navigation bars, content sections, and call-to-action buttons.

It should also help you establish the basic logic of your site and design a site journey map. 

4. Information architecture

The most important step in learning how to design a website layout is organizing information in a user-friendly way . This is also called information architecture, and is a part of a website designer’s scope of service .

website content layout

As the website owner you’re in charge of actually creating content. However, experienced web designers understand web users much better than you do. For example, they might suggest that some bits of information would be better presented as an infographic . Or they could advise on adding interactive elements such as motion design to help users find and absorb information more quickly. 

5. Create the layout

Using a web design software of your choice, you’re now able to create your website layout. Create all the pages and add your content (images, text, videos, buttons, etc.)

Once you’ve added the content, you should divide the web page layout into sections (header, body, footer). Use appropriate heading and font sizes to draw attention to the most important information. We’ll discuss some of the most popular website layouts below to help you get an idea of what might the right one for your business.

Don’t forget to use colors and web fonts that align with your brand identity. 

6. Navigation design

Once you have the layout for all the pages, you can connect them all in one intuitive and ebay-to-use navigation menu.

If you have a complex site, consider using breadcrumbs . These are navigational aids that help users understand where they are in the overall website.

For example, this could mean displaying filters used to search for products. Or, they could include information about the exact location of the page. In this example from Hubspot , you can see how a specific article is categorized, i.e. how you could get to this page from the knowledge base homepage. 

website content layout

7. Iterate and test

At the end of the day, your website is only as successful as its performance results (whether it’s time spent on a site, ranking, or conversions).

So, once you create a website layout, you’ll need to test it with real users. It’s best to gather feedback from real users, although you can also pay certain professionals to test out your site and decide if the layout works. 

10 popular types of website layout

Now that you have all the necessary theoretical knowledge, it’s time to be a little more practical. Let’s look at some of the most important types of layouts, with stunning real-life examples to learn from. 

1. Zig-zag layout

The name of this layout suggests the way our eyes move across the web page. Starting from the top left, moving onto top right, then down diagonally to finish in the bottom right corner (shape of a letter Z).

It’s a great landing page web layout, as it means users are lead through a logical sequence of design elements, usually ensign with a CTA button.

For example, we use this layout on our own homepage. This is one of the best website layouts for SaaS websites, as it allows users to understand what the product/service is about and how to use it.

website content layout

2. Card-based layout

A card-layout means grouping your content/design elements into cards (rectangular shapes). It’s a very popular type of layout for online stores or portfolio websites, as it allows you to display multiple products or elements in a user-friendly way.

It’s particularly popular with makeup brands, since they usually have an array of products. Glossier is just one of many website layout examples that follows this structure.

website content layout

3. Asymmetrical layout

Do you like breaking rules? Then a website layout where “everything goes” might be the right choice for your professional website.

If you’re wondering “can you copy a website layout” things may be a little more complicated with this type of layout. The reason for it is that each asymmetrical layout is different and unique. Sometimes these websites intentionally look messy and out there. But an asymmetrical layout can also mean just a slight bending of the rules. 

NewFlight is a film and digital agency that uses asymmetry in their web design very effectively. All the proportions of split-screens and grids are just a little bit off to allow for a more dynamic visual experience. 

website content layout

4. Full-page layout

This is a type of minimalist layout that you don’t see that often nowadays. But if done well, a full-page layout can be truly effective.

Just like the name suggests, this layout means packing all the information in one singe plage view (without needing to scroll).

This is one of my favorite website layout examples, from a web and design agency called Curious & Company. 

From their home page, to About Us and Services pages, each one is presented in a full-page view. However thanks to truly creative motion design they are able to provide all the necessary information and keep users highly engaged!

website content layout

5. Parallax layout

Parallax effect is a popular website design technique. It means creating an illusion of depth by moving different layers of the website at different speeds. This technique adds a dynamic and engaging element to the design.

If you opt for this type of layout/website design make sure to hire a professional web designer and developer who can ensure everything is optimized and runs smoothly.

If you’re a car fanatic (and even if you’re not), I recommend checking out the PORSCHEvolution website.It’s a great example of using parallax effect to create a fun and engaging website that shows you the history of Porsche’s iconic cars.

website content layout

This website also makes it very easy to scroll through thanks to a fixed sidebar. That way users can enjoy the full experience and travel through decades of evolution from the 1930s onwards. Or they can click and jump through any decade they want.

6. Magazine layout

This type of layout is essentially a mix of other types (e.g. cards, single-colum and zig-zag). As the name suggests, you’ll often see it with publication websites or blogs. 

Marie Claire’ s homepage combines sections for a full-screen view (featured post) and groups of cards around a similar topic. There is also a section with a split-screen layout.

website content layout

7. Single-column layout

This type of website layout is probably the most common with a majority of business websites. It’s very simple (all the content is arranged in a single column), but can be very effective

The use of white space is especially vital here, to break up the content and ensure the experience is not monotonous for the user.

It’s also an ideal website layout for blogs, as it mimics the experience of reading on paper. That’s why big blogs like Medium always employ this website layout.

website content layout

8. F-pattern layout

Like zig-zag, this layout is focused on how users consume web content. They start by reading horizontally from left to right, and then move onto scanning the website vertically (scrolling down). They finish with taking in short bits of information (the smaller dash on the letter F).

It’s another type of layout commonly used for blogs and publication sites (or any text-heavy site for that matter).

website content layout

9. Split-screen layout

If you want to hone in two major points about your business, this is the type of web design layout to go for. 

A split-screen layout means having two distinct sections in full-view. It’s often a combination of text and an image, but there are also other approaches you can use.

Engine Themes is a web design and development agency, and thanks to a split-screen layout, it’s immediately obvious that these are the two types of service they offer. They made the site extra special and engaging, by adding an interactive element.

website content layout

10. Hero layout

Last, but not least is a common type of layout for SaaS businesses or product landing pages. It usually features a hero image (or full-screen photo), followed by content arranged in a zig-zag or similar way.

It’s the best layout to use to help you highlight your unique selling point or value proposition . Since large images can be overwhelming, it’s very important to use plenty of negative space in the rest of the website to achieve visual balance. 

Luna.io has a striking hero image that helps to illustrate their service (they bring tech solutions to optical businesses and medical professionals). The human face is actually always a good way to grab the viewer's attention, but don’t use stock photos as is. 

Instead, add visual elements like frames, lines, etc. to make sure the photos fit your brand identity.

website content layout

Further reading on web design

We hope this provides you with some of the most important information on how to design a website layout. Remember that choosing the right type of layout will highly depend on your content and the type of business.

For further tips on how to make a website , make sure to check out our articles on w hat makes a good website , and the cost of web design . 

website content layout

Having lived and studied in London and Berlin, I'm back in native Serbia, working remotely and writing short stories and plays in my free time. With previous experience in the nonprofit sector, I'm currently writing about the universal language of good graphic design. I make mix CDs and my playlists are almost exclusively 1960s.

Our best web designs

Enjoyed the read? Get inspired with some of ManyPixels best work by downloading our web design portfolio.

Wait... there’s more!

Enjoyed the read? Subscribe to our mailing list for all the latest tips, how-tos and news on graphic design and marketing.

website content layout

bitcatcha

Bitcatcha > How To Make A Website > 13 Best Website Layouts That Always Work (With Examples)

13 Best Website Layouts That Always Work (With Examples)

website content layout

In order to build anything successful, you need a plan and a foundation.

If you’re building a home, you start with a blueprint to show the location of the rooms, their sizes, and the home’s final structure. The same goes for building a website .

While assets like images, video, and copy are vital to a website’s success, its layout can make or break it. It makes no sense to put brilliant copy and a gorgeous image on a cluttered and poorly-designed page, does it?

Today, we’ll look at 13 examples of the best website layouts, some best practices, and why mobile responsiveness is key.

Table of Contents

  • What is a website layout?

13 Different Types of Website Layouts

  • Featured image
  • Full-screen photo
  • Split screen layout
  • Asymmetrical layout
  • Radial symmetry layout
  • Grid layout
  • Card layout/block layout
  • The F layout
  • The zigzag/z shape layout
  • One/single column layout
  • Magazine layout
  • Single-page layout
  • Fixed-sidebar (fixed navigation)

Best Practices for a Great Layout

  • Above the fold
  • Navigation bar

Mobile Responsiveness

  • What is it, and why is it important?
  • How to pick the right layout for your site

What is a Website Layout?

A website’s layout is the framework that determines the website’s structure and design. It dictates how text and images are presented on the page, and plays a role in the user’s experience (UX) .

A layout can mean the difference between someone taking your call-to-action or clicking off of your website. After all, no one is going to fight to subscribe or give you money! Your website needs to make that process effortless.

So – here are 13 of the best website layouts that keep users engaged and coming back for more.

1. Featured Image

featured image

One of the most common and easy-to-implement website layouts is the featured image layout.

This layout allows you to incorporate a large image that acts as an anchor for your reader’s attention on your home page. The image is usually a powerful one that delivers the message of your brand/company.

This layout works especially well for people-centric websites like freelancers or solopreneurs.

Helen Gebre , a copywriter for hire, does this well with an excellent featured image on her website (image above). The image is warm and inviting and makes you want to find out more about her. In addition, there’s a generous amount of white space on her site, so it doesn’t feel crowded. The navigation bar is simple, and visible.

Featured image website layouts work great for just about any platform. What you want to make sure you do is select the best possible image to hook visitors and make them want to stick around.

2. Full-Screen Photo

fullscreen layout

The Full-Screen photo layout uses an image/photo that takes up the entirety of the screen with text and menus on the top of it.

It works to deliver a powerful message that drives home your product/service to the viewer. The additional copy and use of call to action can elevate the image or bring it to life.

However, a downside of this layout is that some users can fail to realize that there’s more content on the page when they scroll down. So it’s important to incorporate a way for them to interact with the site and not click away.

You should also consider how these images look on mobile devices as well as desktops.

Prometheus Fuels (image above) is a great example of using a full-screen photo (or in their case a GIF) on your website. The photo ties in perfectly with the company and what they do, and the copy that accompanies the image fills in the blanks.

The tucked-away navigation bar in the top right-hand corner makes for easy access if you ever need it. There’s also an arrow showing that there’s more to see when I scroll down the webpage.

3. Split Screen Layout

split screen layout

The split-screen layout works to show your reader the best of both worlds, or how 2 things can work together. This can refer to either a vertical/horizontal split on your webpage. It allows the reader to make quick choices and helps to secure engagement right off the bat.

Split-screen layouts work well for eCommerce stores with varying sections such as men or women, as well as portfolio websites, business websites, and more.

Adam Dannaway used the split-screen layout on his website well (image above). He’s a designer and a coder and uses the split-screen layout to display a preview of both skill sets at the same time, giving you, the user, the option to decide which to choose. It translates well on mobile devices too and invites you to engage while guiding you to what you need.

An important reminder, however, is that when you’re using the split-screen layout – don’t go cramming too much information on each side.

You only need to add the right amount to get them to choose.

4. Asymmetrical Layout

asymmetrical layout

While the split-screen layout offers equal space between both sides of the screen, the asymmetrical layout uses imbalance to emphasize a particular area of the page.

The section with more screen real estate will attract greater attention, and you can use this to your advantage when presenting your information to your new, and returning users.

These website layouts are versatile and work well for a variety of types of website such as businesses, freelancers, and in some cases, eCommerce websites.

NewFlight (image above) is a film and digital agency based in London that uses the asymmetry layout throughout its website (vertical asymmetry on the Homepage and diagonal on the others) to capture your attention while leading you through the site, so you can get exactly what you need.

Asymmetry can be used on mobile devices, however, its impact is not the same as when it is used on computer screens. It’s important to adapt them for mobile users.

5. Radial Symmetry Layout

radial symmetry layout

The radial symmetry layout is rather uncommon, however, when used correctly, it can have a dazzling effect.

It has a focal point in the center of the page with related items radiating from it in a circular formation.

The Vlog.it homepage uses the radial symmetry layout to display the different videos that the creator, Marco Rosella, has collected.

The layout does catch the eye, however, it is not widely applicable to many businesses and its adaptation to mobile platforms is limited as well. It seems to work best for websites that present information without any call to action.

6. Grid Layout

grid layout

Easy browsing is one of the best things about a well-designed website and the grid layout offers this in spades. It allows you to display multiple interests on one page with an equal distribution of the text, pictures, and videos to show the various types of content.

You see the grid layout on video-sharing websites such as YouTube. It works well for mobile devices too and allows for the same browsing ease as it does on a desktop.

As a tip, make sure you choose the best images for each tile on your grid and make the most of the limited text space available, since this will serve as a preview to users.

M.A.P. (image above) utilizes the grid layout to display artists’ work. Each image gets the same room and necessary information listed to invite you to view more.

7. Card Layout/Block Layout

Card layout

Card layouts are widely used across the web. The cards serve as mini containers of information such as text and images, and sometimes even have additional options such as a save for later feature.

They allow you to present users with just enough information to help them make their choice or click through to view more. One of the best things about the card layout is that it’s dynamic, and you can change the cards’ style, size, and order to suit your website.

This also makes the card layout great for mobile screens as they adapt accordingly. The card layout is often used on eCommerce sites as it’s a great way to present information on different items for purchase.

Pinterest (image above) is a great example of the use of the card layout. It orders the posts perfectly and the varying sizes fit the post type accordingly, whether it’s an image, a video, or an infographic.

8. The F Layout

f layout

The F Layout is a website layout that follows another common scanning pattern of people’s eye movement.

We scan a lot of pages in an F pattern: where our eyes start in the top-right corner of the page, go to the next line, and do the same again – the cycle goes on until we find something that catches our attention.

To be fair, this pattern can also follow the shape of an E as well.

Nordstrom (image above), like many other eCommerce websites, uses the F layout to let users easily scan available items and pick and choose accordingly.

9. The Zigzag/Z Shape Layout

zigzag layout

The zigzag layout is the one that fits the way how people (typically from Western cultures) naturally scan a webpage: in a Z formation!

Think about it, your eyes go from left to right, then down to the left then back to the right again.

This habit makes the zigzag layout work great for a variety of websites.

Evernote (image above) uses the Z shape layout on its homepage. When you look at it, there are two calls to action right there on the homepage that you can’t miss because of how you’d naturally scan the page.

The Z shape layout works best for computers because of the size of their screens, you’d need to have your website adapted for mobile to see results.

10. One/Single Column Layout

single column layout

A common and simple layout to use, the single column arranges the website information in one column. It makes for easy browsing and navigation as everything is right there where you need to find it.

It works well for blog posts, long articles, research papers though may be less effective for eCommerce sites than the card or F layouts.

This layout’s design also makes it great for smaller screens such as the ones on your phone or tablet. Medium (image above) uses the single-column layout for its articles, making them easy to read on any device.

11. Magazine Layout

magazine layout

The Washington Post uses the magazine layout for its website.

The magazine layout is often a fusion of other layouts designed to deliver a unique experience to readers. It’s inspired by the traditional print layout and allows for headlines, images, and sometimes a bit of the body text for each post.

While this layout works well for magazines/news websites, it can be difficult to adapt for mobile screens.

A solution for this is making some stories larger than others and allowing for ease of navigation. Mobile navigation cannot be ignored, especially for websites that use magazine layouts, given that roughly 57% of adults get their news through mobile devices.

12. Single-Page Layout

single page layout

Another uncommon layout is a single-page layout. This one’s pretty unique because it incorporates multiple actions into one page and the content is dynamically loaded using JavaScript. A single-page layout most people are familiar with is Gmail.

Single page layouts work well for both desktops and mobile devices.

This layout is best for simple portfolios and event sites, such as The Dockyard Social (image above),the website for a “street food warehouse.” Everything is loaded at once, which allows for easy navigation and use. It’s also quite responsive on mobile devices too, which is great because many people would use their phones to research an event/place to eat.

However, while the single page layout is great for say a portfolio or an event, its simplicity in design can make this layout unsuitable for a news or eCommerce site.

13. Fixed sidebar (or fixed navigation)

fixed sidebar

As we’ve mentioned, a website’s layout plays a critical role in not only presenting information, but also how the user navigates the website.

The fixed sidebar layout has (surprise surprise) a fixed sidebar on either the left or the right of the page. This keeps the sidebar in view and accessible as users scroll down the page.

Nice Cream (image above), a website for handcrafted ice cream (sounds delicious by the way), uses the fixed sidebar well. The sidebar is simple and cute, it fits the website’s aesthetic perfectly with each category being in a rounded rectangle.

When you’re using a fixed sidebar layout, ensure that it adjusts for users on mobile devices and for those who use minimized windows, so as not to take up too much screen real estate.

Now that you’ve decided on your website’s layout, here are the two best practices to use when designing your website.

1. Above the Fold

When you’re designing your website, it’s critical to put all the important information above the fold, i.e. it is displayed before your users scroll down. This means that visitors have everything they need as they land on your page. Things to remember are:

  • CTA (Call to action)

Having all of these above the fold can help convert more users more quickly.

2. Navigation Bar

A navigation bar acts as your website’s map and allows users to easily find what they need and take the action that you need them to take.

As we’ve said, no one is going to fight to give you money. If navigating your website is confusing, they’re going to leave and go to a website that doesn’t give them a headache.

As such, you want a navigation bar that’s simple with enough categories for easy traversal.

Also, don’t clutter the bar with every single category! Employ subcategories and a search bar to help visitors better navigate your website.

What is Mobile Responsiveness & Why is it Important?

As smartphones have become more essential to our everyday lives, many people do their browsing, watching, and shopping on their phones.

Since you can’t control the device that your visitors will check your website on, you need your website to provide the best possible experience , no matter the device.

‘Responsiveness’ is when the layout and content of a website change based on the size of the screen the visitor is using. A responsive website will automatically adapt to the device you’re visiting it on.

When you’re designing your website, consider how it will look on the 4 main screen types:

  • Regular desktop/laptop monitors
  • Widescreen monitors/TVs
  • Mobile phones

The easiest way to do so is to use a good website builder that takes this into account. Our top choice is always Zyro , since all their web templates are fully responsive.

Mobile responsiveness is especially important given the statistics regarding mobile browsing and eCommerce.

According to Oberlo , 48.67% of total web visits in the US are from mobile devices, – that’s nearly half! As for eCommerce, mobile eCommerce sales sit at a current market share of 72.9%.

That’s too much to miss out on for any business!

Wrap up: How to Pick The Right Layout For Your Site

A website is like the digital home of your business.

The same way you’d want your brick and mortar store to be gorgeous, functional, and hospitable – so your website should be too.

Your website’s layout is critical to your visitor’s experience, and we hope this list helped you find the best layout for YOUR site.

If you’re a freelancer and need something simple yet effective then a Feature Image Layout or a Single Page Layout may be up your alley. If you’re looking to sell your creations online, then maybe the Grid or Card Layouts are the ones you’re looking for.

Once you know the layout you want to use on your website, check out our full guide on how to make a website .

website content layout

10 Top Website Layouts: Examples You Can Copy & Learn From

10 Top Website Layouts: Examples You Can Copy & Learn From

Zuzanna Sobczyk

Even the best web designers in the world often stand in front of this one problem:

“How do I make my client’s website stand out?”

Today, we’ll show you how. All thanks to our wonderful website layout design examples to inspire your next project.

Ready? Let’s jump right in.

What is a website layout?

A website layout refers to the arrangement and organization of various elements on a web page. It includes the positioning of text, images, buttons, navigation menus, and other content within the webpage’s overall structure. The layout is the visual representation of how the different components of a website are structured and presented to the user.

How to create powerful website layouts? Top tips

Designing game-changing website layouts takes a lot of time.

However, with our tips, you can optimize this process:

Understand your audience

Research your target audience to understand their needs, preferences, and behaviors . Tailor your layout to cater to their expectations and make it user-friendly.

Focus on clear navigation

Create intuitive and straightforward navigation. Make it easy for users to find what they need. Use clear menu structures and well-labeled buttons.

Prioritize visual hierarchy

Take advantage of visual hierarchy to guide users’ attention. Highlight important elements, such as call-to-action buttons, using size, color, and positioning.

Responsive design is a must

Make sure your layout is responsive and adapts seamlessly to different devices and screen sizes. Mobile users are increasing , so make sure they have a great experience too.

Whitespace is your friend

Utilize whitespace (negative space) strategically to create a clean and uncluttered layout. It will help you enhance readability and draw attention to key elements.

Consistency is key

Maintain consistency in design elements, such as fonts, colors, and buttons, throughout the website. Consistency fosters familiarity and improves the overall user experience .

A/B test and iterate

Continuously test different layout elements using A/B testing . Analyze user behavior and feedback to make data-driven improvements over time.

Top website layout examples

Now that you know how to create amazing website layouts, let’s inspire you with real life examples:

Single column layout

A simple and clean layout where all content is presented in a single vertical column. This design is often used for blogs, portfolios, and landing pages. It prioritizes readability and easy navigation.

  • readable and easy to navigate, as all content is presented in a linear format
  • works well for mobile responsiveness since content naturally adapts to smaller screens
  • provides a focused and straightforward user experience
  • limited visual complexity and might not be suitable for content-heavy websites
  • may require more scrolling if there’s a lot of content
  • less flexibility in organizing content compared to multi-column layouts
  • blogs and articles where readability is essential
  • portfolios to showcase creative work in a simple and elegant manner
  • landing pages for targeted promotions or product launches

Grid based layout

Websites with grid-based layouts arrange content and images into a consistent grid structure. This design is visually appealing and effective for showcasing products or portfolios. It allows for a balanced distribution of content across the page.

  • allows for visually appealing and organized content presentation
  • facilitates easy comparison between different items in the grid
  • great for displaying a collection of products or images
  • can be challenging to maintain a consistent look with varying content sizes
  • might not be the best choice for content-heavy websites with a lot of text
  • less suitable for long-form storytelling
  • portfolio websites for artists, photographers, or designers
  • e-commerce websites to showcase products with images and brief descriptions
  • image galleries and creative portfolios

Hero image header layout

This layout features a large, eye-catching image or video at the top of the page (hero section). The hero section is often accompanied by a headline and a call-to-action, immediately capturing visitors’ attention.

  • grabs visitors’ attention immediately with a visually captivating hero section
  • strong call-to-action placement can drive user engagement
  • ideal for promoting a specific product or service
  • might slow down page loading times if the image/video is large
  • can be challenging to balance the hero section’s size with other content
  • content below the fold might get less initial attention
  • landing pages for marketing campaigns or product launches
  • event websites to highlight important information and registration details
  • websites that prioritize visual storytelling

Card-based layout

Popularized by platforms like Pinterest, card-based layouts use modular content blocks, or “cards,” that present individual pieces of content, such as articles, images, or products. Cards can be rearranged dynamically based on user interactions.

  • allows for modular content presentation and dynamic rearrangement
  • encourages user engagement with interactive and clickable cards
  • provides a clean and organized look for content-heavy websites
  • may not be suitable for long-form content like articles or blog posts
  • too many cards can result in clutter if not well-organized
  • not ideal for conveying a linear narrative
  • social media platforms that display user-generated content
  • e-commerce websites to showcase products with brief descriptions
  • portfolio websites to present various projects or case studies

Split-screen layout

In this layout, the screen is divided into two or more sections, each displaying different content. It’s useful for showcasing contrasting elements or presenting a before-and-after scenario.

  • creates a visually striking and modern design aesthetic
  • allows for presenting contrasting elements side by side
  • can tell a story effectively through visual juxtaposition
  • content might not be as visible on smaller screens or mobile devices
  • requires careful design and balance to ensure a seamless experience
  • not suitable for all types of websites or content
  • before-and-after scenarios for home improvement or product comparisons
  • websites aiming to showcase two different products or services equally
  • creative agency websites to display their work and approach

Long-scrolling Layout

Long-scrolling layouts eliminate the need for multiple pages by placing all content on one long page. This approach is ideal for storytelling, as users can scroll through sections seamlessly.

  • enables seamless storytelling and continuous content flow
  • reduces the need for multiple page loads, improving user experience
  • allows for creative, engaging visuals and animations
  • navigation might become challenging if the menu is not easily accessible
  • users might miss some content if they don’t scroll far enough
  • performance issues can occur with extensive content and media
  • landing pages for products or services that need detailed explanations
  • storytelling websites for interactive narratives or immersive experiences
  • single-page websites for events or temporary promotions

Magazine Layout

This layout resembles a traditional magazine, with a mix of large visuals, headlines, and snippets of content organized in columns. It’s well-suited for content-heavy websites and online publications.

  • ideal for content-heavy websites with a lot of articles or blog posts
  • provides a structured and organized presentation of content
  • allows for highlighting featured articles or posts
  • can be overwhelming if not well-organized and visually balanced
  • might not be the best choice for websites with fewer articles or content
  • requires careful attention to typography and layout to maintain readability
  • online magazines and news websites
  • content-rich blogs with various categories and topics
  • websites that prioritize content discovery and exploration

Fixed Sidebar Layout

A fixed sidebar layout keeps the navigation menu or other essential elements fixed as users scroll down the page. This ensures easy access to key features throughout the browsing experience.

  • ensures easy access to important navigation elements throughout the page
  • helps users maintain context and orientation as they scroll
  • works well for web pages with a lot of content and sections
  • can reduce the available screen space for content on smaller screens
  • might cause visual clutter if not designed and positioned properly
  • requires extra consideration for mobile responsiveness
  • information-heavy websites with multiple sections and subpages
  • corporate websites with comprehensive menus and navigation options
  • websites with complex navigation and features.

Full Screen Photo Layout

This layout uses a fullscreen image or video as the background, creating a visually striking and immersive experience.

  • creates a visually stunning and immersive user experience
  • grabs immediate attention and leaves a lasting impression - great focal point
  • ideal for websites that rely heavily on visual storytelling
  • large media files can slow down page loading times
  • text readability might be compromised over busy backgrounds
  • not suitable for all types of content or websites
  • creative portfolios for artists, photographers, or videographers
  • event websites aiming to create an impactful first impression
  • landing pages for products or services that rely on strong visuals

Minimalist Layout

A minimalist design focuses on simplicity, using ample white space, clean typography, and limited color schemes. It helps highlight the most crucial elements and maintain a clutter-free appearance.

  • emphasizes essential elements and reduces distractions
  • provides a clean and modern design aesthetic
  • ensures a faster loading time and better performance
  • might lack visual interest for certain types of websites
  • requires careful attention to typography and whitespace to maintain readability
  • less suitable for websites that need to convey a lot of information
  • personal portfolios for creatives who want to showcase their work front and center
  • SaaS (Software as a Service) websites aiming for a modern, streamlined look
  • brand websites that emphasize simplicity and elegance

Other layouts worth mentioning: single page layout, asymmetrical layout, featured image layout, fixed header layout, infinite scroll layout, sticky elements layout, tabbed content layout.

Boost your website layout with LiveSession

When it comes to boosting your own website layout, there is undoubtedly no better solution than LiveSession .

This exceptional platform offers a comprehensive set of tools and features that can transform your website’s performance and user experience like never before.

Here’s how we can help you:

By using session replay , LiveSession lets you watch actual user interactions to identify pain points and usability issues. It guides data-driven design decisions for a good website layout.

The event-based product analytics help track user actions, optimizing your layout to navigate visitors towards key conversion points effectively.

With seamless integration of data from various tools like Google Analytics and more, LiveSession provides a comprehensive view of your website’s performance. As such, it ensures a user-focused design based on real data.

Click & heat maps visually display user interactions, optimizing your layout for attention-grabbing content and improved navigation.

Testimonials from satisfied customers in different industries confirm LiveSession’s exceptional capabilities for continuous improvement and user-friendliness.

What’s more, privacy is a top priority, as we offer full control over recorded data, ensuring GDPR and CCPA compliance.

Let us empower you to create a visually appealing, engaging web page layout that drives higher conversions and enhances the overall user experience.

Sign up for a free trial today and experience the transformative impact of LiveSession on your website.

Final words

As Trish Parr once said, “if you think math is hard, try web design”.

We hope that we proved this claim wrong.

The layout aspect of web design doesn’t have to be challenging.

You just need a backup of useful examples for time of reduced creativity.

P.S. And to further boost your layouts, use LiveSession .

Want more knowledge?

Get more tips and insights on UX, research and CRO. Zero spam. Straight to your inbox.

I have read the privacy policy and I accept newsletter terms and conditions .

Zuzanna Sobczyk

Content Designer

website content layout

How to tailor your website style guide to your brand (with examples)

Explore the intricacies of a website style guide, its pivotal role in the quality of your website, and how to create one for your brand.

website content layout

Webflow Enterprise gives your teams the power to build, ship, and manage sites collaboratively at scale.

website content layout

An effective digital footprint is about more than aesthetics — it involves consistency, brand representation, and harmonious design.

Every online interaction shapes your brand — even minor inconsistencies can erode trust and dilute your identity. Design nuances, the subtleties of color choices, and the cadence of your brand voice play fundamental roles in crafting memorable user experiences.

And since online impressions form within seconds, every detail, like a button’s hue or your choice of header font, is important. To ensure cohesion across all platforms, website style guides are an indispensable tool.

What’s a website style guide?

A website style guide is a document that outlines a brand’s online identity. It systematically details design elements (typography, color schemes , visual standards) and brand guidelines, ensuring every aspect aligns with a brand’s vision for itself.

What’s the purpose of a website style guide?

Beyond establishing uniformity in website aesthetics, a website style guide establishes a seamless user experience. As people navigate your site, consistent design elements, defined by the design style guide, offer them a smooth, intuitive journey.

For example, a typography style guide that specifies font types, sizes, and spacing keeps content legible and engaging while reflecting your brand’s tone and reinforcing its identity. Proper typography in web design also shapes how visitors perceive and connect with your content by guiding them to crucial information and calls to action (CTAs). Thoughtful typography choices also build credibility, making users more likely to trust and interact with your brand by signaling your attention to detail and professionalism .

A website style guide, which is a core component of a larger overarching branding style guide, aligns webpage design elements, such as colors and images, to resonate with your brand’s ethos and mission. So a brand championing sustainability might opt for images that showcase nature, while a tech company might lean toward sleek product photography and modern urban landscapes. Similarly, a wellness brand might opt for a calming blue color palette to evoke peace and tranquility, while an energetic startup could use vibrant reds to signal excitement.

These deliberate and informed design choices, guided by the style guide, create a cohesive visual narrative and forge deeper emotional connections with users, solidifying your brand’s identity and driving engagement.

Benefits of creating a website style guide

Creating a style guide before you design a website guarantees consistency, speeds up decision-making, and promotes a unified user experience that balances aesthetics with functionality. Here’s how a website style guide improves your site’s development and design.

Streamlines designs

Instead of constantly revisiting design choices, teams can quickly reference the guide for clear directives to:

  • Eliminate ambiguity. A detailed style guide outlines precise specifications for every design element, like the exact shades and hex codes for colors and the typefaces for headings and body text. This clarity helps teams avoid guesswork and work more confidently so they can steer clear of creative roadblocks.
  • Accelerate design revisions. By acting as a definitive reference, the style guide promotes consistency across all design aspects, like spacing and layout. This accelerates the design process by reducing frequent revisions to ensure rapid and accurate results.

Enhances collaboration

Clear guidelines enable collaboration, especially when a project involves multiple roles and contributors. This is because they:

  • Provide a unified vision. By laying out standardized design principles, a style guide ensures every team member takes a consistent approach toward the same goal. This fosters cohesive branding and guarantees that the final website presents users with a consistent and professional image.
  • Minimize design inconsistencies. Vague directions can lead to misunderstandings, causing inconsistencies in the final design. By clearly specifying design requirements, a style guide prevents misinterpretation and fosters focused, productive collaboration among team members.

Provides brand cohesion

Disjointed visual designs can confuse and alienate users, but a style guide prevents this by:

  • Harmonizing brand messaging. Rather than focusing solely on website visuals like logos and specific graphics, a style guide ensures every element — like button styles and your copy’s tone — complements others, providing a consistent experience across all webpages.
  • Boosting user confidence and recognition. Cohesive designs help users trust your brand because they find reliability in familiar visuals. By consistently applying design elements, brands make themselves identifiable and memorable, enhancing user confidence and loyalty.

How to create a style guide for your website: 6 steps

Every website style guide will differ, and tailoring it to your brand’s unique needs and characteristics is essential. To create an effective, impactful, and personalized style guide for your site, follow these six steps.

1. Study and understand your brand

Begin by exploring your brand’s history, vision, and values. This foundational understanding ensures your style guide authentically captures the brand’s essence. So if your brand emphasizes sustainability, every design choice should reflect this principle, whether that looks like earthy color tones or icons representing green practices.

2. Establish typography and color rules

A screenshot of Noah Raskin’s style guide and UI kit.ot of Noah Raskin’s style guide and UI kit.

‍ Typography and color articulate brand identity and influence the legibility of website content. A luxury brand, for example, might use an elegant serif font paired with a subtle or monochromatic color palette to convey refinement and exclusivity. Conversely, an artisanal bakery might use fonts that look like handwriting and a pastel color palette to emphasize their homey, handcrafted appeal.

Establish rules for both by specifying font pairings , families, weights, and sizes, and dictating your website’s primary, secondary, and accent colors. This solidifies your brand’s identity and ensures it evokes specific emotions in visitors.

3. Define brand voice and imagery

A clear brand voice anchors your content, humanizing your brand to convey its unique personality. To define your brand voice, revisit your mission, vision, and core values, then summarize these attributes into a series of adjectives, like “professional,” witty,” or “compassionate,” and choose all that resonate with your brand.

From there, highlight preferred language styles, decide whether to use industry jargon, simple language, or a mix, and create sentence and phrase examples that embody this voice. This offers clarity and provides a foundation for your team to build on.

Remember: Imagery communicates faster than words. Establish brand-aligned visuals by outlining:

  • Image styles. Specify whether images should be real photos, illustrations, or a combination, and detail the desired mood or setting. A travel agency might prefer vibrant, outdoor scenic shots, while a bakery might prioritize high-quality product shots.
  • Color schemes. Outline how your established color combinations translate into imagery. If you’re a health and wellness brand, use colors that lean toward serene, blue backdrops or vibrant, earthy greens.
  • Representation. Specify whether images should showcase a variety of ages, ethnicities, and other demographic factors relevant to your brand’s ethos.

website content layout

Learn best practices for integrating the workflows between design and development in this free webinar.

4. Detail iconography and user interface elements

A screenshot of button and link guidelines in Noah Raskin’s Style Guide & UI Kit template.

Carefully curating icons and other user interface (UI) elements, like buttons, forms, and sliders, enhances navigation and engagement by simplifying the user experience.

When selecting ones for your style guide, start by identifying your platform’s core actions and themes, like shopping carts for ecommerce sites or profile badges for community forums. Then, select universally recognizable icons for them to ensure they align with your brand’s identity. If your website leans toward a specific design language, like minimalism , use icons that align with this style throughout. This uniformity simplifies user interactions and reinforces a singular brand image.

The same principles hold true for UI components. If your style dictates blue, rounded buttons for primary actions, provide exact specifications — the shade of blue, the border radius, and the chosen font. By leaning into detail, you orient design and development teams to produce harmonized results.

5. Guide interaction and user navigation

Detail how interactive elements like buttons, hover effects, and animations should appear and function.

If your brand identity is minimalist, your style guide might dictate subtle animations and a streamlined navigation menu. In contrast, a skin care brand targeting younger demographics might choose bold, attention-grabbing animations .

The design of input forms, whether it’s a quick email sign-up or an in-depth survey, should also be outlined in your style guide. This ensures your website communicates your brand’s identity while prioritizing user-friendly navigation.

6. Dictate layout and spacing principles

A screenshot of a grid layout guideline template by Nikolai Bain.

Define your website’s structural layout by choosing appropriate grid systems, setting patterns for different pages, and establishing a visual hierarchy . Identify which elements captivate users first and establish where your content should flow. This lets you create pages that naturally organize your content and guide users through it seamlessly.

For spacing, outline the specific distance that elements should have between margins. This attention to detail enhances readability and accessibility by eliminating visual clutter. A polished appearance also conveys professionalism and fosters user trust by signaling your attention to detail and dedication to the user experience.

Enhance your brand’s identity with Webflow

Ready to create your website’s style guide and harmonize your site’s design? Explore free, downloadable resources to maximize your website’s success, browse over a thousand site templates designed by our talented community, and visit Webflow University for free courses on web design and development.

Don’t leave your brand’s identity to guesswork. Harness the tools and resources on Webflow to create a living website style guide and digital platform that resonates with your brand identity. Tools like our Designer and commenter roles make it easier to collaborate on designs while adhering to your website’s style guide. Get started building your website — and its style guide — with Webflow today.

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Subscribe to Webflow Inspo

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Related articles

website content layout

Effective brand communication: 5 winning strategies to delight your audience

Discover what brand communication is and its importance for your enterprise. Uncover five proven strategies and tips to enhance your brand communication.

website content layout

7 strategies for boosting website engagement and user interaction

Learn the nuances of website engagement, its pivotal role in digital success, and proven strategies to amplify user interactions for lasting brand loyalty.

website content layout

Navigating website development: The power of a website project plan

Explore the pivotal role of a website project plan, which guides in-house teams from initial concepts to a successful launch and effective site management.

website content layout

6 key steps to crafting a brand messaging framework that builds trust

Strategic brand messaging allows companies to communicate their values and build relationships with customers. Follow these 6 steps to develop a framework.

website content layout

How to create a design system: A beginner's guide

What is a design system, how do you build one, and what should you consider during the process? We have the answers you need.

website content layout

Meet the new Webflow

A brand refresh and tribute to our community.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Transforming the design process at

  • Interactions
  • Localization
  • Figma to Webflow Labs
  • DevLink Labs
  • Feature index
  • Accessibility
  • Webflow vs WordPress
  • Webflow vs Squarespace
  • Webflow vs Shopify
  • Webflow vs Contentful
  • Webflow vs Sitecore
  • Careers We're Hiring
  • Merch store
  • Accessibility statement
  • Terms of Service
  • Privacy policy
  • Cookie policy
  • Cookie preferences
  • Freelancers and agencies
  • Marketplace
  • Libraries Beta
  • Hire an Expert
  • Made in Webflow
  • Become an Expert
  • Become a Template Designer
  • Become an Affiliate

Planning to DIY your Website? Use this 9-Step Website Content Plan

By the leadpages team    |    published jun 08, 2022    |    updated oct 06, 2023, by the leadpages team.

How to build a website content plan

Editor’s note: This post was originally written in 2019 and, while the best practices remain as relevant as ever, the article has been updated to include even more insight into how to create the perfect website content plan for your business. Dig in!

Countless small business owners struggle to answer the question: “What should I say on my website?” Sure, you may understand that you need a basic “About Us” and “Contact Us” page, but what else? This is why it’s so important to develop a website content plan.

But how do you develop a strategy that caters to the needs of your audience and helps you grow your brand?

In this article, we’ll demystify the process of creating a content management plan and offer a step-by-step process for how to conceptualize and create all the content that you’ll include on your website. We’ll also cover topics like goal-setting, hierarchy, optimization, and scaling production.

In this article:

What is a website content plan, what content should i include on my website, how to create a website content plan, ready to create a website content plan.

A website content plan is an overarching strategy that governs all the content published on your site. It ensures that all your content is cohesive, addresses the needs of your audience, and is on-brand.

A good website content plan will:

  • Identify what content already exists.
  • Outline what new content is needed.
  • Establish rules and guidelines for new content to ensure your quality remains consistent.

Oftentimes, the toughest part of creating content for your website is simply knowing where to start. However, once you have your plan in place you’ll have a clear roadmap of what needs to be done, making the process a lot easier.

As you prepare your website content plan you might also wonder what type of content you need for your site. This will differ from one business to another, but generally speaking, you should have the following content:

  • Product(s)/service(s)
  • Frequently asked questions (FAQ)
  • Hidden pages like a thank you page, 404 page, and landing pages for special offers/lead magnets.

How to build a website content plan

Start with your homepage, then move on to your top-level pages like your about page, products/services, contact, etc. Once all your web pages are complete start creating blogs to increase your content library and establish your authority.

Your website content is important. In fact, 66% of marketers plan to increase their content marketing budget in 2022 . So, if you want to keep up with the competition you’ll need a solid plan in place.

Luckily, creating a winning content plan is easier than you think. Just follow these nine steps.

1. Establish your content goals

When creating your plan you need to start by setting goals for your content. Pose the following questions as you get started:

  • What do you want to achieve with your content?
  • Is your goal to convert new customers into clients or drive awareness?
  • How can your buyers’ journey inform what content your site needs to contain?
  • What objections do you need to proactively address?
  • Will your content educate/ inspire/ entertain? Where? How?
  • How will you measure your success? (and know whether or not your content is working)?
  • What is your target date for developing a content marketing plan?

These goals should be tied to key performance indicators (KPIs), as well as tactics to make them a reality. Select a series of three to four KPIs based on these goals. These should typically include conversion, referral, and/or share of voice-type metrics.

For example, let’s start with the question “what do you want to achieve with your content?” You might have a few different answers, including:

  • Awareness: Introducing prospects to your brand and helping them recognize the need for your product/service.
  • Research & education: Providing prospects with the information they need to make an informed decision.
  • Comparison & validation: Showing how your solution compares to your competitors’.
  • Sales: Converting prospects from leads to sales.

Once you have your answer you can choose a KPI. For example, if your goal is awareness, you’ll likely look at how much traffic your content generates. If it’s research you may look at something like email subscriptions. And for sales, well you’ll obviously want to track how many sales a piece of content leads to.

How to build a website content plan

You can see a page's traffic, conversions, and conversion rate within your Leadpages dashboard .

2. Define your audience

Study your audience in microscopic detail. Gain customer insights through obvious sources like social media channels, digital monitoring, third-party websites, and customer support or sales inquiries.

Another foundational part of your content creation strategy is defining your audience. Every one of your pages or posts should speak to your core audience—both literally and figuratively.

Then step outside of your own mind and think like a website visitor. As you do so, consider the following questions:

  • What are the demographics and psychographics of your core audience?
  • What information does your audience need?
  • What information does your audience want?
  • What information does your audience need to convert into customers?

Targeting the right audience is key, so take your time with this step and ensure you have a firm grasp of who you’re creating content for.

3. Audit existing content

Hooray, you’ve reached the most boring part of this process—auditing. While kind of hum-drum, it’s actually super critical. In this step, you’ll want to list every single type of content piece you currently have and what you think you’ll need moving forward.

If you already have an existing website or other marketing collateral, it’s good to take a pulse of what content you’ve already produced. The goal is to gather, organize, and identify opportunities to repurpose existing content.

For those that don’t currently have a site, start with a competitive analysis. Look at what other marketers have created on websites and in print to help you generate ideas for your own website content plan.

Leadpages Sites

Beautiful websites with the full conversion power of Leadpages

Experience the only online website builder that lets you easily create a high-converting website with code-free customizations.

4. Map key content to a website content map

Once you’ve audited your content, create a visual website content map. Believe it or not, it’s quick to develop and easy to change as you go.

A website content map is a diagram that shows your website content’s hierarchy and structure. It helps to identify the relationships between pages—specifically where they reside and how they interact with other pages. It's also critical for creating a good user experience (check out these UX statistics for more insights on how to create a strong user experience).

You can start by bucketing your content by theme and importance. Stem top-level pages from one homepage, and then more robust and detailed content will fall under each of these top-level pages.

5. Create content for your website

Now to the arguably most important step—creating your content. Before you begin it’s a good idea to establish a website content template. This will help you maintain consistency and hit all of the essentials of each page.

Ensure all your content is on-brand, with the same tone, voice, and style throughout. Repeat your key messages often throughout each asset and always have a call to action, even if soft.

It’s also important to mix up the types of content you create. Blogs are great, but maybe your audience prefers podcasts or videos. Experiment with different mediums to see what performs best, or use all three so you have something for everyone.

Most importantly, your content needs to provide value. If you’re not answering questions or providing solutions for your audience, they won’t stick around. So, make sure everything you publish is bringing something valuable to the table.

6. Upload and optimize content assets

Once you have every page created, it’s time to upload your content to your website. This used to be the hardest step and would often require you to learn web design or hire an expensive developer. However, thanks to drag and drop website builders like Leadpages , this part of the process has become incredibly simple.

To build your website, choose a professionally-designed template and then use the no-code Drag & Drop Builder to customize your color, images, and text. When you’re ready, click publish to share your site with the world.

Once your website is published adding new content is easy. Simply create a new page, write or paste your copy into the text box, and upload photos or videos. You can return to the builder at any time to make updates and changes to your content as needed.

7. Consider SEO

While creating and uploading content you need to think about search engine optimization (SEO). Following SEO best practices will give your content a better chance of appearing in search results, allowing you to reach more of your target audience. 68% of online experiences begin with a search engine , so this is the best long-term strategy for generating traffic

Here are a few tips:

  • Aim for at least 300 words per website page and over 2,000 words for blog posts . Give people something to chew on and let search bots crawl enough words to index your content.
  • Perform research using tools like Google’s Keyword Planner or Ahrefs to find high-volume, low competition keywords that are relevant to your brand.
  • Focus on optimizing each page of your site with one primary keyword per page, using a different keyword each time and incorporating it throughout your text.
  • Metadata titles and descriptions
  • Header tags (H1, H2, H3, etc.)
  • Image alt text

How to build a website content plan

Within the Leadpages Website Build select "Settings" and "SEO" to edit your meta title and descriptions.

Just remember that SEO takes time to have an impact. If you want to get eyes on your content right away then you’ll want to pay close attention to the next step.

8. Promote your content

Publishing a content asset is no small feat. In fact, it can take hours, days, and sometimes even weeks to ideate, research, draft, design, and optimize your page. So, don’t make this a wasted effort. Get more eyeballs on your website content by taking the time to promote it. You can do this in a number of ways, including:

  • On your site: Promote content assets within your website with pop-ups and alert bars .
  • Internal linking: Build links from other web pages and content on your site to your new content. This is also good for SEO.
  • Social media: Share your content across all your active social networks. You can also seek out groups, communities, and forums where you can get your content in front of the people most likely to benefit from what you’ve created.
  • Share internally: Have a team of employees, contractors, or collaborators? Invite them to engage with your content and help you amplify its reach online. You can make it easy for them to share your posts by providing pre-written swipe copy.
  • Email: Share your content with your email list through regular newsletters and updates.
  • Paid advertising: Use Google and Facebook ads to promote your content and grow your audience.

How to build a website content plan

Long story short, just because you build it doesn’t mean they’ll come. Use the tips above to create a content distribution checklist that helps you create a standard process for promoting your work to ensure all your content is properly promoted.

9. Maintain and scale content

Just because your content is published and promoted doesn’t mean your work is done. For the best results, you’ll want to update your content regularly so it stays fresh and relevant. Check on your content at least once a year to see if the information is still accurate and make changes accordingly.

You’ll also need to keep planning for future content. Pay attention to the questions your audience is asking and do keyword research to learn what people are searching for. Based on this, create an editorial calendar to map future content, track ideas, and avoid duplicated topics.

Try to maintain a steady stream of content throughout the year. Adding new articles and videos monthly or weekly will ensure you stay top-of-mind with your audience.

Use the steps above the create your website content plan, then put it into action. Remember, building the plan is only the first step. You need to act on it and stick with it to make it work.

And of course, in order for your website content plan to work, you’ll need a website. If you don’t already have one set up you’re in luck. You can try Leadpages’ Website Builder free for 14 days and start creating your site today.

Leadpages Free Trial

Try Leadpages free for 14 days

Easily create your website and landing pages with the only platform engineered by marketing nerds.

Group 770x1024

Wondering what to read next?

Here’s what we suggest: →  What Are Lead Generation Websites? Everything You Need to Know (Plus 5 Examples) →  12 Different Ways to Use Website Pop-ups →  53 UX Statistics to Know for 2023

Share this post:

/_next/static/media/BlogCTABackground@2x.0071c2c1.jpg

Curious about Leadpages?

Try it free for 14 days

Create web pages, explore our integrations, and see if we're the right fit for your business.

Popular Posts

Blog Feature @2x

The Future of Content Creation is Here—Introducing Image Generator and Writing Assistant

15 Ways to Create a High-Value Lead Magnet in 30 Minutes or Less

How to Create a High-Value Lead Magnet in 30 Minutes or Less

An Analysis of 8 High-Performing Lead Generation Landing Pages

Best Lead Generation Landing Pages: Examples with Critiques and Optimization Checklist

Leadpages 10th anniversary

What Makes a Small Business Successful? Our Insights After A Decade of Working With 434K Entrepreneurs

Page Layout Example

Main navigation.

Your Stanford site provides many options for laying out content. Here is an example.

Logos or images in a grid

Suppose you want a set of images to display in a very specific order such as in a grid. One approach is to use the Gallery paragraph . If the Gallery is not what you're looking for, you might think of putting your image in a table. Unless the images are data for a table, this approach is not accessible, and it probably won't look good across a variety of screen sizes. One approach to consider is to use a section with a multi-column layout. 

This example uses the 3 column layout. Note that the names for the images are bolded text and not headings. This is because when you use a heading, you need some following text.

website content layout

Stanford gray seal

website content layout

Stanford black seal

website content layout

Stanford red seal

website content layout

Stanford red block

website content layout

Stanford black block

website content layout

Stanford color block

Fontawesome laptop

Fontawesome hand point right

Fontawesome University

  • Editorial Design
  • graphic design
  • Illustration
  • Get iOS App
  • Get featured

Unlocking the Elegance of UX: Sillage's Web Design Simplicity

Discover Sillage's web design, where stunning typography, layout, and photography blend to enhance 'web design and ux' for captivating user experiences .

The Sillage web design project by Kévin Magalhaes, showcased in 2023, is a testament to the power of design simplicity merged with visual elegance. This initiative, featured prominently on Behance, illustrates how minimalistic design elements can amplify the essence of a brand, making a compelling case for the significance of thoughtful design in the digital space.

At the heart of Sillage's design philosophy lies a deep appreciation for typography. Magalhaes skillfully selects fonts that speak to the viewer, ensuring that every word on the page not only conveys information but also contributes to the visual harmony of the site. This meticulous attention to typography enhances readability and engagement, inviting visitors to linger and explore further.

Color plays a pivotal role in the Sillage project. The chosen color palette is both elegant and functional, often appearing complementary to the vibrant hues found in the site's photography. This strategic use of color not only creates a visually appealing interface but also guides the user's attention to key areas of the site, facilitating a natural navigation flow. The interplay between the colors and the photography ensures that each page is a visual feast, enriching the user's experience with every click.

The layout of Sillage's web design further underscores the project's commitment to user experience (UX). By prioritizing the incredible photographs and images, the design achieves a balance between aesthetic appeal and usability. The compositions are crafted to draw the eye, yet they never overwhelm or detract from the site's navigability. This harmonious balance between form and function exemplifies how design can enhance the usability of a website, making it not just a place to visit, but an experience to be savored.

In conclusion, the Sillage web design project by Kévin Magalhaes is a masterful demonstration of how design elements like typography, color, and layout can be orchestrated to create an engaging and memorable user experience. It stands as a beacon for designers seeking to blend beauty with usability, proving that in the realm of web design, elegance and functionality can coexist seamlessly.

Web design and UX artifacts

Web design UX Web design UX Clothing japanese minimal modern color shop designer tokyo Fashion  block

For more information make sure to check out Kévin Magalhaes on  Behance . 

Brought to you by

Don't miss these ones.

UX for Feelo an app for expressing your feelings

Lucrative Ideas for Online Side Hustles to Make More Money in 2024

Source: Unsplash

Are you looking for a side hustle to generate extra income in 2024?  

Here are five ideas for lucrative jobs you can do online, part-time to make more money on a monthly basis.  

The best part? If you don’t have them already, you can learn the skills you need for all these options by yourself, online, mostly for free.  

Web Design 

To start with, one of the most lucrative online side hustles is web design.  

In 2024, every business needs a website to succeed. Statistics show that the vast majority of customers check out businesses online before visiting physical stores. Plus, a study by Stanford University revealed that 75% of consumers assess the credibility of a business based on their web design.  

The bottom line? There’s a high demand for web designers.  

And thanks to content management systems such as WordPress, and intuitive drag-and-drop website builders like Elementor, Gutenberg, and Divi, you no longer have to be a coding whiz to design a visually appealing website.  

The best way to go is to brush up your skills by following some of the many exhaustive YouTube tutorials and getting started by building a few sample websites for your portfolio. Then, you can launch your side hustle and start generating an actual income.  

Bookkeeping 

Another online side hustle with a massive earnings potential is bookkeeping. While it may sound less glamorous, freelance bookkeepers are in high demand.  

If you’ve got a knack for math, juggling numbers, and organizing figures, bookkeeping may be the perfect side hustle for you. Many businesses need help tracking their invoices and expenses, and balancing their various accounts.  

Plus, you don’t need formal qualifications to launch your bookkeeping business. While some bookkeepers have a specialized degree, many start their career with a high school diploma or some trade school classes. If you want to polish your skills, you can consider taking an online bookkeeping course before getting started.   

Ben Robinson, CEO of Bookkeepers.com, which offers bookkeeping masterclasses, says: “There’s no denying you can achieve a lot with this career path, and you can learn how to become a bookkeeper through training courses. You don’t even need related work experience to qualify for bookkeeping training. And, you don’t have to be a Certified Public Accountant (CPA). If you have no previous experience in the accounting industry, this means you need to pick your bookkeeping courses wisely. They should cover all the essentials you need to learn to be a competent and capable bookkeeper.”  

Video Editing  

Is your hobby making fancams for X? Running a YouTube channel? Or uploading edits of your favorite shows and movies?  

Then becoming a freelance video editor is a fantastic way to make some extra money online. With the surge in video marketing content – especially short-form, vertical clips for TikTok, Shorts, and Reels – many businesses are looking for editors.  

Skill-wise, you’ll need to have a solid grasp on editing software like Premiere Pro, Final Cut, or DaVinci Resolve. And you’ll have to be a pro at selecting the right cuts, effects, and animations to produce a captivating clip that fits the brand voice of your client.  

The good news? Many hobby editors have found that the transition to being a well-paid pro is fairly smooth. In fact, most video marketing clients are less demanding than YouTube’s comment section.  

Social Media Management 

Are you hooked on social media? Completely in tune with the conversation on X? Up-to-date with the latest TikTok trends?  

Then you’ve got a great shot a launching a lucrative career in social media management. Like having a website, maintaining a presence on social media is a key element in establishing a business’ online presence. Still, many marketers struggle to get their brand voice right and become part of the conversation without seeming artificial.  

That’s where social media managers come in. You’ll need to pinpoint how to best reach a business’ target audience – which platform and content type to leverage to generate the most engagement. And you’ll need to create content, from TikTok videos to Facebook posts, that is custom-tailored to resonate with that audience.  

If you’re a social media junkie with multiple viral posts under your belt, then this should be a breeze for you. Especially if you also study up on social media strategy by following some of the many specialists out there who’re sharing their knowledge on their own accounts.  

Search Engine Optimization  

Finally, another lucrative side hustle idea is search engine optimization (SEO). SEO describes a set of practices that help websites rank in the top spots on Google.  

A large part of SEO is doing research on what search terms people use to look for products or services – and then writing custom-tailored website copy and blog posts to target these keywords. Another part of it is making sure that your customers’ websites are fast enough, and that other sites link back to it (“backlink building”).  

Sounds complicated? With a little practice, it’s really not. If you’ve got some experience as a writer and some time to study up on SEO best-practices, you’ll be all set to start looking for your first clients.  

Plus, there are countless free online resources to stay up to date with the latest SEO trends and learn from the best.  

The Bottom Line  

Launching a side hustle can seem daunting, even if it’s tempting to make an extra income in 2024.  

Ultimately, the key is to pick a side hustle that builds on your strengths, and involves tasks that you genuinely enjoy – from writing SEO-optimized texts to editing videos that are perfectly on-beat.  

Go through the list above, assess your own strengths, and launch yourself into your side-hustle adventure!  

website content layout

Logo Left Content

Stanford Medicine

Logo Right Content

Stanford University School of Medicine blog

website content layout

Unconventional Paths: How she flipped traditional genomics analysis on its head

These are stories of Stanford Medicine faculty, researchers and physicians whose journeys into medicine didn't take the traditional path.

Julia Salzman loves the natural world. In fact, she hasn't driven a car in 20 years. She cycles everywhere, admiring the plant life in Palo Alto with her three kids. 

Her fascination with nature's inner workings began early. In high school, Salzman, PhD, now an associate professor of biomedical data science and biochemistry at Stanford Medicine, modeled pathways in the human brain and decided to study neuroscience.

But in college, as she probed neurons in petri dishes, Salzman began to feel confined. She didn't just want to study the brain; she wanted to study everything .

"With math, I could," Salzman said. People told her, "If you do statistics, you can do anything."

That's exactly what she did. Her first career was as a statistician, but she yearned to apply her training to the living world.

"I've always felt like following my passion is what I need to do," Salzman said, before considering another reason. "Maybe I'm stupid enough to take risks."

Fueled by a deep interest in science, she returned to biology at age 28. Salzman has since married her two areas of expertise to design a new form of genomics analysis that breaks the traditional mold.

I've always felt like following my passion is what I need to do. ... Maybe I'm stupid enough to take risks. Julia Salzman

website content layout

Nature calls

Salzman earned her PhD in statistics from Stanford University, then taught the subject at Columbia University, where she was a professor for one year. But as she rose through the ranks in academia, Salzman felt the natural world calling her back. She wanted to answer big questions in biology, such as how cells communicate, pathogens evolve and immune systems function. And she couldn't do that as a statistics professor.

She returned to Stanford University in 2008 to work as a post-doctoral researcher in a biochemistry lab, intending to learn biology and use statistical algorithms to study how to "read" the DNA instructions for life.

"At the time, people were saying: Aren't you scared? You have a faculty position. Why are you going to do a post-doc?" Salzman said.

This time, she didn't take others' advice -- and it paid off. "I didn't feel scared because I knew it was what I wanted to do with my life and it fascinated me," she said.

In the biochemistry lab of Patrick Brown , MD, PhD, now an emeritus professor of biochemistry at Stanford Medicine, she learned how to sequence DNA and associated molecular biology.

"I got to learn genomics and genomic data analysis when the field was basically being born," Salzman said. "I was passionate about the human health implications."

Since then, Salzman has studied genomics for more than 10 years. Scientists like her analyze the human genome to understand disease. They do so by parsing a person's entire genetic catalog to understand which mutations might lead to a problematic health condition.

Since the early 2000s, scientists have analyzed genetic data by comparing it to an idealistic genome. Salzman became well versed in this method. And then wondered if there was a better way. Perhaps one that could generalize to essentially any living organism or virus.

I got to learn genomics and genomic data analysis when the field was basically being born. Julia Salzman

website content layout

An idealistic genome

The standard way to detect variation in an organism's genetic make-up is to compare it to a something called a reference genome. The reference serves as a prototypical member of that species, representing average genetic instructions. Any difference between the organism and the reference genome could explain a biological condition.

For example, if a breast cancer patient has a gene mutation that doesn't exist in the same location in the reference genome, that mutation could be the culprit behind the cancer.

But the human reference genome has a problem: It's made up of genomes predominately from people with European ancestry. Because those people generally have DNA sequences that are well matched to the reference genome, a variation is a real flag that something's amiss.

That's not the case for people from under-sampled populations. The natural variation in their healthy genomes isn't captured, so scientists don't know what's typical and what's not - a problem that can exacerbate health disparities.

"The reference doesn't represent the biological variation that we know exists," Salzman said.

There are other drawbacks. Outside of humans, most species don't have reference genomes -- particularly, plants, bacteria and viruses. That makes it difficult or impossible to study mutating viruses that could harm humans, or plants that could heal us, Salzman said.

During the pandemic, a solution to these problems began brewing in Salzman's mind. Locked down with three young kids, she spent less time in the lab. Her statistics background crept back in.

"I thought, 'Is there a unified approach to understanding genomic variation in nature?'" Salzman said.

I thought, 'Is there a unified approach to understanding genomic variation in nature?' Julia Salzman

A reference-free solution

It was a big question. But, Salzman said: "I believe in trying." Her first step was to ditch the reference genomes.

"I tried to step back and ask if they're needed. I couldn't convince myself they were," she said.

Salzman devised a simple statistical algorithm that could analyze raw genetic sequencing data without a reference. The model, called SPLASH (Statistically Primary aLignment Agnostic Sequence Homing), relies on a statistical test to detect variation between genomes. It ranks the variants based on how common they are in the group of genomes, reasoning that the less common variants are more likely to be biologically important.

With SPLASH, scientists could spot statistically significant differences in their samples more quickly and efficiently than mapping to a reference genome.  

"Because SPLASH is so much more efficient, we can scale it in a way that it's impossible with other approaches," Salzman said.

Salzman and colleagues recently debuted the algorithm in a study published Dec. 7 of 2023 in Cell . In the study, they showed SPLASH could detect whether a SARS-CoV-2 nasal swab sample contained the Omicron or Delta sequence. The ability to detect such differences could help scientists flag new strains in the future, Salzman said.

The authors also demonstrated that SPLASH could spot genetic variations in organisms whose reference genome is incomplete or non-existent, like octopuses.

I think SPLASH is a first step to many completely new unifying, functional discoveries with genomic data. Julia Salzman

website content layout

"I think SPLASH is a first step to many completely new unifying, functional discoveries with genomic data," Salzman said.

It could help scientists understand how bacteria genomes become resistant to antibiotics, by flagging mobile parts of their genome that evade treatment and can't be captured by a reference. SPLASH could also take a global population of human genomes and flag variants that are likely disease linked, rather than healthy remnants of ancestry, because those would likely exist in multiple people in the sample. It also could help scientists understand how species adapt to climate change, Salzman said.

"I hope that SPLASH and its descendants will allow people to attack problems in global health more generally, without being limited to very specific problems," Salzman said.

After all, she's never been one to stick to a single puzzle or path. With her new tool, she hopes scientists like her younger self won't have to either as they search to find their true passions within so many possible areas of study.

"Marrying statistics theory with biological function," Salzman said, "I'm fascinated by what I do now."

Go here for more stories from our Unconventional Paths series.

Main image: Jim Gensheimer

Related posts

Unconventional Paths: How archaeology inspired a path to family medicine

Unconventional Paths: How archaeology inspired a path to family medicine

Unconventional Paths: Merging computation and biology

Unconventional Paths: Merging computation and biology

Popular posts.

How the death of his wife drives data scientist to improve the system

How the death of his wife drives data scientist to improve the system

Unconventional Paths: How she flipped traditional genomics analysis on its head

IMAGES

  1. 45+ Creative Website Header UI Design Ideas for Inspiration

    website content layout

  2. Top 10 Website Layout Ideas

    website content layout

  3. How web design layout affect SEO

    website content layout

  4. Create a Clean Website Layout PSD to HTML/CSS [Tutorial] -DesignBump

    website content layout

  5. Services Website Layout 1

    website content layout

  6. Web Layout Design

    website content layout

VIDEO

  1. Diy

  2. On Page SEO for Divi Themes

  3. CSS Website Layout

  4. Top useful website to create content

  5. Master Your Website's Performance Core Web Vitals Explained!

  6. 61.Website Layout -(CSS Part-29)

COMMENTS

  1. 9 Best Website Layout Ideas, Examples & When to Use Them

    9. Boxes Layout: TSX Broadway. Next comes (what's widely popular among web designers) — boxes layout. This layout-type refers to webpages (very often the homepage) whose hero section is a large full-width box (often, but not always, a full-width image or video), followed by smaller boxes directly underneath.

  2. The Basics of Page Layout Design (+25 Page Layout Design Ideas)

    When to use this page layout: If you want to showcase an image gallery, the masonry layout is an excellent choice. Not only is it ideal for publishing an array of high-quality images, but it also makes each image stand out because the size and shape of the box vary from image to image. 6. Full-Screen Background Video.

  3. 11 Website Layout Design Examples to Consider for Your Next Project

    8. Static Sidebar/Navigation Bar Layout. The static sidebar or navigation bar layout is another style that is easy to design and usually takes one page. Try the static sidebar/navigation bar website layout if you run an online kitchen or a restaurant, or if your site will include many categories.

  4. 10 Good Website Layout Ideas (with Examples)

    If a single column layout seems a little restrictive, but you still have a lot of content to communicate, consider adopting a design that focuses on the content. 2. Content Focused Layout. Web designers often use the content focused layout on news sites or blogs, and it usually has a primary column for content and one or more side columns for ...

  5. The fundamentals of website layout

    A website layout is visualized through a wireframe, which is a basic skeletal map showing how the content will fit together. It is important to distinguish wireframing from web design, which is the whole process of creating front end graphics and other visuals for the web page. Website layout design is a big part of web design, and it starts ...

  6. 19 Website layouts that will make your users come back for more

    Best Website Layouts with Proven Success. Below you'll find the most popular and effective website layouts that designers the world over use to make their websites. 1. The Zig-Zag Layout. Research revealed how users use to scan a webpage content: the eyes move along the page following a Z-letter direction. First, the eye goes from left to right

  7. 10 Best Website Layout Ideas to Get You Started

    This is a great layout idea for long-form content websites, or websites that display content in chronological order— anything from blogs to social media feeds. 07. Box-based layout. The box-based, or grid-based website layout merges multiple pieces of content into one geometric design. With each bit of information neatly constrained into a ...

  8. Best website layout ideas and examples

    This layout is kind of a combination of a text-based design and a basic grid. It's a popular one for portfolio or e-commerce websites and usually features some sort of large headline at the top — perhaps an "about me" type of statement or a business description — followed by a gallery of images, usually something like a selection of featured work or product photos.

  9. How to Design an Effective Website Layout (+ Ideas and Examples)

    6. Single-Column. Our next website layout example arranges all content in one vertical column and orders it sequentially. Single-column layouts are popular and easy to use, especially on mobile, where users prefer to scroll over clicking from page to page.

  10. The 5 best types of website layouts: examples and guidelines

    Business sites can take this layout a step further by unifying each piece of content with a connective visual. Matt Brown's portfolio site, designed by 2ché, uses a science theme, so the connective visual is a lab pipe that runs through each different lab equipment at each stopping point.Designer Tushar K∎ uses a similar technique for the 2bak website, connecting each image with a ...

  11. How to structure your website (and why it's important)

    Learn how to structure a website and what type of structure benefits your web design. What's a website structure? Website structure refers to the organizational design of a website's pages. Creating a website structure involves organizing and classifying content to create a layout that's understandable, accessible, and predictable. Navigation ...

  12. 11 Elements of Modern Web Design (And Web Design Trends to Watch)

    10. White Space. Image Source. White space is an often-used element of minimalist web design, but is now a critical feature of effective modern site frameworks. By balancing content such as links, text and videos with similar amounts of white space, users are naturally drawn to key aspects of your site.

  13. 12 Essential Website Layouts to increase Engagement in 2023

    The Cards Layout is a versatile design choice that can be used for various website types, including social media platforms, e-commerce sites, and content-driven websites. It is particularly useful for websites that need to display a large amount of content in a way that is easy to navigate and visually appealing.

  14. How to design a modern website (in 9 simple steps)

    9 steps to designing a website in 2022. Let's go over 9 stages that you'll go through when designing a website: 1. Define your website's scope and goals. Whether you're designing a website for yourself or a client, it's important to first clearly define the website's purpose and goals.

  15. CSS Website Layout

    Content. The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following: 1-column (often used for mobile browsers) 2-column (often used for tablets and laptops) 3-column layout (only used for desktops) 1-column: 2-column: 3-column:

  16. What Makes an Effective Website Layout & How to Create It

    5. Create the layout. ‍. Using a web design software of your choice, you're now able to create your website layout. Create all the pages and add your content (images, text, videos, buttons, etc.) Once you've added the content, you should divide the web page layout into sections (header, body, footer).

  17. 13 Best Website Layouts That Always Work (With Examples)

    6. Grid Layout. Easy browsing is one of the best things about a well-designed website and the grid layout offers this in spades. It allows you to display multiple interests on one page with an equal distribution of the text, pictures, and videos to show the various types of content.

  18. 10 Top Website Layouts: Examples You Can Copy & Learn From

    Top website layout examples. Now that you know how to create amazing website layouts, let's inspire you with real life examples: Single column layout. A simple and clean layout where all content is presented in a single vertical column. This design is often used for blogs, portfolios, and landing pages. It prioritizes readability and easy ...

  19. How To Design A Website (2024 Guide)

    Also, add images to capture the users' attention, but make sure they are relevant and of high quality so they can make the right impression on users. 4. Select a Template or Theme. Next, choose ...

  20. How To Write Website Content

    Make sure your content is original. 2. Don't use run-on sentences. Short and sweet appeals to both humans and search engines and you'll be rewarded. If you have a lot to say, make sure to break it up into easily scannable chunks. 3. Don't write content that is too complicated.

  21. Beautiful, Customizable Website Templates for Free

    A good website layout features a simple design, readable text, and complementary color palettes. Visitors should be able to navigate it easily and quickly get the information they need. At Canva, we keep the end-user experience in mind with beautiful, well-thought-of website layout templates.

  22. How to tailor your website style guide to your brand (with ...

    Proper typography in web design also shapes how visitors perceive and connect with your content by guiding them to crucial information and calls to action (CTAs). Thoughtful typography choices also build credibility, making users more likely to trust and interact with your brand by signaling your attention to detail and professionalism .

  23. How to Create a Website Content Plan in 9 Simple Steps

    4. Map key content to a website content map. Once you've audited your content, create a visual website content map. Believe it or not, it's quick to develop and easy to change as you go. A website content map is a diagram that shows your website content's hierarchy and structure.

  24. How To Make A Website For Your Business

    Then, move forward with small business web design tasks and content population. After you review and SEO-check your site, you're ready for launch. Frequently Asked Questions.

  25. Page Layout Example

    Your Stanford site provides many options for laying out content. Here is an example. Logos or images in a grid. ... One approach to consider is to use a section with a multi-column layout. This example uses the 3 column layout. Note that the names for the images are bolded text and not headings. This is because when you use a heading, you need ...

  26. Unlocking the Elegance of UX: Sillage's Web Design Simplicity

    The layout of Sillage's web design further underscores the project's commitment to user experience (UX). By prioritizing the incredible photographs and images, the design achieves a balance between aesthetic appeal and usability. The compositions are crafted to draw the eye, yet they never overwhelm or detract from the site's navigability.

  27. Lucrative Ideas for Online Side Hustles to Make More Money in 2024

    Web Design To start with, one of the most lucrative online side hustles is web design. ... With the surge in video marketing content - especially short-form, vertical clips for TikTok, Shorts ...

  28. Microsoft Copilot personal and work experiences explained

    -And in addition to the standalone browser and apps, Copilot Pro adds integrated experiences in Microsoft 365 apps like Word, PowerPoint, Excel, and Outlook. Within those apps, you can use Copilot to quickly generate content optimized for those apps or quickly summarize existing written content to save you time.

  29. Unconventional Paths: How she flipped traditional genomics analysis on

    Fueled by a deep interest in science, she returned to biology at age 28. Salzman has since married her two areas of expertise to design a new form of genomics analysis that breaks the traditional mold. I've always felt like following my passion is what I need to do. ... Maybe I'm stupid enough to take risks. Julia Salzman Photo by Jim Gensheimer