 | |  | |  | |  | |  | |  |
Introduction
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 fact.
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 disciplines.
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.com/organicgrid.pdf
Credits
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
http://www.pacific.adobe.com
Kroeger, Michael (1997). MK Graphic Design. [1 page].
Retrieved April 8, 2002 from
http://www.mkgraphic.com/weingartdq.html
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 fact.
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 disciplines.
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.com/organicgrid.pdf
Credits
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
http://www.pacific.adobe.com
Kroeger, Michael (1997). MK Graphic Design. [1 page].
Retrieved April 8, 2002 from
http://www.mkgraphic.com/weingartdq.html
Charles Livingston Studio
| The Organic Grid |