Grids or Organic Layouts?

Published on December 27, 2005

Circles, Triangles or Rectangles? has become a recurring question in my design work - both for print and the web. While boxy shapes are usually considered strong and masculine, round forms are commonly associated with soft, aesthetic, female characteristics - just what I think is needed for pleasing, sleek designs that beg to be different from the masses.

As a long-time webdesigner who got his start in the mid 90’s, I grew up with table-based layouts. Not surprisingly, the resulting websites oftentimes followed a rigid/rectangular layout, to the dismay of the aestheticist inside me. These days, I’ll routinely poll my wife on new layout ideas and get her input - tapping into the views of the other half of humankind. The more we talk about design in general, the more I realize that even after all these years, I still haven’t broken free from boxes.

In a recent A List Apart article, CSS/Design-guru Molly Holzschlag is discussing her thoughts on Thinking Outside the Grid.“With today’s technologies and techniques, we are free to create grid designs - or we can choose to break out of grids completely. That such choice can empower a web designer is unquestionable: the true challenge lies in the way we bring ourselves to “lose small mind” and think outside the grid.”

Molly rightly concludes that the “beauty and challenge of working with modern layouts is that (…) we have options. With CSS, we have a means of creating manageable, lightweight, visually rich designs that can be grid designs if we want them to be. But we can also easily deconstruct the grid or dispense with it entirely.”

In my personal work towards new, engaging and unusual designs, it is this freedom to create complex organic layouts that I find most difficult to embrace - requiring me to move from the familiar into uncharted territory, leaving grid-designs behind…



What Do You Think? Leave a Reply


(optional)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>