Grids in Web Design
-
Upload
bernardo-raposo -
Category
Technology
-
view
4.324 -
download
0
Transcript of Grids in Web Design
![Page 1: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/1.jpg)
Grids in Web Design
@braposo
![Page 2: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/2.jpg)
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
![Page 3: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/3.jpg)
Why grids in Web Design?
![Page 4: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/4.jpg)
Why grids in Web Design?
Guide for the designer/developer
Keeps overall coherence
Usability matters
Avoids rendering errors across browsers
Enables quick layout changes
![Page 5: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/5.jpg)
Fluid layout design
![Page 6: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/6.jpg)
Fluid layout design
Adapts to any browser window
Based on relative units (% or em)
Users control the design
Limits designers’ creativity
![Page 7: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/7.jpg)
Fixed layout design
![Page 8: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/8.jpg)
Fixed layout design
Resolution independent
Based on fixed units (px)
Designers are in control
Multi-column grids
![Page 9: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/9.jpg)
CSS Grid Systems
YUI vs 960
![Page 10: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/10.jpg)
YUI CSS grid
Based in relative units
Multiple pre-defined document layouts
Different layouts with same structure
Useful for fluid layouts
Grid Builder
![Page 11: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/11.jpg)
YUI CSS grid
Unfriendly naming conventions
Pre-defined grid
Different layouts need nested grids
![Page 12: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/12.jpg)
960 Grid System
960px layouts
Based in fixed-width columns
12 column and 16 column versions
Versatile layout
Easy to understand
![Page 13: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/13.jpg)
960 Grid System
Rigid layout
Layout changes need more code rewriting
Not recommended for small resolutions
![Page 14: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/14.jpg)
How to choose a grid?
![Page 15: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/15.jpg)
How to choose a grid?
YUI CSS grid 960 Grid SystemFluid layout Rigid layout
Flexible grid Versatile grid
Resolution free Lots of illustrations
![Page 16: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/16.jpg)
The Grid Systemhttp://www.thegridsystem.org/
ALA: Fluid Gridshttp://www.alistapart.com/articles/fluidgrids
YUI CSS Gridhttp://developer.yahoo.com/yui/grids/
960 Grid Systemhttp://960.gs/
Grid Based Design Toolboxhttp://www.fuelyourcreativity.com/grid-based-design-toolbox/
More information...
![Page 17: Grids in Web Design](https://reader033.fdocuments.us/reader033/viewer/2022042908/58f389421a28abed088b457f/html5/thumbnails/17.jpg)
Imageshttp://www.sxc.hu/photo/944563http://www.flickr.com/photos/45848020@N00/3026837925/http://www.flickr.com/photos/psousa/2841204262/http://www.sxc.hu/photo/992585http://www.sxc.hu/photo/777662http://www.flickr.com/photos/martin-kulakowski/3055870213/http://www.sxc.hu/photo/214770
ContactsEmail: [email protected] Blog: http://nowiknow.wordpress.comTwitter: @braposo Portfolio: http://braposo.carbonmade.com
Thank you!