Lay­out con­ven­tions to help speed up the design process.

Our design style is very edi­to­ri­al­ly influ­enced. The fol­low­ing grids and scales form a frame­work for lay­out and cre­ativ­i­ty for a num­ber of medi­ums & media sizes.

Web grid

We use a vari­a­tion of the Ger­st­ner grid that has been opti­mized for the respon­sive web. It over­lays 2,3,4,5, & 6 flu­id col­umn grids on top of each oth­er and is spaced based on our base­line grid unit (aka the $line vari­able). Our grid con­cept inspired by Joni Korpi’s Gold­en Grid Sys­tem. The mar­gins and columns are flu­id while the gut­ters main­tain a fixed width. This ensures con­sis­tent pro­por­tion­al spac­ing and align­ment at all screen widths.

Ger­st­ner 2,3,4,5,6 col­umn grid