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.

Types of 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.

Dots in relation to each other

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.

A Line of dots and lines connecting and separating dots

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.

Lines joined by an angle, lines in rhythm, perspective

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.

Negative space lines, finite lines, and infinite lines

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

« »

Download a free sample from my book, Design Fundamentals.

10 comments

  1. I never really got down to the nitty gritty and thought of it this way. Now, even just thinking about some of the visuals I have seen in the past, it is so true that something as simple as a line or a dot can create so much. The configuration of it all makes a simple image complex. I am only beginning to see the possibilities and the ways that advertisers use a simple concept like this to lure people into buying their product.

    • Thanks Elsann.

      Prior to this and similar posts here, I hadn’t thought much about it either.

      Now I think every mark we place in a design communicates something and the combination of marks communicates even more. Ideally we all use these marks to convey important information and help visitors to our sites find what they’re looking for and complete the tasks they want to complete.

  2. I found this to be a fun loving reminder from my art school days. My minds eye always sees movement in lines that are created on a canvas or in a picture and subsequently, it wants to stop and focus on a focal point whenever there’s a created or a point/dot. Its amazing to me how an artist has the capacity to create a beautiful and engaging visual story for anyone’s eyes to behold with lines, angles, and dots. I never really consciously gave that much thought.

    • Thanks Karen. I never went to art school so for me this was all new when I was learning. I think a lot of web designers are like myself in not having any formal training.

      I’m amazed too by how much we can create and engage too. Before I taught myself what I know about design I might have looked at a composition and liked it or not liked it, but I never understood why.

      Now I can’t look at a composition without thinking about lines and dots and compositional flow and balance and all sorts of other wonderful things.

  3. Reading all the material presented reminds me of my Junior High School art classes and my 8th grade Interior Design Class. Some of the topics presented I remember very well, but it’s always nice to be reminded of these things once in a while. It helps to look at objects in new ways and gain a better understanding.

  4. Among the countless number of images I have seen over the years since I was a child, I have never truly looked at any image with so much knowledge. I have learned a great deal of information when observing images in the future. I never really looked at a specific dot or its true meaning within an image, I can see now how it is the focal point of a composition. The same with line, I never really perceived that it gave an image direction and movement, but after reading this article I can sense that now every time I see an image with lines. After reviewing this article detailing the characteristics of points, dots, and lines I will be looking for them more closely in the future when I view images.

  5. “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.”
    I dont really understand this paragraph, can you explain or provide some example for me please

    • Hi Khoi,

      Sorry it took me a day or two to reply. I’ll try and see if I can make things clearer. Look at the image above the section with the paragraph you mention as an example. In the first panel, the two dots are separated by some space. If you imagine each moving through the panel, not much is likely to happen. Each dot will continue moving until it leaves the space of the panel.

      In the second panel the two dots are very close and have very little space between them. If they’re moving, they’re a good chance they’ll collide. It’s even easy to imagine they’ve been moving directly toward each other and are now confronting each other. There’s a tension between the dots because you might imagine what will happen after they collide or you might wonder what will be the result of their impending confrontation.

      In the third and last panel it appears one dot is in front of the other. It’s closer to you and so obscures part of the one behind. The tension I described in the middle panel is gone, because the two dots weren’t on the same plane. If they were moving towards each other, they never collided because there’s still space between them, only now it’s along the dimension that runs into and out of the screen. That sets up another kind of tension in which someone might wonder how much space is between them. How much further in the background is one dot when compared to the other?

      Does that help or make sense? I hope so.

  6. Please… can you help me the reasons behind why dot is not an element of design..because my lecturer said dot is not an element of design

Leave a Reply

Your email address will not be published. Required fields are marked *