Grid Systems from Bas Leurs
Ever wonder how professional graphic designers make their work look so… professional? And how they manage to create complex layouts so quickly?
Simple. Both web and graphic designers—as well as architects—use one of greatest tools in the visual arts: the grid system.
Of the many different attempts during art history to create a design system based on a grid, the so-called Swiss Grid is probably the foremost example. In many ways, modernist graphic design is the Swiss Grid.
Based on a strategically chosen number of columns and sometimes also on text parameters such as font size and leading as well as baseline, the grid system makes placing elements on a page fast and precise.
For the reader, it makes a series of pages—or screens—predictable and intuitive. This increases usability and comprehension. In e-commerce systems, the well structured layout increases sales by making the navigation of the site and shopping cart more efficient.
Artist and designer Guity Novin sums it up fairly well on her blog:
Swiss style focus on clarity, eye-friendliness, readability and objectivity has made it a powerful tool for web-communications, which enhanced by its strong reliance on elements of typography and universality.
Grid systems in web design have spawned a number of the Cascading Style Sheets (CSS) frameworks. For instance, the 960 Grid System, Fluidable, Columnal and Cardinal are efforts to streamline web development workflow by providing commonly used dimensions.
These CSS frameworks are designed to simplify the creation of webpages based on a grid system. A number of websites have been created using the framework. Some of the exemplars are good examples on how using a grid system can produce aesthetically beautiful websites.
Grids are used to present content in a consistent and predictable manner, helping to organise content in a methodical fashion. It affords conformity and uniformity, increasing the usability of any given system, by placing items and information in a predictable manner, reducing the cognitive overload of users.
“According to the principles of consistency, systems are more useable and learnable when similar parts are expressed in similar ways, learn new things quickly, and focus attention on the relevant aspects of a task” (Lidwell, Holden and Butler, 2010: 24)
http://guity-novin.blogspot.com/2011/07/chapter-42-swiss-grade-style-and-dutch.html
