DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
GRID HISTORY 101
Way back in the mid 1800s, a
dude named William Morris
and his buddy, Philip Webb,
designed a house where the
rooms were organized
according to purpose — in a
grid-like fashion.
This led people to rethink
how books were laid out,
and incorporated a grid.
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
FAST FORWARD
Today, grids are very
commonly used in web
design.
Grids on the Internet help
organize large amounts of
information in easy-tonavigate, digestible
information.
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
APPROACHES
Single Column
Multi Column
Modular
Hierarchical
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
APPROACHES
Single Column
Multi Column
Modular
Hierarchical
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
APPROACHES
Single Column
Multi Column
Modular
Hierarchical
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
APPROACHES
Single Column
Multi Column
Modular
Hierarchical
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
WHY GRIDS ARE SO GREAT
Keeps content organized
Creates an order by distinguishing different
types of information
Enhances navigation & usability
Saves design time, because you have
limitations to work within
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
HOW TO CREATE A GRID
Evaluate the content to be organized
Group related information together
Decide the most important piece of content,
and organize the rest around it
Choose a type of grid that works best with
your content organization
The purpose of a grid is to organize your
content in a manner that is easy to
understand, has a good flow, and is replicable
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
BASIC 12-COLUMN GRID
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
DIVIDED INTO 3 MAIN SECTIONS
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY
WIREFRAME USING THE GRID
THAT’S THE BASICS! LET’S KEEP MOVING.
DESIGNING WITH GRIDS
THE ULTIMATE WEB DESIGNER • BRAD HUSSEY