GRID-Based Design Technique

 

Grid-Based Website Design

Analysis & Showcase




What is a grid system?

The grid technique — as a fundamental part of the design process — originally comes from print design that has been around for a long time. Looking back on old newspapers and books — where texts are lined up in columns — reveals this reality. A grid is simply a series of intersecting horizontal and vertical lines spaced at regular intervals that determine the place of design elements. It is an invisible framework that lends a sense of structure and balance to a site and improves usability for the visitors by creating predictable patterns for them. The most accepted grid form is the 960 grid system, a 960 pixels width which is a divisible number. By utilizing this grid system, it creates several potentialities to help decide in which dimensions the elements on a website page should be arranged. Modular grids are often combined with images to create a patchwork quilt layout that neatly presents a large amount of content in a small space.


A grid system is a tool that provides a solid base and an easy way for designers to structure and present content and images in an organized, manageable, and readable way. As a result, harmony and continuity is kept between all of the elements on a website. Being very versatile, Grid-based strategy has consequently been extensively utilized by many websites. Since modular layout gives an order to the design elements, it is an appropriate choice for portfolio or online store sites when you need to showcase your work or products in the most organized way.




Pros of Grid-based web design

The main objective of Grid-based layouts is to create a connection of unity within a design. This design trend can enhance both the appearance and usability of a web page by making contents flow better and hence more readable. The following is a list of its advantages:


  • Suitable for Content-Rich Websites
    Grid-based layout is an ideal option for websites that have a great deal of content, — content heavy websites like blog themes — because it helps to evenly distribute the content in well-arranged rows and columns.

  • Clarity, Organization and Consistency
    We organize our designs to help users absorb the information we are trying to communicate. Grid-based design hands over designer guidelines to order information more efficiently which in return makes the content more clean, organized and readable. So grid systems are of great help to create consistency, proportion, rhythm, and harmony. All of these features bring about a good overall user experience that is based on consistent familiarity.

  • Easy and user-friendly Navigation
    By being organized and clean, Grid web design helps the users to better understand how to navigate a site and find the information they are looking for. Additionally, this web technique has potential for drawing users' attention and to direct them to specific content. The reason lies in the fact that Grid-based web design effectively accommodate the concept of ‘the above the fold’. This term was first used to describe the placement of content on a newspaper's front page. Since newspapers are folded in half, designers need to use the top fold of the paper to capture the reader’s attention. In web design it means that to make sure the most important content can be seen without scrolling.

  • Functional across a multitude of devices
    Today, including Responsive feature on websites is not any longer an option, it is a necessity. Grid-based designs automatically fulfill this essential requirement, simply because it provides the functionalities to create responsive websites. In this respect, Grid-based web design can work wonders. The reason behind this flexibility is its layout system that permits a single set of programming code to be applied across various platforms including PCs, smartphones, tablets, etc.

  • Flexibility and Efficiency
    Having a structure, grid system, already in place, designers can simply insert content where it needs to go. It means not only it becomes less costly and easier to a build a design project but much easier to switch around design elements and information with little to no design adjustments. All in all, this design approach quickens the design process overall, hence makes it economical as well.



Cons of Grid-based web design

As the old saying goes, “nothing is perfect.” Despite all of the obvious benefits of using a strict grid layout, it is not always an appropriate choice. It has its own constraints which involves some disadvantages.


  • Limited Creative Usage
    Thanks to some predefined rigid guidelines, Grid-based design is for efficiency and consistency — not for creativity. It restricts the design by forcing it to be constrained and even confined. As the design elements have to be allocated to particular places, implementation of abstraction and innovation is limited which consequently gets in the way of creativity. Since traditional grid system don’t provide the flexibility to support an out-of-the-box thinking, it is not uncommon that web designers end up with layouts that appear almost similar and monotonous.

  • Not Suitable for All Sites
    Since the Grid-based design is pretty much fixed — without any potential elasticity, — it does not give a vibrant feeling enough to go with different websites. In other words, the web design layouts based on grids are not appropriate in all cases. This design technique works best for sites that have a lot of content. However, when it comes to dynamic content — like RSS feeds, — the situation is different. If you are dealing with user-generated content, — where grid items do not have the same height — applying Grid-based layout turn into a tricky task. Due to its nature, content will want to grow and be updated at will. Although there is after all a solution for it — e.g. by using JavaScript assistance like Magic Grid, — it means executing an extra process which does not seem highly motivated.

 

 

Abbey Theatre

Grid-Based

 

 

Unheap

w311-a

 

 

Sundance Festival

w450-a

 

 

Baubau Haus

w629

 

 

New Quest

w322

 

 

Yvan Rodic

w681

 

 

Lucid

w459-a

 

 

Teaching History

w247-a

 

 

Mike Mcquade

w61

 

 

DC Fonts

w258

 

 

Dribbble

Grid-based

 

 

Airbnb

Grid-based

 

 

Salomon

w682

 

 

Steve Vorass

w719

 

 

Brooklyn Slates

w721

 

 

M.A.P.

w462

 

 

Perfect View

w58-a

 

 

Reserved

w702

 

 

Fiverr

w38

 

 

Neuarmy

w117-a

 

 

Dazed Digital

w76

 

 

>Wallpaper

w622-a

 

 

Protest

w679

 

 

Grinteq

w854

 

 

 

 

 

 

 


   ::  Please Note

Each of our articles includes a showcase of the websites that are best representative of the related web design category. As we know, websites are live documents and might be changed over a period of time in different regards. They may change their layout designs, contents, etc., or simply cease to exist (error codes: 404, 403, 401).

We do our best to regularly update our materials regarding these eventual modifications. However, it might happen that we could not keep up with these changes in time. So in case you are the first to notice these inconsistencies, please inform us. We really appreciate your feedback. You can easily contact us via our 'Contact Form' at the bottom of this page.
 

 

 

 

 

 

 


   ::  Contribute!

We are a small group doing our best to improve the quality of this site by presenting the latest information in web design industry via publishing new quality articles. You can contribute to this process through sending us your materials. We will publish them under your name.


 


   ::  Share it!

In case you find some of these articles interesting and useful, please send the article's link page to a friend so they can benefit as well.

Furthermore, if you happen to have a site similar to ours, please feel free to link to these editorials from your website.