BROKEN GRID Layout Design

 

BREAKING The GRID  In Web Design

Analysis & Showcase:

 

 


what are asymmetrical and broken grid layouts?

In Broken-grid design, the main goal is to achieve creativity and innovation by applying asymmetrical positioning of text, overlapping images, and irregular shapes. What we said in great detail about advantages of Grid-based design is obviously applicable to Broken-grid as well. In addition, it overcomes the disadvantages that are pertinent to a standard Grid-based layout. Regarding the drawbacks of using the latter, it was mentioned that our options of bringing about fantasy and flexibility to a design are limited. It is due to some rigid guidelines upon which Grid-based technique is constructed. That is the main reason why the idea of Broken Grid design was born,  and where applying an asymmetrical layout was utilized as an effective tool to attain it.




How to set up a Broken Grid layout?

To construct a Broken Grid design, first a solid grid system has to be established in order to be able to break out of it effectively. Then broken grids are achieved by using certain uncommon positioning patterns in the grid system to generate an asymmetrical layout. The process is completed by repeating irregular patterns, mixing and matching both symmetrical and asymmetrical design elements. In this procedure, layering has a vital role. It is achieved by means of layering textures, typography, images, illustrations, colors and white (negative) spaces. Layering elements give a design a dynamic look and brings on a perception of separation and depth to a web page. It creates a sort of offset balance by allowing you to move off the grid while maintaining unity in the design.




benefits of asymmetrical design layouts?

In this new grid layout, the emphasis is on creative and out-of-box utilization of extra elements. Breaking out of a grid can introduce contrast, dynamism and curiosity into web designs. When users see a regular grid design, they come to understand that the page will include more or less the same kind of information. To avoid this shortcoming, applying broken grid or asymmetrical layout is a very handy tool. Furthermore, breaking grid layout is an alluring and efficient way to grab users’ attention — which is always a main part of the functionality of a web design strategy. This necessity becomes even more important when we are creating websites for commercial purposes, like all types of businesses and online stores. In these cases, the major aim of a web designer/developer is to ensure that the website is capable of attracting people and then offering them a significant user experience that realizes their expectations.

 

 

Crate & Barrel

w340

 

 

We Love Noise

w643

 

 

Susy Oliveira

w703

 

 

Design Lab

Broken Grid

 

 

Cmmnty

Broken Grid

 

 

Big Human

w257-a

 

 

Malika Favre

w200-a.jpg

 

 

Heydays

w72-a

 

 

Quipsologies

w110-a

 

 

Wolf & Badger

w163-a

 

 

By Association Only

w379

 

 

M.A.P

w387-a

 

 

Red

w263-a

 

 

Neuarmy

w117-a

 

 

Wallpaper

w622-a

 

 

Dazed Digital

w76

 

 

Solasié

w337-a

 

 

Biola University

w146

 

 

Trippeo

w280

 

 

Our Name Is Mud

w249

 

 

Chris Linden

w227-a.jpg

 

 

Marché Notre Dame

w464

 

 

Track'em Find'em Kill'em

w452

 

 

Heydays

w72-a

 

 

S.A.S.

w417

 

 

All Star Lanes

w577

 

 

Quipsologies

w110-a

 

 

Wolf & Badger

w163-a

 

 

Area 17

w449.JPG

 

 

Dazed Digital

w76

 

 

Esquire

w623-a

 

 

The Daily Beast

w360-a

 

 

Under Consideration

w409

 

 

Ecc

w557-a

 

 

 

 

 

 

 

 


   ::  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.