WEB PAGE LAYOUT

What is a website layout?

First, it’s important to understand what a website layout is.

  • Navigation bar: The navigation bar is same as menu list. It is used to display the content information using hyperlink.
  • Index / Sidebar: It holds additional information or advertisements and is not always necessary to be added into the page.
  • Content Section: The content section is the main part where content is displayed.
  • Footer: The footer section contains the contact information and other query related to web pages. The footer section always put on the bottom of the web pages. The <footer> tag is used to set the footer in web pages.

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.

  • Next, the eye goes down, and to the left
  • Last, their eyes move back across to the right again

2. The F Layout

The F-shape layout follows another widely-known scanning behavior, where the eyes move across a page in an F-letter pattern.

3. Full-Screen Photo

In this case, the layout implies spreading up content upon a full-screen photo/image. Thus, text sections or menu sections are there to support the “living” image.

4. Grid Layout

Information is organized into grids, making it easy to browse., and people can stop to specific topics of interest. Grids allow for an equal distribution of text, photos, videos onto the webpages, letting users decide upon the importance of each unit.

5. One-Column Layout

This layout organizes information into one single column, and it’s one of the simplest layouts to put in place. The content (text, photos, videos) is easy to follow, and the need to scan is nothing more than identifying key points of interest into that single column.

6. Featured Image Layout

One of the most frequent layouts nowadays implies setting up a featured image representative of each page in the website. The image serves to concentrate attention and interest to a focal point expressive of the page topic. Also, the image stands as the source of meaning that radiates from this very focal point.

7. Asymmetrical Layout

The asymmetrical layout plays with the rules of symmetry to the point of bending them in favour of a unique promise: there is more we have to offer than perfection. The trick is to create active space, and to make white space livelier.

8. Split Screen Layout

This type of layout refers both to vertical split-screen and to horizontal split-screen. Generally, a vertical split-screen plays a major role in conveying dual importance to 2 or more distinct areas. The purpose here is to favor quick choices, for better engagement with the website right off the bat.

9. Headline and Thumbnails Gallery Layout

In a more and more visually-focused online world, this layout may work wonders. It is made up of image miniatures leading to full descriptions of those topics, and headlines (+ short presentations) that serve as a guide through the image album.

10. Modular Layout (also known as Card Layout / Block Layout)

This layout is tightly related to Material Design, the design protocol launched by Google. It’s becoming increasingly popular, due to its flexibility and responsiveness. The modular layout means each unit of content (text, images, videos, buttons) is included in a card, or module, having its own dedicated space.

11. Magazine Layout

The magazine layout, as it is encountered nowadays, tends to be a mishmash of some other layouts, all serving to give a splendor aura to the news.
The example below combines headline + thumbnail gallery layout, and featured image layout, plus a solid F-shaped layout, to keep the glamour of the magazine up to par.

12. Single Page Layout

Although not so widely spread among common website layouts, we wanted to list this layout here due to its fairly interesting characteristics. It combines multiple actions into one page (e.g. Gmail). Content is loaded dynamically, using JavaScript. And it is built so that it generates unique URLs for each viewpoint.

13. Radial Symmetry Layout

Another less common layout type refers to radial symmetry. There’s a central point from which radiate correlated items, in a rounded form:

Layout Specifics and Considerations

While most layouts are structurally similar, the styling choices and the use and placement of content in the layout is what provides the necessary diversity. In current design practice all layouts will include:

--

--

Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store