Grids in Modern
Web Design

Twitta: @kylemeyer
1.19.2010
Kyle Meyer
Lead UX Designer @ Clockwork
Design Blogger @ astheria.com
Director of Interactive @ AIGA MN
Clockwork      CLOCKWORK.NET




Strategy      Social Media
Design        Mobile
Development   Applications
So, why use a grid?
So, why use a grid?
    There is a theory that exists

“
    called the ‘Aesthetic Usability
    Effect’. This theory sugg...
APPLE IPHONE
So, why use a grid?


“   Well designed grid systems
    can make your designs not
    only more beautiful and
    legible...
MAGAZINES




            http://www.flickr.com/photos/rickvanderleek/3328096531/
BOOKS




        http://www.flickr.com/photos/webcarnet/2184951234/
NEWSPAPERS




             http://www.flickr.com/
               photos/hokiecsgrad/
                       570228203
So, what exactly
is a grid?
According to Google:


“   A pattern of regularly spaced
    horizontal and vertical lines
According to a
Designer:


“   Grids are a standard way of
    organizing things visually
Organize Visually?!
A tale of two cities
NEW YORK CITY, NEW YORK
LONDON, UNITED KINGDOM
What went wrong?
What went wrong?
One thing: Failure to Plan
And now to the
Web...
A tale of two sites
SUBTRACTION   SUBTRACTION.COM
SUBTRACTION   SUBTRACTION.COM
ELLIOT JAY STOCKS   ELLIOTJAYSTOCKS.COM
ELLIOT JAY STOCKS   ELLIOTJAYSTOCKS.COM
Using a Grid Won’t
Impede Your
Creativity
But it will give your design that
feeling of considered
organization
So, how’s it work?
So, how’s it work?
Grids are constructed by
continually sub-dividing the
available canvas area by a
ratio.
But... this is the ‘net!
We don’t have a set canvas area...
browsers are different sizes,
scrolling, and so on.
So, what’s a web
designer to do?
So, what’s a web
designer to do?
Work with columns, baselines, and
situational sub-divisions
COLUMNS   YOUR HORIZONTAL GRID
COLUMNS   YOUR HORIZONTAL GRID
BASELINES   YOUR VERTICAL GRID   CREDIT: WILSON MINER
CALCULATING BASELINES     YOUR VERTICAL GRID




Say we have our main content at 12px, and a 18px
line-height. Pretty stan...
CALCULATING BASELINES       YOUR VERTICAL GRID




All of our sub-sequent line-heights, should now be
multiples of 18 (our...
CALCULATING BASELINES     YOUR VERTICAL GRID




Say we have some smaller type. We’ll still use our
multiple of 18 rule. C...
SITUATIONAL SUB-DIVISIONS   YOUR GRID WITHIN THE GRID
SITUATIONAL SUB-DIVISIONS     YOUR GRID WITHIN THE GRID




You can see boxes occur in your design naturally as
you place ...
SITUATIONAL SUB-DIVISIONS     YOUR GRID WITHIN THE GRID




You can see boxes occur in your design naturally as
you place ...
SITUATIONAL SUB-DIVISIONS   GOLDEN RATIO
SITUATIONAL SUB-DIVISIONS   RULE OF THIRDS
SITUATIONAL SUB-DIVISIONS   FIBONACCI SEQUENCE
Wrapping up
WRAPPING UP

— Grids can make your designs more usable by
visually
WRAPPING UP

— Grids can make your designs more usable by
visually

— Grids won’t restrict your creativity
WRAPPING UP

— Grids can make your designs more usable by
visually

— Grids won’t restrict your creativity
— Grids on the ...
Questions?
Thank you

Twitta: @kylemeyer
1.19.2010
RESOURCES



— 960.gs
— http://www.thegridsystem.org/
— http://en.wikipedia.org/wiki/Golden_ratio
— http://en.wikipedia.or...
Upcoming SlideShare
Loading in...5
×

Grids In Modern Web Design

12,245

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
56 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,245
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
643
Comments
3
Likes
56
Embeds 0
No embeds

No notes for slide
  • Grids In Modern Web Design

    1. 1. Grids in Modern Web Design Twitta: @kylemeyer 1.19.2010
    2. 2. Kyle Meyer Lead UX Designer @ Clockwork Design Blogger @ astheria.com Director of Interactive @ AIGA MN
    3. 3. Clockwork CLOCKWORK.NET Strategy Social Media Design Mobile Development Applications
    4. 4. So, why use a grid?
    5. 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. 6. APPLE IPHONE
    7. 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. 8. MAGAZINES http://www.flickr.com/photos/rickvanderleek/3328096531/
    9. 9. BOOKS http://www.flickr.com/photos/webcarnet/2184951234/
    10. 10. NEWSPAPERS http://www.flickr.com/ photos/hokiecsgrad/ 570228203
    11. 11. So, what exactly is a grid?
    12. 12. According to Google: “ A pattern of regularly spaced horizontal and vertical lines
    13. 13. According to a Designer: “ Grids are a standard way of organizing things visually
    14. 14. Organize Visually?! A tale of two cities
    15. 15. NEW YORK CITY, NEW YORK
    16. 16. LONDON, UNITED KINGDOM
    17. 17. What went wrong?
    18. 18. What went wrong? One thing: Failure to Plan
    19. 19. And now to the Web... A tale of two sites
    20. 20. SUBTRACTION SUBTRACTION.COM
    21. 21. SUBTRACTION SUBTRACTION.COM
    22. 22. ELLIOT JAY STOCKS ELLIOTJAYSTOCKS.COM
    23. 23. ELLIOT JAY STOCKS ELLIOTJAYSTOCKS.COM
    24. 24. Using a Grid Won’t Impede Your Creativity But it will give your design that feeling of considered organization
    25. 25. So, how’s it work?
    26. 26. So, how’s it work? Grids are constructed by continually sub-dividing the available canvas area by a ratio.
    27. 27. But... this is the ‘net! We don’t have a set canvas area... browsers are different sizes, scrolling, and so on.
    28. 28. So, what’s a web designer to do?
    29. 29. So, what’s a web designer to do? Work with columns, baselines, and situational sub-divisions
    30. 30. COLUMNS YOUR HORIZONTAL GRID
    31. 31. COLUMNS YOUR HORIZONTAL GRID
    32. 32. BASELINES YOUR VERTICAL GRID CREDIT: WILSON MINER
    33. 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. 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. 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. 36. SITUATIONAL SUB-DIVISIONS YOUR GRID WITHIN THE GRID
    37. 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. 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. 39. SITUATIONAL SUB-DIVISIONS GOLDEN RATIO
    40. 40. SITUATIONAL SUB-DIVISIONS RULE OF THIRDS
    41. 41. SITUATIONAL SUB-DIVISIONS FIBONACCI SEQUENCE
    42. 42. Wrapping up
    43. 43. WRAPPING UP — Grids can make your designs more usable by visually
    44. 44. WRAPPING UP — Grids can make your designs more usable by visually — Grids won’t restrict your creativity
    45. 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. 46. Questions?
    47. 47. Thank you Twitta: @kylemeyer 1.19.2010
    48. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×