The use of organic elements within a rectilinear grid system is a phenomenon of design that has not been clarified and
discussed due to lack of definition and realization. This paper will contain a discussion of a new design principle born out of the
World Wide Web and interface design. The purpose of this paper is to reveal and define a current movement that has not been
identified in a contemporary context. I title this movement and design phenomenon the “Organicgrid.”
The building blocks for a designer are principles that he or she has acquired over their many years of education and experience.
A designer’s sensibility in each project they construct is something I refer to as designer’s intuition. Intuition is what drives the
best designers from past, the present and the future. But this intuition has its roots in the rules of art. Composition, layout,
balance and symmetry are examples of the natural rules that govern our decisions in the end.
Many movements in design have been based on these rules. These movements are based on principles discovered to
effectively create compelling and visually balanced design pieces. The rectilinear grid system refined and implemented by the
Swiss years is a great example of a design movement governed by an overriding principle. Our contemporary layout and design
compositions are still based on a grid system.
A grid system is a perfect example of how the designers need to organize information and make it functional led to a design
movement. This principle was not always seen as a standard in design. But like many contemporary movements and principles,
they were first used for pragmatic reasons but not defined. Many people before the Swiss used a grid system to create layouts.
This can be seen in many earlier printed materials. One example of course is the Gutenburg Bible of 1455. This book when
printed on a press had a very simple grid based system. Movable type necessitated grid-like thinking with respect to page layout.
But why did people that came after this not see this style of layout as a movement or principle? Simple, it was not defined. To
have a principle of design, it can not just be seen and used, it must have a definition. This definition must then be accepted as
After studying the many movements and principles we have come to accept as a reasonable foundation for design, I noticed a
stylistic trend that in my eyes is a new design movement. And to become a new design principle, it must be defined. The name I
have given this design theory is, “The Organicgrid”
An organicgrid is, “the combination of a grid based layout and non-grid based elements, or organic based shapes. The resulting
design has a tension between chaos and structure that is visually exciting yet orderly.”
A Base Definition of Organic
* Having or characterized by a usually flowing asymmetrical shape or outline. Characterized by an unconventional or variable
form. Having or being an irregular or asymmetrical shape or design.
The traditional definition of organic is:
* Forming an integral element of a whole, having systematic coordination of parts, having the characteristics of an organism:
developing in the manner of a living plant or animal.
What Exactly is an Organic Grid
The reason behind the advent of the organicgrid is my observation of a trend that I have seen surfacing across design
To begin to understand the definition of organicgrid we must first address the Internet. First created as a medium for transferring
textual information, the web was not built upon a graphic orientation, but much like computers in general, were built for textual
information. Over the years designers and users have grown more and more restless. We have demanded more visually
pleasing elements in our quest for information on the web. This design was in conflict with the reality of the root of the internet
which was based on presenting textual information and not graphic pleasing qualities. Through many new technologies and
updates to the underlying structure of the web, graphic artists have been able to change the web not only into a place for data, but
into a user-friendly experience. Even though the Internet is still evolving and will require much overhaul to allow us to freely create
rich graphic and back-end presentation of content, we are advancing in our ability to present information to the end user faster,
friendlier and even more visually pleasing.
So what does this have to do with the organicgrid? Simple, The basis of the Internet of course is data presentation. Data is
presented in most cases in a grid format for reading. A box is created whenever most textual information is posted on the web
simply for ease of use. Also, the pages of today require an easy way to navigate. Most web navigation information structure is
based on a grid system. To be quite honest, a grid system is not always the most visually exciting form of design. It may be
incredibly efficient and very usable, but the end user and even the designers want more. This is where the “organic” aspect of the
organic grid comes in.
To efficiently create a website that lets a user navigate quickly and precisely, most navigation is based on a grid system. But the
presentation of the data and imagery can be presented differently as well. Free placement of visual and textual information
supplies the page with an organic counterpoint to the grid. The need for clear presentation of textual data and an efficient
navigation system should not stand in the way of letting the other aspects of a website to break free from grid systems. Hence
the organicgrid principle is born.
So to further clarify the concept of the organicgrid: “The combination of a grid based structure for presentation of data and layout,
with free-form or organic shaped objects or imagery.”
But does this definition compile all of the necessary data that needs to be included? Maybe not. We need to look at the word
organic again to find another avenue the organicgrid encompasses.
Anyone paying attention to the design world over the past few years, you may have noticed the use of organic materials and
forms in a print and electronic medium. People have started to use things such as wood-grain, paper, cardboard, duct tape, dirt
and other organic materials in their design. We see many websites and printed materials that try to recreate a feel of the real life
aspects of our lives. Notable designs include combinations of wood paneling, real looking manila envelopes, navigation using
nature elements such as leaves, duct tape holding up paper on a virtual wall and even remakes of whole buildings and rooms to
try and bring to life the real in a virtual world.
So why are we using these elements in a virtual world? To bring life to a stale virtual world of textual data presentation. The same
reason we see compelling and visually intensive design in the textual data world.
So to amend my earlier definition of the organic grid, I would now say an organicgrid is: “The combination of a grid based
structure for presentation of data and layout, with free-form or organic shaped, materials, objects or imagery.”
Benefits and Application
What are the benefits of designing a work around the organicgrid principle? One of the most prominent reasons is to create a
design that engages the user while creating a sound understandable environment to present textual information. Before the
Internet, many and most design and interface pieces were created based on the grid system, or a very loose free-form structure.
To combine the two types of design may seem contradictive to nature, but the way that the organicgrid is used in the end is
almost too natural.
Another benefit of using the organicgrid, is almost a reversal of the first concept. The other type of an organicgrid I first talked
about was using organic materials such as wood, grass, and other organic materials. But how would one create a grid-based
system with these organic materials? Simple, grids are manifested naturally in nature. It is our job to fish them out and see the
under lying structure of organic materials. This may seem complicated at first, but the underlying structures in organic materials
found in nature are based on some aspect of a grid system. Seen here is a exploration of the patterns and systematical
evidence found in organic structures created by Mike Cina.
Rosalind Krauss explains the spatial grid aspect found in nature. “In the spatial sense, the grid states the autonomy of the realm
of art. Flattened, geometricized, ordered, it is antinatural, antimimetic, antireal. It is what art looks like when it turns its back no
nature. In the flatness that results from its coordinates, the grid is the means of crowding out the dimensions of the real and
replacing them with the lateral result not of imitation, but of aesthetic decree. Insofar as its order is that of pure relationship, the
grid is a way of abrogating the claims of natural objects to have an order particular to themselves; the relationships in the
aesthetic field are shown by the grid to be in a world apart and, with respect to natural objects, to be both prior and final. The grid
declares the space of art to be at once autonomous and autotelic.”
This section claims that a grid system abolishes the claims that natural objects have order. This is absurd. The very building
blocks of life and materials are based on a grid system. Patterns can be found in nature and structure reigns in organic forms.
“Structure in Nature is a Strategy for Design” by MIT’s Peter Pearce provides us wonderful evidence to contradict Rosalind
Krauss’s statements. His study of the underlying triangular grid systems found in nature to accomplish adaptive, structurally
sound and economical environments is compelling and based on study and experimentation. He quotes,
“...a building strategy with which diversity and change can be accomplished by modular systems...which consist of some
minimum inventory of component types which can be alternatively combined to yield a great diversity of efficient structural form."
Nature, I believe, is based on structure. The reason for compelling beauty and symmetry in nature, is due to its manifestation in
the underlying elements and even molecular mathematical patterns.
A second way to create a grid on an organic surface is by layering or overlay. Many designers seem to start with a white canvas
or maybe another color as their canvas. The closest method to this that has been done in design in the past is overlaying text on
photos. This can be seen as one branch of the organicgrid. Many people overlay text on images without a grid structure. But
remember, to make it an organic grid, there must be an overlaying grid system invoked. One example of this photographic
organic grid is seen in my website pictured below.
Current and Future Application and Use
The first application of the organicgrid, to create a design that engages the user while creating a sound understandable
environment to present textual information, is very broad. I will now try and explain in depth this method with visual examples.
The application of the organicgrid into my own work has just begun. One of the most recent uses of this technique can be seen
in a website I recently created for a band called Pivitplex.
(Image below) The first element that was taken from the organicgrid was of course the grid system seen in all aspects of this
site. It is used to separate areas, create formal relations between elements and unify the separate elements of this site. It
creates an excellent format for presentation of textual and even other forms of individual imagery.
The second application of the organicgrid dealt with organic materials and even photography with a grid system overlaid. This
can be seen here, and even more on the real website when the boxes are rolled over with the mouse.
The black and white vector imagry in the lower left is part of the first application of the organicgrid, “Organic/Freeform shapes
used in a grid environment”. Granted they are vectorized photographs, but their basic structure is that of a negative space
creating freeform objects.
Again I will turn to Mike Cina who I have found to be one the in the forefront of this practice of an organicgrid type approach to
design. As stated in his interview with Adobe, Mike tells us many things that I fine similar to the principles of the organicgrid. First
of all we see in this interview that,
“As a stylist, he relies heavily on the grid-based system of Swiss designer. Cina begins every project by opening Illustrator,
turning on the grid, and activating the Snap to Grid setting. From there, he normally builds animations layer by layer, always
making sure to stick within the clear, mathematical outlines he'd set up in the beginning.”
This in itself is of course a key point in the creation of an organicgrid. But as we read further we see a hint of style that can be
seen as organic structures. He calls it his “own design sensibilities.” But as you read the description of this image and see the
actual image, you will realize that his “own design sensibilities” fall within the style and principle of the organicgrid.
The future of design is based on trends, the current environment and happenings and sometimes a design movement. Trends
include 45 degree lines, neon colors, use of a certain font, type of imagery used, an underground culture’s aspect on life and
even politics can sway trends. But what makes a movement? A new discovery or an implementation of how we design. One
major movement was the Swiss Movement, which dealt with the structure and the rigid rules of the grid. The movement to break
away from the structure of the grid was based on elements such as bended lines, getting rid of white space, layering, texture,
collage, and montage. David Carson is one of the contemporary day people who started a movement that deals with intuition,
broken text, unreadable text that actually does not stop the message from being conveyed. Why are these movements, because
they have a definition. In my eyes, the creation of the World Wide Web has started a new movement. This movement is based on
usability, presentation of textual information and the use of other non-structured elements to bring life to this data. The future of
the organicgrid can only go forward from today. I have tried to simply define this design principle so that, I believe, may be
heralded as a movement. The future of design is that of the presentation of data, navigation and even tools we use to display
information to effectively let the user navigate and receive information with great ease. The need for the organicgrid will be to
create this ease of use with compelling graphics and a positive user experience that simply, will please the end viewer and give
the world a unique experience not found in the presentation of good clean grid based structured textual data.
The reason I have decided to talk about the self-made term “organicgrid” was to define a movement that I am witnessing and
participating in. The reason to define a movement is for validity, so that it may become a principle for the future designers to
come. I see great possibilities for the organicgrid and wanted to give the design world a simple yet compelling explanation of
this movement. With this simple definition, I want other designers to take it, use it, build upon it and explore the possibilities of
using the organicgrid in their own design.
As for me, the next step is to personally explore my definition with my own work. I want to build upon my findings and dig deeper
into the unknown area of the organicgrid, and also create work that hopefully will be and inspiration for all.
Written by Edwin Tofslie – December, 2002
Edwin Tofslie is a traditional and new media designer and theorist currently working at AKQA of San Francisco.
For a unedited extensive look at the “organicgrid” feel free to view the original document in PDF at: http://www.tofslie.
Krauss, Rosalind. The Originality of the Avant-Garde and Other Modernist Myths.
The MIT Press, 1985
Shepter, Joe(2001). Web Gallery: Mike Cina. [12 pages].
Retrieved April 7, 2002 from
Kroeger, Michael (1997). MK Graphic Design. [1 page].
Retrieved April 8, 2002 from
|The Organic Grid by EdwinTofslie January 27, 2004