Using a Grid System in a Website Layout

Most modern websites are built using a grid system. Grids allow for scalable and consistent layout on every device and, since responsiveness became a web standard, they have become more important than ever. Find out more about grid system and ways to benefit from a grid-based website layout.

Principles of design and page layout

There are 6 key principles of design and page layout, which ensure creating visual stimuli that have positive effects on a human brain, and improve the user experience.

Alignment

Alignment is used to create order, and organize elements on the page.

Balance

There are three balance types: symmetrical, asymmetrical and radial. Balance means all items on the page are well-arranged, while taking into consideration the visual weight and contrast of each element.

Contrast

Using contrast helps organize information and make your website more vibrant. You can achieve contrast using different-colored and different-sized elements.

Proximity

Proximity defines how elements are grouped and spaced. Good practice is to group related information, for example, bullet points or contact information, and to separate unrelated information with white space or borders.

Repetition

Repetition is the use of consistent fonts, colors, and styles. Also, in web design, it’s standard to repeat the same navigation on each page, so visitors know they are on the same site.

Repetition means consistency, and consistency creates trust, therefore enhances user experience. Click To Tweet

White space

White space gives a page form, and it is a major factor in the overall page compositional balance.

Grid based website design

Following the key principles of design and page layout helps to achieve a composition of the page as a unified whole, instead of a collection of separate units.

However, when it comes to web design, there is a certain aggravating circumstance – The average attention span of an internet user is very short. There are only a few seconds of this span to catch visitors’ attention, or they will leave your website.

When visiting a web page, people look at the page in a specific way; from top left to bottom right.

During this short scan, they pick up pieces of information like headlines and messages from pictures which help them decide if the content is worth reading. Besides assessing the quality of information, another important factor which influences the length of stay on the page is how pleasant the page appears to the eye.

Fortunately, there is a neat and useful tool which helps designers to create a visual and structural balance to a website, and catch visitors attention – this is a grid system.

What is a grid?

According to Wikipedia, a grid is a structure made up of intersecting lines.

A grid is a consistent structure for placing elements, and it works on two levels: a column level, and a cell level. It is a guidance system, used to shape the content into eye-pleasing proportions.

Grids usage is widespread. Maybe you haven’t yet realized, but once you understand the concept better, you will start noticing them everywhere!

There are different types of grids, such as 10-column, 16 or 24-column, but the most-used in web design is a 12-column grid system.

12-column grid system

Previously, the usual website width was 960 px. Since wide monitors became a standard, and all modern monitors support at least 1280 x 1024 px resolution, the width shifted to 1200 px, and the use of a grid to a 1200 px wide 12-column grid.

Why 1200 px?

The number 1200 is divisible by many numbers. This means that a 12-column grid allows high column flexibility, and an easily achievable user-friendly design.

Grid System Website Layout - 12 columns grid

When using a 12-column grid, a website can be neatly divided into halves, quarters, thirds and other different combinations:

6/6 = 600/600

4/4/4 = 400/400/400

3/3/3/3 = 300/300/300/300

9/3 = 900/300

8/4 = 800/400

Benefits of using grids

Using grids has important benefits for both the web designers and visitors!

Benefits for website visitors are multiple, because grids do the following:

  • create visual rhythm
  • establish guidelines for how to position elements within a layout
  • make it easier for the eye to scan and navigate through the page

Benefits for web designers:

  • grids work well with key design and page layout principles
  • provide a foundation and balance for a layout
  • define proportion reflection

Website layout grid system examples in purpleplanet projects

Our projects are the best way to demonstrate how a website layout grid system enhances the user experience.

On the Evestnet Yodlee project, you can see a wide variety of column distribution, while the Raiffeisen Bank project design is more uniform.

You can find more grid-based design examples at our portfolio page.

Grid system in the website layout - Evestnet Yodlee
Grid system in the website layout - Raiffeisen Bank