Your SlideShare is downloading. ×
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Grids In Modern Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Grids In Modern Web Design

12,012

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 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

    ×