The Elements Of Design Part I: Introduction

Last week I walked through some definitions of visual grammar. We talked about objects and structures, both abstract and concrete, as well as activities and relations. These objects and structures make up most of the design elements we have at our disposal.

I’d like to take a deeper look at objects and structures, a look at our design elements, what they communicate to the viewer and how we can use them in our designs.

This post will serve as something of an introduction. We’ll walk through the difference between design elements and design principles and then talk about each of 8 different design elements.

Over the next few weeks I’ll write more detailed posts about most of the elements listed below.

The Difference Between Design Principles and Design Elements

Awhile back I wrote a series entitled The 7 Components of Design. The use of the word component caused a bit of confusion in at least person and understandably so.

That title and the use of the word components were due to the book I used as a starting point for the series. The book called them components, so I called them components. The truth is they were a mix of principles and elements.

Design Principles

Design principles are rules or rather guidelines to follow. Some are based on scientific data, some based on human psychology, some are simply observations over time of what works and what doesn’t. You’re free to go against any principle, though you should always understand why the principle exists and what it communicates by going against it.

Each principle of design conveys messages. For example contrasting two objects conveys a message that the objects are different. Repeating a size or color across different principles conveys the idea that they are somehow the same.

If strongly aligning objects in your design provides a sense of order and your main message is one of disorder it makes sense to ignore the principle of alignment. You want to communicate disorder so ignoring a principle that tells you to maintain order could make more sense than following it. However ignoring the principle just because you don’t understand it or don’t feel like following it is going to lead to poor design.

Try not to get caught up in the names people give to principles or exactly how many there are. You’ll often see the same principle with different names. For example the principle of repetition and the principle of similarity are really the same thing. They’re both the idea of repeating attributes like color or shape or size so two or more elements, while different, communicate something similar.

The main thing to remember is that principles are rules or guidelines to follow, because they’ve been shown to generally improve a design. You don’t have to follow any one principle, but before going against one you should understand why it exists as a principle and what going against it communicates.

Design Elements

Design elements are the things we actually use in a design. You can’t draw a principle or create one in Photoshop. You create elements or objects and you place them on the page or screen according to a set of principles.

The objects and structures we looked at when talking about visual grammar make up most of the elements of design. When we add space and color we pretty much have them all.

As with principles try not to get caught up in names and specific numbers about exactly how many elements there are. Again different people will group them differently or give them different names. If you look through the resources I link to further down in the post you’ll see what I mean.

Like principles, elements also convey messages. A dot has a different story to tell than a line. Each serves a different function. You don’t need to use every element in a single design, but you should be familiar with what each does and what each communicates.

Elements are the actual things we add to a design. Principles tell us how we should organize those elements on the page or screen. Remember the goal is to communicate something, Elements and principles are the tools through which we can communicate.

This combination of following and breaking principles through our use of different elements and organization of those elements is visual or communication design.

8 Elements of Design

We’re focusing on elements here so let’s list what those elements are. If you search for “elements of design” or similar you’ll find a number of lists that mostly agree, yet each seems to include something the others don’t or leave off something included in most lists. That’s because the elements are interrelated.

Of the first 5 elements listed below, the latter 4 can all be created from the point or dot. So are they all truly elements or just complex points and dots? Size and color are characteristics we give to these 5 elements. So again are they elements since they don’t really exist without the other elements? Even space might seem to be a category unto its own.

My point is not to see this as the definitive list of design elements. It’s how I’m listing them here. In three months I could easily create another list that groups things a little differently.

1. Points/Dots – Points are coordinates in space, without dimension or area. Dots are how we see points. Dots are points of focused attention. Points and dots are the most basic element and are the building blocks for everything else.
2. Lines are series of adjacent points. They’re points in motion. By definition they have one dimension, but to see a line we need to see 2 dimensions. Where dots are about attracting attention, lines are about movement and direction.
3. Surfaces/Planes/Shapes – all have 2 dimensions. Each is essentially a flat object without depth. Technically they have no mass, but we begin to see a visual mass or weight in 2 dimensional objects
4. Form/Volume/Mass take us into 3 dimensions. However the format we work with (page or screen) is 2 dimensional so we can only represent form, volume, and mass in design.
5. Pattern/Texture evolve out of structures. When two or more elements are placed in a design there is a structure between them. We describe structures through the patterns they form. As these patterns begin to form their own compositions they become textures.
6. Size/Scale are about the relative size and proportion of different elements. Elements of different sizes convey different messages especially in relation to other elements of different or similar size.
7. Space connects and separates elements. It’s the contrast that allows everything else to be seen and recognized. Learning to see and control space is perhaps the most important skill you can learn as a designer.
8. Color/Value – Color is how we see the reflection of lightwaves. Value is the relative lightness or darkness we see. Both convey a lot of meaning as each of us is influenced physically, psychologically, and socially by color and the value of color.

Again don’t take the list above as gospel. Different lists will define the elements in different ways. I think I’ve managed to cover all the essential elements in the list above, but in three months time this list could be different as well.

I’ve written about both whitespace and color several times in the past and won’t cover them again in this series. I’ve also covered both lines and shapes in the past, but I do want to take another look at both.

In the nest post we’ll consider points, dots, and lines. We’ll then look at surfaces/planes/shapes and form/volume/mass. Finally we’ll dive into pattern and texture and size/scale.

Resources

As I said search around and you’ll find slightly different lists of design elements, though if you read a few you’ll see they’re each saying essentially the same thing.

Here are a few posts I’ve collected with those lists and thoughts about what each element is and does.

• The Elements of Design
• Composition & the Elements of Visual Design
• Want to know how to design? Learn The Basics.
• Elements Of Design
• The ABCs of Visual Design: Elements
• Elements and Principles of Design in Art and Music
• Elements and Principles of Design

Summary

Design principles and design elements often get written about together, but they are different things. Elements are the actual things we use in a design and principles are the rules that govern the use of the those elements.

Both elements and principles are tools in our designer toolbox. As you often hear me say our job is to communicate. Elements and principles are the means through which we communicate so it’s important for us to understand those means. In this series we’ll focus on design elements.

Next time we’ll take a deeper look at points/dots, and lines. Each has a distinct characteristic. Dots attract attention to a specific point in a design and lines connect and separate points along a directions. When we look deeper at the other objects and structures that make up our design elements we’ll see they either function in similar ways as dot and line. They either anchor our attention of give a sense of movement and direction.

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

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.