Grids In Modern Web Design
Download as KEY, PDF59 likes20,325 views
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.
More Related Content
Similar to Grids In Modern Web Design (20)
Recently uploaded (20)
![DaVinci Resolve Studio 20.0.0.23 Crack + Activation Key [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/avtpastoralvisits20252026-250407114051-0c8f0fbf-250407123835-a3322f2f-thumbnail.jpg?width=560&fit=bounds)
![Letasoft Sound Booster Crack + Product Key [Latest]](https://cdn.slidesharecdn.com/ss_thumbnails/fashionevolution-250320155619-5efb1817-250409004536-2f8d419c-thumbnail.jpg?width=560&fit=bounds)
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 鞄岳岳沿://敬敬敬.鍖i界一姻.界看馨/沿鞄看岳看壊/姻庄界一厩温稼糸艶姻鉛艶艶一/3328096531/
- 9. BOOKS 鞄岳岳沿://敬敬敬.鍖i界一姻.界看馨/沿鞄看岳看壊/敬艶恢界温姻稼艶岳/2184951234/
- 10. NEWSPAPERS http://www.鍖ickr.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
- 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 Wont Impede Your Creativity But it will give your design that feeling of considered organization
- 25. So, hows it work?
- 26. So, hows it work? Grids are constructed by continually sub-dividing the available canvas area by a ratio.
- 27. But... this is the net! We dont have a set canvas area... browsers are different sizes, scrolling, and so on.
- 28. So, whats a web designer to do?
- 29. So, whats 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. Well 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 wont restrict your creativity
- 45. WRAPPING UP 油Grids can make your designs more usable by visually 油Grids wont restrict your creativity 油Grids on the web are constructed a bit differently
- 46. Questions?
- 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