Grids In Modern Web Design

14,706 views
14,197 views

Published on

Presentation I gave on 1/19/2010 to students at the Art Institutes International Minnesota, detailing the basics of grid design and the application of their early fundamentals of design classes in visual design theory for the web.

Published in: Design, Technology, Business
3 Comments
58 Likes
Statistics
Notes
No Downloads
Views
Total views
14,706
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
661
Comments
3
Likes
58
Embeds 0
No embeds

No notes for slide
  • Grids In Modern Web Design

    1. Grids in Modern Web Design Twitta: @kylemeyer 1.19.2010
    2. Kyle Meyer Lead UX Designer @ Clockwork Design Blogger @ astheria.com Director of Interactive @ AIGA MN
    3. Clockwork CLOCKWORK.NET Strategy Social Media Design Mobile Development Applications
    4. So, why use a grid?
    5. So, why use a grid? There is a theory that exists “ called the ‘Aesthetic Usability Effect’. This theory suggests that things which are designed to be beautiful are inherently more usable as a result. — MARK BOULTON
    6. APPLE IPHONE
    7. So, why use a grid? “ Well designed grid systems can make your designs not only more beautiful and legible, but more usable. — MARK BOULTON
    8. MAGAZINES http://www.flickr.com/photos/rickvanderleek/3328096531/
    9. BOOKS http://www.flickr.com/photos/webcarnet/2184951234/
    10. NEWSPAPERS http://www.flickr.com/ photos/hokiecsgrad/ 570228203
    11. So, what exactly is a grid?
    12. According to Google: “ A pattern of regularly spaced horizontal and vertical lines
    13. According to a Designer: “ Grids are a standard way of organizing things visually
    14. Organize Visually?! A tale of two cities
    15. NEW YORK CITY, NEW YORK
    16. LONDON, UNITED KINGDOM
    17. What went wrong?
    18. What went wrong? One thing: Failure to Plan
    19. And now to the Web... A tale of two sites
    20. SUBTRACTION SUBTRACTION.COM
    21. SUBTRACTION SUBTRACTION.COM
    22. ELLIOT JAY STOCKS ELLIOTJAYSTOCKS.COM
    23. ELLIOT JAY STOCKS ELLIOTJAYSTOCKS.COM
    24. Using a Grid Won’t Impede Your Creativity But it will give your design that feeling of considered organization
    25. So, how’s it work?
    26. So, how’s it work? Grids are constructed by continually sub-dividing the available canvas area by a ratio.
    27. But... this is the ‘net! We don’t have a set canvas area... browsers are different sizes, scrolling, and so on.
    28. So, what’s a web designer to do?
    29. So, what’s a web designer to do? Work with columns, baselines, and situational sub-divisions
    30. COLUMNS YOUR HORIZONTAL GRID
    31. COLUMNS YOUR HORIZONTAL GRID
    32. BASELINES YOUR VERTICAL GRID CREDIT: WILSON MINER
    33. CALCULATING BASELINES YOUR VERTICAL GRID Say we have our main content at 12px, and a 18px line-height. Pretty standard: body, p { ul, ol, img { font-size: 12px; margin: 0 0 18px; line-height: 18px; } margin: 0 0 18px; } li { line-height: 0 0 18px; }
    34. CALCULATING BASELINES YOUR VERTICAL GRID All of our sub-sequent line-heights, should now be multiples of 18 (our basic line-height). So for headlines: h1 { h2 { font-size: 24px; font-size: 18px; line-height: 36px; line-height: 18px; margin: 0 0 18px; margin: 0 0 6px; } padding: 12px 0 0; }
    35. CALCULATING BASELINES YOUR VERTICAL GRID Say we have some smaller type. We’ll still use our multiple of 18 rule. CSS centers type within its line- height: p.sub { font-size: 9px; line-height: 18px; margin: 0 0 18px; }
    36. SITUATIONAL SUB-DIVISIONS YOUR GRID WITHIN THE GRID
    37. SITUATIONAL SUB-DIVISIONS YOUR GRID WITHIN THE GRID You can see boxes occur in your design naturally as you place elements. You can take these boxes and apply basic principles to them: - The Golden Ratio division (aka phi) - The rule of thirds - Fibonacci pattern
    38. SITUATIONAL SUB-DIVISIONS YOUR GRID WITHIN THE GRID You can see boxes occur in your design naturally as you place elements. You can take these boxes and apply basic principles to them: - The Golden Ratio division (aka phi) - The rule of thirds - Fibonacci pattern
    39. SITUATIONAL SUB-DIVISIONS GOLDEN RATIO
    40. SITUATIONAL SUB-DIVISIONS RULE OF THIRDS
    41. SITUATIONAL SUB-DIVISIONS FIBONACCI SEQUENCE
    42. Wrapping up
    43. WRAPPING UP — Grids can make your designs more usable by visually
    44. WRAPPING UP — Grids can make your designs more usable by visually — Grids won’t restrict your creativity
    45. WRAPPING UP — Grids can make your designs more usable by visually — Grids won’t restrict your creativity — Grids on the web are constructed a bit differently
    46. Questions?
    47. Thank you Twitta: @kylemeyer 1.19.2010
    48. RESOURCES — 960.gs — http://www.thegridsystem.org/ — http://en.wikipedia.org/wiki/Golden_ratio — http://en.wikipedia.org/wiki/ Fibonacci_number — http://en.wikipedia.org/wiki/Rule_of_thirds

    ×