• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Grids In Modern Web Design
 

Grids In Modern Web Design

on

  • 13,546 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 ...

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.

Statistics

Views

Total Views
13,546
Views on SlideShare
12,398
Embed Views
1,148

Actions

Likes
51
Downloads
618
Comments
3

19 Embeds 1,148

http://www.designversatil.com.br 539
http://nso.district287.org 368
http://secmoodle.district287.org 91
http://www.slideshare.net 53
http://www.class.in.th 49
http://www.webheadneeded.com 11
http://fogcover.wordpress.com 8
http://116.75.138.205:81 4
http://www.e-presentations.us 4
https://www.facebook.com 4
http://moodle.mrmanzin502.com 4
http://www.brijj.com 4
http://getpocket.com 2
http://feeds.feedburner.com 2
http://coderwall.com 1
http://zizsoft.com 1
http://www.google.com.br 1
http://quirktools.com 1
http://paper.li 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Grids In Modern Web Design Grids In Modern Web Design Presentation Transcript

  • 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 suggests that things which are designed to be beautiful are inherently more usable as a result. — MARK BOULTON
  • APPLE IPHONE
  • So, why use a grid? “ Well designed grid systems can make your designs not only more beautiful and legible, but more usable. — MARK BOULTON
  • 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 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; }
  • 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; }
  • 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; }
  • 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 elements. You can take these boxes and apply basic principles to them: - The Golden Ratio division (aka phi) - The rule of thirds - Fibonacci pattern
  • 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
  • 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 web are constructed a bit differently
  • 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.org/wiki/ Fibonacci_number — http://en.wikipedia.org/wiki/Rule_of_thirds