DesignWebKit

Grid-Based Design: Refined Simplicity

Grid-based design is simple and elegant. It uses pure classic forms like square and rectangle in various combinations. Such combinations are multiple and help to create unique layouts. Grid is the main organizing design for Metro style, but it’s not the exclusive Metro creation. In general, most of website layouts are based on grid structure that determines where each and every element should be arranged.

Designer use grid intersections of vertical and horizontal lines to arrange all the elements in a proper places and create attractive and functional layout. Grid helps to see how elements of different shapes and sizes may cohabit in one structure and form a perfect harmony. So the idea of creating a grid layout is as old as time. Famous rule of thirds used in photography or the Golden Ratio rule also explain a proper use of grids in the layout design.

Sismo Design

Grid Website Template

Grid layout is a perfect solution for various-themed websites. It provides the design with clear and nicely organized interface, well-structured menu and navigation. Moreover, large pics arranged in grid layout make it mobile-friendly. Due to huge clickable buttons and navigation elements grid layouts are perfect for responsive web design.

100 Years of Design

Grid-Based Website Template

Grid-Based Design Versions

The simplest version of the grid-based layout may be represented by a set of columns outlined by so-called gutters. This is the most primitive and plain example of the grid layout, but with a proper use of elements and their design it may also get zest and look extremely elegant.

Outdated Browser

The website template below shows the design that imitates grid layout with a help of a background. Wooden boards create an illusion of columns that become a base for navigation menu buttons.

The next step is adding a few horizontal lines to create squares of the equal size. Such organization is widely used today and may be found in multiple layouts, designs of Home Pages or Gallery structure.

Speedo USA

McDonalds

Good Morning

Grid-based layout doesn’t mean all parts in it should be equal – it’s boring in most cases. Moreover, it’s much better to use different sizes of components to create a vivid structure and intrigue a user. Developers and designers that work on website template use a Golden Ratio rule to create unique layouts that will represent the information in the most well-structured way.

La Vie La Fresh

Cyril Masson

Additionally, it’s not necessary to use ideal rectangle in grid layout. Playing with shapes, making use of trapezoids and irregular squares adds zest and makes design unique. Some designers, like in the examples below, use totally innovative approach for grid designs.

Orangina

Tapmates

Where to Use Grid Design

The use of grid layout structure is various. The most popular application is grid photo gallery. It allows showcasing works at best in the most clear and functional manner.

Jam3

Grid Portfolio Website Template

Grid-Based Portfolio Website Template

Grid style may be implemented in the background design to add creativity and brightness to the website.

Grid-Style Background Website Template

Another way is using grid layout for the navigation menu design. Such application is taken from the Metro style designs where navigation is represented in a form of large pictures all over the Home Page.

Cheval Blanc

Blocklevel

Website Template with Grid-Style Menu

Navigation menu may be created in column style what makes such design unique and fascinating, like in the example below.

Canalsat

The overall structure of website elements arrangement may also make use of grid design. It may become useful for fashion lookbooks and online stores that wish to showcase their products in a clear and highly representative manner.

Lush

Jewelry Store Website Template

Grid is a nice and versatile design that becomes a huge trend and gains its followers fast. So, we’ll see how it will transform in the future.