Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Trends in Web Design: The Grid

Presentation about The Grid and the application thereof to Web Development/Design

Courtney Beadel

on 29 September 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Trends in Web Design: The Grid

THE GRID A BRIEF HISTORY In development for over a century
1910s/1920s, ornamental design gave way to Rationalism & New Objectivity
1928: Die Nue Typographie (The New Typography) by Tschichold published
Post-WWII: Graphic Designers influenced by Tschichold, devised new system to organizing a page resulting in the Typographic Grid
1961: Josef Muller-Brockmann's "Grid Systems in Graphic Design"
1970s: Many corporations adopted the grid
2010: 960 gs framework by Nathan Smith ANATOMY OF THE GRID Margins Column Module Spatial Zone Flowline Gutter Marker NEGATIVE SPACE A BRIEF HISTORY BENEFITS Which would you prefer? This? Or This? Systematic order to layout
Easy to distinguish between types of info
It's easy for the viewer to process Clarity of content Efficient designing Continuity between pages "A grid can add better alignment, balance, equality in spacing for a much better visual experience."
From "To Grid or Not to Grid", Kayla Knight, webitect.net WAIT! REMEMBER... The design is NOT subordinate to the grid...
The grid IS subordinate to the design!

Break the grid if necessary, but be ready to explain "why". PSD TO WEB 1st Step: Column Grid 2nd Step: Wireframes 3rd Step: Design Continue at http://gridfun.courtiebee.com/ 4th Step: Code By Courtney Beadel
Full transcript