WEB PAGE LAYOUT

28–02–2022

What is a website layout?

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

A website’s layout is the framework for how it’s constructed and designed. Think of it as the construction blueprints to your website’s building. Like how a blueprint determines the way a building will look — where rooms will be, where the walls are, etc — the website layout tells you where all your assets will be, from photos, to text, to logos.

Page layout is the part of graphic design that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance, relative importance, and relationships between the graphic elements to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.

Page Layout Information:

• Header: The part of a front end which is used at the top of the page. <header> tag is used to add header section in web pages.
• 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.

• First, the eye goes from left to right
• 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:

Page Dimensions: Few web pages are sized at less than 940px in width. This ensures that the pages look good in the 1024×768 browser resolution. Responsive pages are often wider than this to better accommodate the larger resolutions, and mobile only pages will be designed to look good at 320px width.

Columnar dimensions and Padding: All modern layouts will utilize a columnar grid system wherein each column has a defined width, and defined inter-column margins (typically 20px). A grid system allows for column creation in a layout by assigning a CSS column class to the div layer.

Background Styling: A background will either be a solid color, a full-sized image (scrollable or fixed), or a tiled wallpaper.

Page Colors: Effective layouts will utilize a consistent color palette with a primary color choice and a few color harmonies or compliments. The correct colors are best defined by first sampling the logo to ensure effective integration, with consideration of the industry and target audience. If you don’t have a logo with color or existing colors defined, it can be helpful to identify if your web page would look best with a spring, summer, winter, or fall palette.

Typography: The typeface used for web will most often be a sans-serif font for the body content area for the sake of readability, though the heading titles are often serif fonts to provide visual differentiation. The best sans-serif font-families for web use are Arial, Tahoma, Verdana, and Trebuchet MS. For Serif fonts, the best font-families for web are Georgia, Palatino Linotype, and Times New Roman. In contemporary design the common practice is to use a dark grey color for text (not pure black), and to avoid the use of colored text in most cases. It is also a good practice not to over use bolding, italics, capitalization, or to mix font families beyond one type for headers, and one type for all other text. Google Fonts have become popular (before this were Cufon fonts) but I must caution on their use since even though a font may look great in print, for the web optimal readability is paramount.

Header (Top-bar): This is the top most section of a web page, and is where many businesses add their phone number, email address, and small social media icons. In some modern layouts the logo will also be included here.

Header (Logo Area): The section directly below the title-bar (when in use) is where the logo is placed. Typically this area provides for a left aligned “rectangular” logo, with a tagline/slogan adjacent to it at right. Larger logos (round and vertical) will typically need to be centered, or added to the top of a left sidebar.

Header (Masthead): Below the logo is the masthead area. In the past this would typically have been a singular image; in current design practice this will typically be a jQuery slideshow of some type.

Navigation: The main menu is commonly place directly above or below the masthead (horizontally aligned), vertically on a left-sidebar, or in modern layouts, at the top left as a mobile “hamburger” menu. The “top-level” of the typical horizontal menu will consist of 8 or less “short” menu link word/s to ensure that they fit well on one line. It is also important to ensure good visual contrast between words and a background for the sake of readability. If additional menu links are needed then a sub-menu (drop-down) is used.

Body Content: The content section is where the text of the page is displayed. The top 1/3 of the page is the “above-the-fold” area that is most often indexed by the search engines, so it is important to ensure that you not only have ample keyword rich text, but that there is a keyword rich description near the top that clearly states what the website is about, and the services available.

Sidebars: Sidebars are most often used on the interior pages and is a great place to provide additional content such as contact information and short contact forms, testimonials, additional navigation (known as sidebar menus), call-to-actions, resource information, and related.

Content Elements: The challenge for many people is defining how to best present their content. For service businesses a common practice is to use a three or four columnar layout wherein a representative image that reflects each service is added to a column, followed by the service title, a short description, and a link to that page. In current design there are many possible options for inclusion such as tabular systems, toggles/accordions, scrolling testimonials, embedded videos, image carousels and slideshows. The important thing is to ensure that the pages look complete by including enough content, while not overloading it.

Footer Section: The footer (like the title bar) is consistent on all pages, and is positioned below the body content area. The footer is most often presented in a three or four columnar format. This area is typically used to provide general company information, areas served, social media icons, links to key pages or resources, testimonials, thumbnail images of important visual content, etc.

Sub-Footer: The sub-footer is the very bottom bar of the page, also consistent on all pages. This is typically used for the copyright notice, designer information, business license, and privacy policy / terms of use link.