Grids in Web Design

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1


    UM GUIA QUE DISPONIBILIZA UMA SERIE DE HIPOTESES PARA O DESIGNER CHEGAR AH SOLUO QUE MELHOR SE ADAPTA AO SEU TRABALHO
















    8 Favorites

    Grids in Web Design - Presentation Transcript

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

    + distrodistro, 7 months ago

    custom

    2034 views, 8 favs, 1 embeds more stats

    My Barcamp PT Spring '09 presentation about CSS gri more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 2034
      • 2029 on SlideShare
      • 5 from embeds
    • Comments 0
    • Favorites 8
    • Downloads 109
    Most viewed embeds
    • 5 views on http://www.brijj.com

    more

    All embeds
    • 5 views on http://www.brijj.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories