16. Components
‣ Baseline grid
- invisible line letterforms
‣ Fields
- horizontal division
- visual placement helper on y-axis
- based on baseline grid (!)
- calculation
- print: divide by number
- web: use golden ratio
23. Why?
‣ Order and Structure
- If a user feels the grid, he will use it.
‣ Consistence
- Predictable content placement
- Make collaboration easier
‣ Problem solving
- Framework for designers
- Print ≠ web
‣ Creativity
26. Photo by Jason Rhode CC license
“The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid; it is an art that requires practice.”
- Josef Müller-Brockmann
Toolbox Silver Bullet?
33. Grids
‣ sit in container
- take up horizontal space
- floated next to eachother
.container_12 .grid_3{
width:220px;
}
3 x 60px = 180 px columns
2 x (2x10px) = 4O px gutters
--------
22O px