Grids In Modern Web Design

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.ﬂickr.com/photos/rickvanderleek/3328096531/

BOOKS http://www.ﬂickr.com/photos/webcarnet/2184951234/

NEWSPAPERS http://www.ﬂickr.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

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

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 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

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

Grids In Modern Web Design

by Kyle Meyer

Accessibility

Categories

Upload Details

Usage Rights

16 Embeds 608

Statistics

Grids In Modern Web Design Presentation Transcript