Layouts

Home > Layouts

Introduction

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur .


Parts of a Layout

Lorem ipsum.


Normally, the pages on a website consist of three distinct parts:

  1. the header

  2. the page (content)

  3. the footer


Header (menu bar) Layouts

Lorem ipsum.


Left Header Layout

The left header layout features the logo on the left, with the menu bar following directly after it to the right.

Right Header Layout

The right header layout is exactly the opposite of the left header layout: the logo is on the right and the menu is on the left.

Block Header Layout

The block header layout features both the logo and the main menu centered on the page, with the logo above or beneath the menu.

Overlay Header Layout

The overlay header is a logo and menu page that completely overlays the web page so that it is all that you see.

Split Header Layout

The split header layout features the logo dead center with the main menu split into two sections, each section being to the right and left of the logo.

Magazine Header Layout

The magazine header layout has the logo and menu on the left, with extra space on the header's right for dynamic content, like articles or offers.

Left Pane Header Layout

Often called a 'side menu', the left pane header layout is fixed on the page's left for ever-present content-style navigation.

Right Pane Header Layout

The right page header layout is the reverse of the left pane header layout and is fixed on the page's right for ever-present content-style navigation.

Slide Out Left Header Layout

Similar to the left pane header layout, the slide out left header layout presents the menu in a content-style form, but works like a drawer, sliding in and out when the menu button is pressed.

Slide Out Right Header Layout

Similar to the right pane header layout, the slide out right header layout presents the menu in a content-style form, but works like a drawer, sliding in and out when the menu button is pressed.

Page Layouts

The layout that you select for your website pages should be based on exactly how you want to present your brand to your audience. Beauty (the aesthetic) is important, of course, but the primary focus of the page layout should be the representation of your brand's identity. If you're a news site or a blog, then it'll probably be best to go with a magazine or content-focused layout as you'll be able to present a good amount of varying content on the page for the user to browse. However, if you're a cutting-edge brand that wants to grab the user from the onset with a stunning display, you might want to consider a full-screen layout - or even a grid-breaking layout.

Explore the page layouts below and click on any one of them to see real-world examples. Keep in mind that these are not the only page layouts used in the world of web design and development, but are some of the most common ones.

Single Column Page Layout

You're able to show images in a very large format, thereby focusing your visitors on the imagery and design itself. Or, if the focus should be on content with the single-column layout, you're able to display the content straight down the middle with no distractions on the right or left (unlike the Content Focused Layout). Learn more

Content Focused Page Layout

The content-focused layout is best for blogs and news sites. The content is the focal point, but it is usually augmented by various sidebar sections that alert the reader to other important factors - like quotes, quick-links, informational sections, etc. Users typically consider sidebars and side columns to be secondary to the primary column.

Magazine Page Layout

The magazine layout maximizes space to show different stories. Because a lot of different content is shown at once, it's always best to create a hierarchy with some stories larger than others. For example, in the Time example, we can see that on the homepage, Time uses the left column to display some stories larger than the ones on the right.

Grid Breaking Page Layout

Grid-breaking layouts are layouts that appear to 'break' the foundational grid beneath them - the underlying grid. The grid-breaking layout is a break from the traditional school of layouts and provides the user with an interesting approach to the site's aesthetic. Text can be overlayed onto the media in order to strongly pull the user to its message.

Full Screen Page Layout

Full-screen layouts fill the entire page without the need for the visitor to scroll. These layouts are great for interactive sites or sites that need a strong story-telling narrative or presentation. The full-screen layout should always utilize the best imagery or media available. This is often ideal for photographers, artists, and videographers.

Alternating Layout

The alternating page layout design is one that uses two columns with media on one side and content on the other. As the user scrolls down the page, they alternate. For example, the content is on the left side with the image on the right on the first row, but on the second, they are switched so that the media is on the left and the content is on the right.

Card-based Page Layout

Card-based layouts allow the user to select from a series of options displayed on the page. This layout is popular for product listings on eCommerce sites. Card-based layouts for pages normally utilize cards of the same size for uniformity, however, there are some exceptions, notably with the fluid-grid system approach.

Hero Page Layout

The hero page layout utilizes a very large image (often called a 'hero' image in web design) that dominates the page's background but provides ample space for a text overlay where the value proposition can be presented. The hero page layout differs from the full-screen layout as more room is provided for text and the page is scrollable.

Split Screen Page Layout

The split-screen page layout is optimal when you want users to decide between two options upon arriving. An effective split screen page layout will use very high-quality imagery with binary value propositions that reflect the 'two sides' of your business. For example, a web agency that web design and marketing might use this layout.

Asymmetrical Page Layout

Similar to a split-screen layout, the asymmetrical page layout divides the screen into two unequal halves with the intention of drawing the initial focus of the user to side. The larger side, naturally (notwithstanding special effects), will be more likely to draw the user's attention and deliver the primary value proposition or CTA.

Footer Layouts

Lorem ipsum.


Block Footer Layout


Horizontal Left Footer Layout


Horizontal Right Footer Layout


Left Column Footer Layout


Right Column Footer Layout