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.

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