Last week we looked at zero and one dimensional elements, namely the point or dot and the line. This week we’ll add a couple of dimensions and talk about surfaces and planes (2D) and then move on to volumes (3D). Throughout we’ll consider the ideas of visual mass and weight.
Before getting to any of the above I want to start with a discussion of form.
Let me apologize in advance for bouncing back and forth between names throughout this post. Form, surface, plane, shape, volume, mass, weight. They get interchanged a lot depending on where you read them. Hopefully it won’t become too confusing as you read here or even better all these terms of visual grammar become clearer by the time you finish this post.
What is Form?
Form is any positive element we place on a page as opposed to the negative elements we consider space. Form is the point, line, plane, and volume. It’s the shapes and dots and text and textures and images we use in our design. If it’s meant to be a positive element it’s form.
I’m including form here in the series since it’s most often used as a synonym for either shape or volume, for those elements that are either 2-dimensional or 3-dimension. I’ve often found this confusing when reading articles talking about form, since the greater more inclusive meaning of form is usually absent leaving one to believe a form is a 2-dimensional shape in one place and a 3-dimensional volume in another.
Again form is any positive element on your page. Everything in your design is either form or space, positive or negative, figure or ground.
Form and space, figure and ground are mutually dependent on each other. You can’t change one without changing the other. The relationship between form and space creates tension, determines the amount of visual activity and movement, and gives a sense of 3-dimensionality in a design. A viewer must first understand the relationship between form and space before understanding any of the individual objects on the page.
All forms carry some kind of meaning, though no one form is better than another at communicating meaning. Your choice in which forms to use, however, is an important consideration in communicating the right message, your message.
Surfaces, Planes, Shapes
Much the same way a line can be thought of as a series of adjacent dots, a plane or surface can be thought of as a series of adjacent lines. We’re simply adding another dimension. Surfaces and planes are abstract objects. We’ll talk about them more as shapes or forms as we think of them as concrete objects.
Planes or surfaces mostly act as dots. The difference is the size of the surface has grown large enough to become an important characteristic as has the contour defining the plane. The larger the size of the plane the more the dotlike characteristics become secondary. This size is relative to the surrounding space and elements.
Large planes can still act as dots if the space around them is large enough and any other elements in the space small enough. As the relative sizes change there is a point of change that occurs when the plane becomes large enough so that its shape affects the space and other shapes around it.
The more active the contour of a plane, the more dynamic its shape will appear to be and the less dotlike it will appear to be.
While technically a 2-dimensional object doesn’t carry any mass or volume, our 2-dimensional elements carry visual weight and mass. This visual mass and weight are determined by the size and simplicity or complexity of the contour of the shape.
Large, simple forms carry a heavy visual weight and appear dotlike. Surfaces with complex contours and interaction with their internal and external space (both positive and negative) carry less weight and become more line-like.
Shapes; Geometric and Organic
When we come to see a form’s outer contour, our brains try to establish some meaning with the shape and the contour. We can group these shapes under two main types, geometric and organic. A third type of shape, abstract, we’ll consider as a sub type of organic shapes, though more often it’s considered one of the three classes of shape.
When a form or shape has regularized contours, when internal and external measurements are mathematically similar in multiple directions, we think of the form or shape as geometric. Angular and hard edged forms are generally seen as geometric.
The 3 main types of geometric shapes are the circle, the polygon (square and triangle being the simplest), and the line. The square is the most stable and carries the most visual weight. The triangle is the least stable and displays great movement. The circle is nearly as stable as the square and hints at rotational movement.
Circles or dots can be interpreted as either geometric or organic.
Shapes or forms that have irregular, complex, and highly differentiated contours are considered organic. Soft, textured forms also appear to be organic shapes as they are seen more like things we see in nature. Variation is an inherent quality of organic forms.
Abstract shapes are simplified or stylized versions of organic shapes. Think icons.
Geometry does exist in nature, but it’s often obscured by perceptions of irregularity. Think of a leaf. It’s generally symmetrical and often close to taking a triangular shape. However we perceive the irregularities in its contours before we see this symmetry and near triangularity.
Geometric forms can be arranged organically and organic forms can be arranged geometrically. Either creates tension between the forms and their structure. When we want to convey an organic message, we should emphasize the organic qualities of form and use more irregularity and variety.
Volumes and Mass
Volumes are empty space defined by surfaces, lines, and points. When we fill in the space or give the perception that the space within a volume has been filled to some degree the volume contains mass.
If you remember from physics class, density = mass / volume. In a 2-dimensional design we can only offer the perception of mass, density, and volume. When we give a surface or plane the illusion of being 3-dimensional we have a volume.
We can do this by adding pattern and texture to the surface or by changing the color or value across the surface to mimic the effect of light and shadow. We can also use perspective within a form to create the illusion that the form is a volume.
Since we live in a 3-dimensional world when we add volumetric qualities to our 2-dimensional format we add a sense of realism to a design. For some examples have a look at either of the following posts and consider how the designs shown make use of depth and 3d elements to add a sense a realism.
Volumes advance when compared to a plane and also carry greater mass and visual weight than planes or surfaces. If we overlap a plane on top of a volume it creates tension between the foreground and background as normal expectations are for the volume to advance and the plane to recede.
Visual Mass and Weight
Mass and Weight are physical qualities that don’t really exist in a 2-dimensional format. In design we talk about visual or optical mass and weight.
In the physical world objects with great mass attract and pull other objects toward them. In the world of visual design elements with great mass also attract. The perception of mass in an element is how strongly the element pulls your eye toward it.
As with volume, mass is only something we can hint at or represent in the 2-dimensional format we work with. We add visual mass and weight to an element, through size and color or value. We can also play around with the form of the element.
Through our use of mass or weight we control balance and movement in a design.
We can add mass to a series of angular planes by rotating them and letting them overlap each other. The overlapped area becomes darker and is seen as containing the mass from multiple planes. The rotation also creates movement.
Adding a consistent pattern on a surface leads to the perception of there being less mass in that plane. The plane also becomes flatter as compared to an adjacent solid plane. The solid plane appears to advance into the foreground due to the perception of it carrying more weight.
While appearing flatter our textured plane also appears more active than the adjacent solid plane and if we overlap the textured plane on top of the solid plane we again create tension between foreground and background.
This changes if the pattern or texture emulates the effects of light and shade, in which case the surface or plane becomes a volume with greater mass and weight and naturally appears less flat. Volumes are 3-dimensional and the extra dimension brings with it the perception of mass and weight. A sphere always weighs more than a circle.
Forms are any positive element you place within the negative space of your design. All forms communicate and you should choose your forms based on the message you want to communicate to your audience. The relationship between form and space should be one of the most important considerations in any design.
Planes or surfaces are 2-dimensional abstract forms. Shapes are the concrete equivalent. A plane can appear either dotlike or linelike depending on its contour and its relative size to the size of the space and other elements around it.
Volumes are 3-dimensional forms. They can only represented on a 2-dimensional format, but in so doing give a greater sense of realism to a design. Volumes are created mimicking the effects of light and shadow on a surface or plane.
All forms carry a visual mass or weight determined by size and color and by the contour of the form. Volumes carry more weight by default than surfaces, but the weight of both can be increased or decreased by altering the characteristics of either form.
If you think back to my post on visual grammar, we talked about objects and structures. This post and the previous one in this series on points, dots, and lines covered the objects of visual grammar.
Next time we’ll continue the series by moving on to a discussion of structures. By structuring any or all of the objects we’ve looked at we can form patterns and textures.
The Elements of Design Series
- Introduction: Design Elements and Principles
- Points, Dots, and Lines
- Form: Surfaces And Planes, Volume And Mass
- Structures, Patterns, and Textures
- Size, Scale, And Proportion
- Thoughts on Whitespace
- How to Use Space in Design
- Color Theory
- The Meaning of Color
Download a free sample from my book, Design Fundamentals.
Great article, have used this info for our PPC landing page