meet the grids - web design using grids

let’s talkGRID

ramses.cabello@gmail.com @ramsescabello

what is a grid?

what is a grid?

what is a grid?

in graphic design a grid is a series of vertical and horizontal lines that are used to subdivide a space. this give us an easier approach to the page layout.

why grids?

it saves ustime

visual consistencybetween different

pages

a web grid

a web grid

a web grid is a framework.

a web grid

a web grid is a framework.

a web grid creates equal width columns,.

a web grid

a web grid is a framework.

a web grid creates equal width columns.

it helps out layout our page structure.

a web grid

a web grid is a framework.

a web grid creates equal width columns.

it helps out layout our page structure.

visual consistency.

a web grid

a web grid is a framework.

a web grid creates equal width columns.

it helps out layout our page structure.

visual consistency.

examples

meet the grids

meet 960

lightweight

meet 960

lightweight

easy to use

meet 960

lightweight

easy to use

fast

meet 960

lightweight

easy to use

fast

fixed width

meet 960

lightweight

easy to use

fast

meet 960

fixed widthmobile ( ? )

DON’TPANIC.

meet unsemantic

lightweight

easy to use

fast

responsive

1180px wide

unsemantic syntax

<div class="grid-container"> <div class="grid-100 mobile-grid-100"> <header> Cabecera </header> </div></div>

unsemantic resources

http://unsemantic.com/

action!

http://bit.ly/1fg7dFi