Advertisement in A Graphic Design Primer, Part 1: The Elements of a Design
 in A Graphic Design Primer, Part 1: The Elements of a Design  in A Graphic Design Primer, Part 1: The Elements of a Design  in A Graphic Design Primer, Part 1: The Elements of a Design

There are many elements that make up any visual design, whether it’s good or not. Becoming familiar with the parts of a design is necessary before you can start to apply the principles of good design to your own work, in the same way that a doctor needs to have an understanding of anatomy before he can learn to heal a patient.

There are seven basic elements of any design. Some are easier to grasp than others, but all are important. Once you can identify the elements of a design, whether it’s your own or someone else’s, you can learn how the principles of good design are best applied.

Line

Lines are generally present throughout a design. They can be thick or thin, straight or curved, solid or dashed or dotted. Lines can be any color and any style. Straight lines are often used as delineations between sections of a design, or they may be used to direct a viewer’s vision in one direction or another.

The width of a line has a direct effect on its visual impact. Thick lines are bold and strong; they draw attention to themselves. Thin lines tend to do the opposite. Color also effects the impact of a line, with brighter and darker colors drawing more attention than lighter and paler colors. The style of a line also has an effect: dotted or dashed lines are less imposing than solid lines.

Curved lines often give a more dynamic or fluid look to a design. They indicate movement and energy. They’re also more common in designs with an organic nature, as they’re more likely to be seen in nature. Straight lines are more formal and structured, and indicative of “civilized” culture.

Examples

Justdot
Justdot is another example of a site that uses a lot of curved and dashed lines to indicate movement and energy.

Justdot in A Graphic Design Primer, Part 1: The Elements of a Design

RePrint
RePrint uses a number of curved lines to direct the eye of the visitor.

Reprint in A Graphic Design Primer, Part 1: The Elements of a Design

VideoDSLR
VideoDSLR uses straight lines of varying widths to delineate content sections.

Videodslr in A Graphic Design Primer, Part 1: The Elements of a Design

Form

Forms are three-dimensional objects within a design, like a sphere or cube. You can have forms that are actually three-dimensional in your designs (like with product packaging), or forms that are actually two-dimensional but are displayed in a way as to imply that they’re three-dimensional (like a line-drawing of a cube).

Forms are common in actual three-dimensional graphic design, of course, but are also seen in web and print design. Website designs that use 3D techniques are making use of forms. Another common place to see forms is in logo designs where a sphere or cube is present.

Examples

Print Mor NYC
Print Mor NYC uses a 3D effect behind their main content.

Printmornyc in A Graphic Design Primer, Part 1: The Elements of a Design

Arlo Vance
Another example of a 3D effect in website design.

Arlovance in A Graphic Design Primer, Part 1: The Elements of a Design

Shape

Shapes are two-dimensional. Circles, squares, rectangles, triangles, and any other kind of polygon or abstract shape are included. Most designs include a variety of shapes, though deliberate use of specific shapes can give a design a certain mood or feeling.

For example, circles are often associated with movement, and also with organic and natural things. Squares are more often seen with orderly, structured designs. The color, style, and texture of a shape can make a huge difference in how it is perceived.

Examples

Method Design Lab
Method Design Lab uses ovals and other rounded shapes throughout their design.

Methoddesignlab in A Graphic Design Primer, Part 1: The Elements of a Design

Passion About Design
Circles are used throughout the design.

Passionaboutdesign in A Graphic Design Primer, Part 1: The Elements of a Design

Cappen
The Cappen site uses triangles throughout their site.

Cappen in A Graphic Design Primer, Part 1: The Elements of a Design

Texture

Textures are an important part of just about any design. Even designs that, on the surface, don’t seem to use textures actually are (“smooth” and “flat” are textures, too). Textures can add to the feeling and mood of a design, or they can take away.

The most commonly seen textures, apart from flat or smooth, are things like paper, stone, concrete, brick, fabric, and natural elements. Textures can be subtle or pronounced, used liberally or sparingly, depending on the individual design. But texture is an important aspect of design, that can have a surprising effect on how a design comes across.

Examples

The Heads of State
The Heads of State site uses a few subtle textures.

Theheadsofstate in A Graphic Design Primer, Part 1: The Elements of a Design

Doublenaut
Doublenaut uses a more pronounced texture in their background.

Doublenaut in A Graphic Design Primer, Part 1: The Elements of a Design

Cuban Council
The Cuban Council website uses textures on virtually every element of their design.

Cubancouncil in A Graphic Design Primer, Part 1: The Elements of a Design

Color

Color is often the most obvious thing about a design. We’re taught colors from an early age, and even go so far as to identify some things with color descriptors (“my green jacket” or “my red shoes”). Color is also capable of creating strong reactions among people, who consciously and subconsciously apply certain meanings or emotions to different colors (this is also influenced by culture, as many colors mean different things in different cultures).

Color theory is an important aspect of design, and something designers should at least have casual knowledge of. You should know the difference between a shade (when black is added to a pure color), tint (when white is added to a pure color) and tone (when gray is added to a pure color). You should also know terms like chroma, value, and hue. But more importantly, you should know how all these things work together to create a mood or feel in a design.

For a more complete overview of color theory, check out our archived series, Color Theory for Designers.

Examples

Go Live Button
The very bright colors used on the Go Live Button website have a definite impact on the perception of the visitor.

Golivebutton in A Graphic Design Primer, Part 1: The Elements of a Design

Camp David
The more muted colors here give a completely different feeling than the site above.

Campdavidfilm in A Graphic Design Primer, Part 1: The Elements of a Design

Old Putney Row to the Pole
The Old Putney Row to the Pole site uses darker but still muted colors, which gives yet another impression.

Rowtothepole in A Graphic Design Primer, Part 1: The Elements of a Design

Value

Value is closely related to color, but it’s more general. It’s how light or dark a specific design is. Again, this relates directly to the mood a piece gives. Darker designs convey a different feeling than lighter designs, even with all other design elements being equal. This is one reason you’ll often see designers releasing both light and dark versions of their themes.

Not every piece has a clear-cut value. With very colorful pieces, you might not really be able to tell how high or low the value is. One trick is to convert the design to grayscale, to get a better sense of how light or dark it is. You can also look at the histogram of an image to get an idea of where the value is more heavily concentrated.

Examples

This After That
This After That is an example of a site with a relatively light value.

Thisafterthat in A Graphic Design Primer, Part 1: The Elements of a Design

The Lounge
The Lounge has a relatively dark value.

Thelounge in A Graphic Design Primer, Part 1: The Elements of a Design

Space

There are two kinds of space in design: positive space and negative space. Positive space is that which is occupied by design elements. Negative space (also called “white space”) is the area that’s left over. The relationship between positive and negative space has a strong influence on how the design is perceived. Lots of negative space can give a piece a light, open feeling. A lack of negative space can leave a design feeling cluttered and too busy, especially if the designer is careless.

Negative space can create its own shapes and forms, which impact the design. Understanding the effect of negative space and how to use it to your advantage in a design is one of the most important techniques a designer can learn, and can make the difference between a good design and a great design.

Examples

80/20 Studio
80/20 Studio has a lot of negative space in their design.

8020studio in A Graphic Design Primer, Part 1: The Elements of a Design

Dazed Digital
Dazed Digital, on the other hand, has very little white space in their design.

Dazeddigital in A Graphic Design Primer, Part 1: The Elements of a Design

Poster Roast
Another example of a site without a whole lot of negative space.

Posterroast in A Graphic Design Primer, Part 1: The Elements of a Design

Up Next…

In the next installment, I’ll be covering the principles that make up a good design, and how to apply them to the elements we covered here.

Further Resources

(rb)