Back to the Grid

I really enjoyed the Grid based design to Optimize Content Authoring and Presentation session, not only because it introduced me to Josef Muller Brockmann absolutely amazing grid based designs (I can now see what I will adorn my walls with when I am a grown up in a nice house) but also because I have a museum crush on the IMA. I love everything they do.

Matt and Charles from the IMA introduced us to Grid-based Web design built on a print ‘typographic grid’ technique. Emil Ruder and Josef Muller Brockmann played with this technique to produced a flexible layout system which is rational, beautiful and easy to understand. They showed us that by borrowing a grid design approach from print and applying it to their website, it can create a common and simplified language for the web developers and Designers alike. Changing the focus on style more than layout, because the grid system does the layout for you with columns conventions. The IMA website is a great case study for grid based design – the site looks elegant, clean and consistent.

Benefits for designers:
• a grid framework automatically define the number of adding and margin of columns
• Clearly and logical patterns which helps organise a wide range of dynamic content
• Dramatically cuts the time devoted to creating CSS style sheets to define.
• Template that can be easily replicated customized and rapidly implemented
• use negative margins to pull elements out of grid boundaries
• Abandon the grid inside or outside content areas
• Use background images that bleed outside of the grid boundaries
• Wrap grid divs with container divs
• Unique of examples of grid design
• 12 column wide grid layout

Benefits for web developers:
• tools are easier to build
• Predetermine image/content sizes; layouts

Benefits for content authors:
• easy to understand concept
• Indirectly enforces consistency
• Reducing concepts encourages consistency
• Enables rich layouts
• Simple tools


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s