Points, Dots, And Lines: The Elements Of Design Part II

When it comes to working with elements in a design we have two basic classes to work with. We have positive forms and negative space. The most basic form we can use is the abstract point or it’s concrete sibling the dot. We can build up points or dots so they become lines which is our second most basic element.

A quick reminder of the basic design elements as I’ve organized them and will be discussing in this series.

• Points/Dots
• Lines
• Surfaces/Planes/Shapes
• Form/Volume/Mass
• Pattern/Texture
• Size/Scale
• Space
• Color/Value

Points or dots and lines have distinct characteristics and functions. In fact most of the other elements will mimic these fundamental qualities of point, dot, and line in some way so it makes sense for us to understand these two elements before any other.

Let’s dive right in to points and dots.

Points and Dots

As I mentioned last week a point is a coordinate without any dimensions, without any area. Points are the simplest element of visual design. By definition we can’t actually draw a point, since to see one would require it have dimensions.

What we can draw is a dot. In fact dots are the building blocks of everything else. Any other mark we make can be seen as one or more dots in combination. Every shape, form, mass, or blob with a recognizable center is essentially a dot regardless of its size.

The defining characteristic of a dot is that it’s a point of focused attention. Dots anchor themselves in space and provide a reference point relative to the other forms and space around it. While we often think of dots as circular in nature, they don’t have to be. What they are is points of focused attention. Dots are the focal points in our compositions.

Dots establish a relationship with the space around it. The two most important relationships formed are the proportion of the dot and the space around it and the position of the dot within that space.

As dots increase in size we start to see them as shapes, but they still retain their fundamental dot-like qualities and characteristics. A square placed in the whitespace of a page is still a dot. It still attracts visual attention to it, which again is the dot’s defining characteristic.

Dots centrally placed within a composition create symmetry and are neutral and static, through they tend to dominate the space around them. Dots placed off center create asymmetry. They are dynamic and actively influence the space around them.

The Relationship between Dot and Dot

Things get more interesting when we add more than one dot and they interact with each other. 2 dots near each other shift the emphasis of the relationships of the dot with its surrounding space to the relationship and interaction between dot and dot. 2 dots imply a structure.

As the space between dots decreases the tension between them increases. As that space approaches zero the tiny bit of space itself becomes more important than either dot or any other interval of space on the page. All the tension is held in that tiny bit of space.

As dots get closer together they start to be seen as a single object. Their identity moves to that of the single object instead of the multiple identities of distinct objects. If we allow the dots to continue to to get closer until one dot overlaps the other, the tension in the space between them decreases, replaced by a new tension based on the appearance of depth.

One dot overlapping another creates a figure/ground relationship. One dot is now in the foreground and the other is pushed into the background. Overlapping dots form more complex shapes than either of the individual dots. This resulting cluster of dots is in itself a new dot with a different form.

Dots further apart emphasize the structure between them instead of the identity of either dot. If you then add more dots in close proximity to a pair of dots it also emphasizes the structure of all the dots instead of the identity of a single dot or dot pair.

Dots working together can form an endless variety of arrangement and complexity. The can become lines and curves. They can form complex shapes, patterns, textures, and any other structure imaginable. Dots in combination can even imply direction and movement, bringing us to lines.

Lines

A line is a series of points adjacent to each other. Where a point has no dimension, a line has one dimension. They have a length, but nothing else. In reality a line would need a second dimension to actually see it, but we’ll continue to call them lines and not something else here.

The fundamental characteristic of a line is to connect or unite. This connection can be visible or invisible. Two dots on a page have a connection even if that connection, that line between them, can not be seen. The dots attract of repel each other along a line.

Where dots are about position, lines are about movement and direction. A line leads somewhere, your eye moves along it seeking one or both of its endpoints. This movement and direction makes lines inherently dynamic. A line is not attracting you to a point in space. It’s directing you toward and away from points in space.

The flip side of connecting is separating. Lines not only connect elements, they can also separate elements. They can connect an element to space or separate it from space. Lines separate and join both spaces and objects. Lines can also cross barriers, protect, and support.

As lines become thicker they begin to be perceived as planes or surfaces and they gain mass. To maintain their identity as lines they must increase in length as they increase in width. Changing the width of a line relative to its length has a much greater effect on the quality of a line as changing the size of a dot has on the quality of a dot.

If a line continues to get thicker without also getting longer at some point it ceases to be a line and becomes a surface or plane.

A single line traveling in a curve around a fixed, invisible point with an unchanging distance from that point, eventually joins it’s starting point and becomes circle. A circle is a line until the thickness of the line increases to completely fill the negative space inside the circle. The negative space itself can be seen as a dot distinct from the line/circle. If the distance from the fixed center point is allowed to change the line doesn’t meet it’s starting point and a spiral is formed instead of a circle.

The thinner the line the more the emphasis is on the quality of direction. The thicker the line the more emphasis is moved to the quality of mass and away from the quality of direction.

The endpoints of a line can be seen or appear to move toward infinity. As lines are allowed to enter and leave a format without seeing their endpoints their sense of movement is reinforced. When one end point is contained within the format the direction is no longer infinite. It becomes specific to the point and the tension between the end point and the surrounding space is increased.

The Relationship Between Line and Line

When two lines join they create an angle between them. This joint or point of connection becomes the starting point to move in 2 different directions along 2 different lines. Multiple joints create a sense of altered direction. When the angle between lines is acute (less than 90 degrees) the movement and change in direction is perceived to be rapid.

Separating lines from each other focuses attention on the individual identity of each line and the interval between them. As the interval between a series of lines and the width of those lines varies, a rhythm is created. Changing the color or value of the lines can add more complexity to that rhythm.

Changing the thickness or weight of lines and the intervals between lines creates a sense of depth. Lines that appear closer together have more tension between them and advance to the foreground. Lines further apart have less tension between them and recede into the background.

If a line or lines is to added a series of lines at an angle and allowed to cross several lines, this sense of depth is increased. It creates perspective.

Thick lines placed close together create a thin line in the negative space between them. This negative space line can often become the positive element and the original lines are seen as the new negative space.

Lines working together and in rhythm can form patterns and textures.

Summary

Points or dots and lines are the two fundamental objects at our disposal. True a line is basically a series of points or dots, but dot and line carry two different fundamental functions.

One holds a point in space and the other connects and separates points in space. One is about attracting your eye to a given coordinate and the other is about moving your eye from one coordinate to another along a direction.

Points and dots lead us to talking about points of entry and focal points and the principle of dominance. They lead to discussions of contrast and visual hierarchy, composition and balance. Lines lead us into discussions of movement and direction and to creating design flow. They lead us to proximity and grouping and alignment.

Most everything we do as communication designers will come back to the fundamental qualities and functions of these basic elements.

When we look at the other objects and look at structures we’ll see they function in similar ways as either dot or line. They either anchor our attention of give a sense of movement and direction.

Next time we’ll look at the 2 and 3 dimensional objects at our disposal before moving on to a discussion of structures and the patterns and textures we create from them.

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.