Grid Based Layout

50 %
50 %
Information about Grid Based Layout

Published on November 20, 2008

Author: gordonbrander



A quick overview of design before and after the modernist movement, some examples of why grids are good and an intro to so you can get started on grids your own self.

Presented at Refresh Denver (

Grid-based design Gordon Brander Crowd Favorite [email_address] .com

Name Gordon Brander http:// Grids? Heck yes.

A brief history of grids

Alphonse Maria Mucha

Alphonse Maria Mucha

Aubrey Beardsley

Ornamentation Nature Subjective Experience The sublime Design of the 19 th Century

Josef Muller Brockman

Josef Muller Brockman

Otl Aicher

Efficiency Rationality Objectivity Aesthetics of the Machine Design of the 20 th Century Standardization

Why grids? Grids create visual harmony

Structured page, no grid



Why grids? Grids provide coherence to complexity

Why grids? Grids allow you to do more with less Getting started with grids

PSDs! (Fireworks and OmniGraffle too) Sketch sheets!

Easy CSS classname based grid Questions? Thanks!

Add a comment

Related presentations

Related pages

Grid (graphic design) - Wikipedia, the free encyclopedia

A page layout grid (shown in white lines) composed of a series of intersecting vertical and horizontal grid lines. The text is not part of the grid.
Read more

Grid-based Layout - Interaction Design Pattern Library ...

Great to educate developers about grids: I'd encourage them all to learn more! The proportion and style of the grid is very important. The information ...
Read more

Designing With Grid-Based Approach – Smashing Magazine

The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures ...
Read more

Principles - Layout - Google design guidelines

Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning ...
Read more

A Brief Look at Grid-Based Layouts in Web Design

Take a look at some of the biggest sites out there today that are showcasing top-notch designs. It’s very likely they’ve used a grid of some sort.
Read more

Grid-Based Layouts 101

Learn to use grids in your print and web designs. Learn about grids, how they work and how they can make your work easier and your designs better.
Read more

960 Grid System

Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
Read more

Grid-Based Web Design, Simplified – Smashing Magazine

Search on Smashing Magazine Search. ... you’ve probably worked on some kind of a grid or at the very least seen examples of grid-based layouts. Grids are ...
Read more

The Grid System - dedicated to all things Grid.

All about grid based design, grid systems, grid layout, templates, and everything else related to grids.
Read more

A flexible, grid based layout — Responsive Web Design

In 2009 Ethan Marcotte wrote the first article on flexible grids. Even after 5 years it's still the same rules.
Read more