The 4 Elements of Visual Grammar: How To Communicate Without Words | Van SEO Design
Monday, July 5, 2010 at 01:52PM Communication requires language. That language can be aural as in the spoken word, it can be gestural as in sign language, or it can be visual as in design. The more you understand any language the better you can communicate using that language. The visual language of design is no exception.
Design elements are like letters and words. When we add design principles and apply them to our elements, our words, we form a visual grammar. As we learn to use both we enable ourselves to communicate visually.
Defining Visual Grammar
Most of the information in this post is coming from Christian Leborg’s book Visual Grammar shown above. From the preface of the book:
The reason for writing a grammar of visual language is the same as for any language: to define its basic elements, describe its patterns and processes, and to understand the relationship between the individual elements in the system. Visual language has no formal syntax or semantics, but the visual objects themselves can be classified.
The last point in the quote above is important. It would be great if we could place a circle on the page, a rectangle to the right of it, and a curved line to the right of the rectangle and have it mean the same thing to all people. It won’t. That makes it harder to think and communicate visually, though also much more interesting. It’s one reason a single design problem can have so many different design solutions.
However, we can classify much of this visual grammar. I’m going to deviate just a bit from the way Christian organizes his book and organize visual grammar as:
- Objects – The basic elements we have to work with. Can be abstract or concrete.
- Structures – The patterns formed from our basic elements. Can be abstract or concrete.
- Activities - The processes we can represent with our basic elements and patterns.
- Relations – The relationships between objects, patterns, and processes. They’re the way everything in your design relates to each other and the viewer.
Objects and structures will both further be subdivided into abstract and concrete sections. In the book the main sections are Abstract and Concrete, with objects and structures being the subsections, but I think it makes more sense to organize them as I have here.
As you read through the rest of this post you’ll see many connections to design principles that myself and others have written about. In many ways this post and Leborg’s book are a way to organize all those principles and ideas to see how they fit an overall visual grammar
Objects
Objects are the basic elements at our disposal. They’re akin to letters and words. We use objects to express different ideas and concepts. A circle is an object as is a line as is a single character of type. A single point is an object as is an image of a person holding your product. Objects are the most basic elements we can add to any design.
Objects can be abstract or concrete.
Abstract Objects
Abstract objects are idealized shapes that can’t physically be created. For example take a point. A point by definition has no area. It only has a position. Any point we try to draw will have some kind of area if we are to see it and once it does, it ceases to become a point. It can only exist as an abstract concept and not as a physical thing.
Abstract objects include:
- Points – A position on a coordinate system without area. Points have no dimensions
- Lines – A series of points adjacent to each other. Points have one dimensions
- Surfaces – A series of lines that are adjacent to each other and perpendicular to their direction. Surfaces have two dimensions.
- Volumes – An empty space defined by surfaces, lines, and points. Volumes have three dimensions.
Theoretically objects can have an infinite amount of dimensions. Of course we can only perceive three of them, width, height, and depth so our abstract objects end with volumes. Beyond volumes we can only imagine more abstract objects and we can only represent these additional abstract objects using points, lines, surfaces, and volumes.
Everything we see is perceived in relation to some kind of external limit. This external limit is the format. For example this post is seen in relation to the format of your browser window. The format of a book or magazine is the page.
Concrete Objects
Concrete objects are perceived within defined limits called contours. Inside and including the contour itself is our object, our shape, our form, and outside the contour is everything else. Forms or shapes can be geometric, organic, or random (sometimes called abstract). A circle is an example of a concrete object. It’s contour being the curved line that encloses it.
Concrete objects have:
- Form – defined by a contour of surfaces and lines. A form is how a thing looks.
- Size – Forms can be large or small. They are perceived relative to the person viewing, other forms in the compositon, and the format of the design.
- Color – we perceive different wavelengths of light as color. A form can be any color, though we are limited to seeing only those colors in the visual spectrum
Any element we place on the page is a concrete object. Remember abstract objects can not physically be created. Abstract objects exist to talk about objects in general in order to better describe them.
Structures
Whenever we place two or more objects in relation to one another we form a structure. We describe these structures by the patterns they form. We must be able to recognize the presence of a pattern in order to describe the structure.
Structures have structure lines connecting objects. These lines are the axis along which the objects are arranged. Structure lines may be visible or invisible and they may be active or inactive.
As with objects, structures can be abstract or concrete.
Abstract Structures
When the structure lines of a structure are invisible and inactive the structure is considered to be abstract. Consider the image below. The circles are clearly arranged in a pattern. There is a structure present, but the lines defining that structure are invisible.
Even when the structure lines are invisible we can often see them in our minds. Through the gestalt principle closure we fill in what’s missing to complete the picture. Again consider the image above. While no lines are visibly connecting the circles, it’s easy to imagine straight lines from the center of one circle to the next. Structure lines are not limited to running through the center of objects though.
In the image above the structure lines are not only invisible, but inactive as well. That is they don’t influence the form of the structure in any way even while they are defining the position of the structure.
The circles above are an example of a formal structure. The objects are evenly distributed. They’re symmetrical and arranged on a grid. The structure lines are either horizontal or perpendicular.
Formal structures are not the only type of abstract structures we can encounter or use. Structures can be categorized as:
- Formal – even distribution of elements and spacing (structure units) between them
- Informal – lacking regularity in the arrangement of objects. Even if a pattern is observed the structure is informal if the objects do not follow straight structural lines
- Gradation – structure units change in form or size, but at an even rate
- Radiation – structure units radiate from a common center
- Spiral – uneven distribution from a common center
When the structure organizing the objects can be judged by the eye alone we say the structure has visual distribution. Each form is allowed to occupy a similar amount of space as the others in the structure.
All compositions or objects are bound within certain limits of the surface on which they exist. These limiting forces follow certain axis or paths which are considered the structural skeleton of the composition or object.
Concrete Structures
Concrete structures have either visible or active structure lines. Where abstract structures indirectly show the structure, concrete structures directly show the structure. Concrete structures can be visible compositions on their own such as the patterns that form into textures.
Visible structures do not have to include objects. As long as the structure lines are visible, the structure itself is visible. Visible structures can include the objects being organized, but they don’t have to. Both of the structures in the image below are visible structures despite the absence of any objects in the second one.
Active structures are those where the structure lines influence the form of the objects within the structure. In an active structure the objects need to be present, but the structure lines can be absent as long as their influence is seen. In the image below both structures are active despite the absence of any visible structure lines in the second one.
Structures that can be seen and/or felt are textures. Textures can be formed from either objects or structure lines or both. Textures can be ornamental, random, or mechanical and we can classify them in the same way we classify abstract structures. They can be formal, informal, gradations, radiations, or spirals.
Activities
The elements we design, the objects we place on the page don’t move. Ignore for a moment the idea that as the browser gets resized elements can move or we can use javascript to move elements around the page or use css and javascript to respond to different mouse and keyboard inputs. For the sake of this discussion our elements don’t move and our compositions are static representations.
To convey the idea that some activity is taking place on the page we generally need to create some kind of sequence of objects or create the illusion of the activity through some static representation of it.
If you can understand how to show activities through sequence and the illusion of activity you can better understand how to make use of css, javascript, and browser resizing to express activity as well.
Instead of trying to give you a couple paragraphs on each kind of activity, I’ll summarize them in the table below. Notice how many of these activities are the design principles you’ve seen myself and others write about. In the future I’ll also look to covering some of the activities below in greater detail.
| Activity | Definition |
|---|---|
| Repetition | Anytime several objects share some characteristic repetition is created. When more than one characteristic is shared the dominant one is used to describe the repetition. Repetition helps create consistency and design flow. |
| Frequency/Rhythm | When the distance between repeated objects is identical we have frequency. When the distance is varied between several frequencies we have rhythm. |
| Mirroring | When light waves are reflected from the surface at the same angle they fall onto it, an object is symmetrically rendered around an axis and mirroring is created. |
| Mirroring against a volume | When the surface has several different angles of reflection it becomes a volume. Volumes distort the reflected object and the mirroring is no longer symmetrical about an axis. |
| Rotation | When an object moves around a point or axis it rotates around that point or axis. The point or axis of rotation can be inside or outside the object. |
| Upscaling/Downscaling | When objects are scaled up or down their dimensions remain in proportion to each other. Their width-to-height ratio remains constant. |
| Movement | Within a visual design movement can only be shown as a representation of movement. This representation can be shown as a sequence or some illusion of motion. |
| Path | An object showing movement travels along an imaginary line or curve, which is the object’s path. |
| Direction | A moving object has a direction defined by a line or curve that leads from start to end point. |
| Superordinate and subordinate movement | Objects can rotate, move back and forth, or swing as they travel along a path. This secondary movement is the subordinate movement, whereas movement along the path is the superordinate movement. |
| Displacement | When only part of an object moves it’s form is displaced. Displacement is define by an angle between the original point and the new displaced point. |
| Direction of displacement | Displaced objects move in a specific direction. |
I’m sure many of the above terms needed no definition and you were likely familiar with all or many of them. We’re building a vocabulary in order to be able to communicate better about design and also through design. Again notice how several of the above find their way into the principles of design.
Relations
Objects placed in a composition relate to each other, they relate to the overall design, the format and, they relate to the viewer. Through relations with each other, elements can attract or repel, they can imply movement and flow. Through relation to the overall design, elements convey a concept and theme. Through relation with the viewer elements communicate different messages.
As with activities there are a number of relations defined by Leborg and again notice how many of them are design principles that I and others have given a more detailed treatment. Since many of these relations are deserving of their own post, I’ll again present a table summarizing each here and look to writing more detailed posts about those I haven’t covered in the past.
| Relation | Definition |
|---|---|
| Attraction/Static | Any time two objects appear in a design they appear to either attract or repel each other. A single object, not in movement, and with equal forces of attraction and repulsion applied, appears static. |
| Symmetry/Asymmetry | Objects identically arranged around an axis are symmetrical. Objects not identically arranged around an axis are asymmetrical. Symmetry is considered beautiful, but static. Asymmetry is more interesting because it is dynamic. |
| Balance | When the visual weights of objects in a composition are in equilibrium, the composition is in balance. |
| Groups | When objects display repetition or are in close proximity to one another they form a group. |
| Fine/Coarse | The distance between structure lines defines the fineness or coarseness of an object or structure. |
| Diffusion | An irregular dispersion of objects with varying fineness and coarseness is called diffusion. |
| Direction | Structures can actively define direction. |
| Position | A group of objects in a composition can define a position. That position can be in the center or along the edge or corner of the composition. |
| Space | Space is the empty areas between major and minor objects and is as important to a design as the areas where the space is filled with objects. Learning to see and use the space in your designs is one of the most important things any designer can learn. |
| Weight | All objects in a design have a visual weight based on size, color, form, surrounding space, etc. Our eye is drawn to elements with the greatest visual weight. |
| Amount/Dominance | The amount of objects in a given area of a design contributes to the visual weight of that area. Areas or objects in a design with the most visual weight are dominant and create entry points and focal points in a design. |
| Neutral | Elements in a design that do not stand out from other objects are neutral in relation to those other objects. When too many objects in a design are neutral the entire design can become neutral. |
| Background/Foreground | The position of objects, their relative weights, the space around them and, their relative proportions all contribute to which elements are seen as being in the foreground and which are seen as part of the background. |
| Coordination | When objects share the same coordinates, value, focus, and are perceived to be in the same perspective they are in coordination with each. Two identical objects aligned vertically are not in coordination as the one on the bottom is perceived to be closer than the one on the top. |
| Distance | Closeness and remoteness are relative. The distance between objects is perceived based on the viewer’s perspective. Objects that appear close in 2 dimension can appear very far apart when the composition is seen in a 3-dimensional perspective. |
| Parallel/Angle | Two lines that never intersect are parallel. When lines intersect they form an angle. Angles exist only in relation to something else. |
| Negative/Positive | Negative and positive are terms that relate to opposite values such as light and dark. Positive elements appear to be in the foreground and negative elements appear to be in the background. |
| Transparent/Opaque | Light shines through transparent objects and can not penetrate opaque objects. |
| Tangent | Two elements that touch and share a common point are tangential to each other. |
| Overlapping/Compound | When part of one object lies on top of another object, the first overlaps the second. When overlapping objects visually appear to be one object they become a new compound form. |
| Subtraction/Coincidence | When an object is overlapped by another subtraction occurs in the overlapped part of the underlying object. When two objects share form and size and are position in a way that when seen from above they appear to be one, the objects are in coincidence. |
| Penetration/Extrusion | When one object is pushed through a larger object the first penetrates the second. When an object is forced through the opening of another object in such a way that the opening alters the form of the first object it has been extruded. |
| Influence | When an object’s form appears to be altered by another object, the altered object has been influenced by the the other object. |
| Modification | An object that has been slightly altered has been modified. Modification does not change the basic characteristics of an object. A rectangle whos corners have been slightly rounded still appears to be a rectangle. |
| Variation | When objects are repeated with minor variance or modification the repetition is called variance. |
As with the table of activities above, I’m sure many of these relation terms were familiar to you and needed little or no definition. As with the activities we’re building a vocabulary to talk about design and to use design to talk to others. Many of the terms in both tables above are deserving of their own posts, some of which I’ve already written about and others I’ll write about in the future.
Summary
As communication designers it’s our job to communicate. Communications requires language and for designers that language is visual (PDF). How can we communicate if we don’t understand the language to at least some degree?
In life we can communicate through the spoken word or through gestures. In design we’re bound by a visual language. Even the words on the page are made up of characters of type which are abstract shapes. Written language itself is a visual representation of spoken language.
This post has been an introduction to the grammar of the visual language we use in each of our designs. The more we understand that grammar, the better we can speak the language, and the more effectively we can communicate with our audience.
This visual language, this visual grammar, is the context within which we study design principles. When we learn to use girds or better understand typography or color we are doing so in order to communicate more effectively with our audience. The principles are the trees. Visual grammar is the forest.
Reader Comments