Layouts
Home > Layouts
Table of Contents
Parts of a Layout
Lorem ipsum.
Normally, the pages on a website consist of three distinct parts:
the header
the page (content)
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
