The Meaning of Lines:

Developing a Visual Grammar

By Steven Bradley

If you moved to another country (where they don’t speak the same language as
you), one of the first things you’d probably do is start learning the language. You
might even start long before you move in preparation for being able to
communicate with the people you’ll soon call neighbors.

Communication is an essential part of life and as web designers it’s what we do

with every new design.

What happens when words won’t do? If you want someone to look in a certain
direction you might point in that direction. We’ve all developed a grammar for
communicating with physical gestures and we communicate as much if not more
with body language than we do with verbal language.

Web and graphic designers communicate visually. For example choosing a color
scheme with a dark blue as dominant sends a very different message than if the
dominant color is hot pink. Color is one way we communicate visually. It’s one
of the building blocks of visual grammar, which are usually defined to include:
  lines
 shapes
 color
 texture
 value
 space
 form/volume/mass

We’ve talked about color theory and color meaning in the past as well as using
whitespace in design. Today I wanted to look at lines. What types of lines are at
our disposal? What do different lines communicate? Next time we’ll talk about
shapes and ask some of the same questions about them.

The Grammar of Lines

A line is a dot out for a walk.
—Paul Klee

A line connects two points. It’s also the path made by a moving point. Lines can
be thick or thin. They can be long or short. The can be vertical, horizontal, or
diagonal. They can be solid or dotted or dashed. Lines can be curved or straight
of combinations of both. There’s an endless variety in what we think of as a line.

Lines can be literal or implied. Draw a series of 3, 4, or 5 points and your mind
will fill in the line between them.

Each of the different ways we draw or represent a line gives it unique

characteristics. Thick lines convey a different meaning than thin lines. A curved
lines send a different message than a sharp straight line.
Types of lines
There are several types of lines defined by their use.
 Contour lines are used to define edges. The create boundaries around or
inside an object. Most lines you encounter are contour lines. In web design
these could be the borders you add around an object or group of objects
 Dividing lines can also define edges, but what distinguishes them from
contour lines is they divide space. The lines between columns of text are
dividing lines as are the lines separating menu items.
 Decoration lines are used to embellish an object. Cross-hatching is an
example of using decoration lines to add shading and form to an object.
The line beneath liked text is a decorative line as are the lines used to
create a floral background image
 Gesture lines are quick and rough continuous lines used to capture form and
movement. They are generally used when studying the shape and motion of
the human form. You likely won’t use gesture lines (based on the technical
definition) in a web design, but you could certainly create patterns of lines
to signify motion or build up a form

The Meaning of Different Kinds of Lines

As I mentioned above there are a lot of different ways we can describe a given
line and each gives a line unique characteristics. What do these characteristics
mean and what do they communicate? (.doc)
Thin lines are fragile. They appear easy to break or knock over. They suggest
frailty and convey an elegant quality. They are delicate and give off an
ephemeral air.
Thick lines on the other hand appear difficult to break. They suggest strength and
give emphasis to nearby elements. Thick lines are bold and make a statement.
Horizontal lines are parallel to the horizon (hence the name). They look like
they’re lying down, at rest, asleep. They suggest calm and quiet, a relaxed
comfort.
Horizontal lines can’t fall over. They accentuate width. They’re stable and secure.
The convey an absence of conflict, a restful peace. Horizontal lines by their
connection to the horizon are associated with earth bound things and idea.

Vertical lines are perpendicular to the horizon. They are filled with potential
energy that could be released if they were to fall over. Vertical lines are strong
and rigid. They can suggest stability, especially when thicker. Vertical lines
accentuate height and convey a lack of movement, which is usually seen as
horizontal.

They stretch from the earth to the heavens and are often connected with religious
feelings. Their tallness and formality may give the impression of dignity.
Diagonal lines are unbalanced. They are filled with restless and uncontrolled
energy. They can appear to be either rising or falling and convey action and
motion. Their kinetic energy and apparent movement create tension and
excitement. Diagonal lines are more dramatic than either horizontal or vertical
lines.
Diagonal lines can also appear solid and unmoving if they are holding
something up or at rest against a vertical line or plane.

Curved lines are softer than straight lines. They sweep and turn gracefully
between end points. They are less definite and predictable than straight lines.
They bend, they change direction. Curved lines express fluid movement. They
can be calm or dynamic depending on how much they curve. The less active the
curve the calmer the feeling.
Zigzag lines are a combination of diagonal lines that connect at points. They take
on the dynamic and high energy characteristics of diagonal lines. They create
excitement and intense movement. They convey confusion and nervousness as
they change direction quickly and frequently. They can imply danger and
destruction as they break down.

Long, perfectly even lines feel artificial. Nature is not perfectly straight. As variation
is added to a line it becomes less artificial and more natural.

Dashed and dotted lines are implied lines. They’re incomplete and allow objects
to pass through them. A thick, vertical dotted or dashed line is still a strong line,
though not as strong were the line completely solid.

Line Patterns
A series of lines form a pattern. These line patterns convey meaning in addition to
the meaning of the individual lines.

Parallel lines of uniform width and spacing create a static and orderly effect. It
doesn’t matter if the lines are horizontal or vertical or diagonal. Even in curved
lines the repetition creates order, however one more dynamic than straight lines.
Not too how the series of

curved lines while mostly static, still creates a sense of movement.

By varying the spacing between lines of equal thickness we can convey motion.
When the spacing between lines of the same thickness is random we get a
dynamic effect with little order. When we vary both spacing and thickness the
effect becomes more chaotic and disorderly.

Patterns of lines can be built up to create shading and texture. Value can be
controlled through use of line. Lines can be combined to form shapes. Lines can
be made up of type or any shape placed one after the other.
How to Use Lines in Web Design
We use lines to organize, connect, and separate information and design elements.
You can use lines to convey movement and create texture. Lines provide emphasis
and define shape. They can be used to convey mood and emotion.

Think of any website and all the places lines are or could be used. When
you align elements of a design you create an implied line that organizes and
connects those elements. You can further emphasize the relationship with a real
line.
You add borders around various elements in your design to group them and
clear separate them from other elements on the page.

Lines are used to divide header from content and content from footer. They’re
used to divide the page into columns and rows of information. Grid lines might
even be the structural glue holding your entire design together.

Design is controlling space and lines are often used to define that space. We can
use real or implied lines in combination with the gestalt principles of continuity,
uniform connectedness, proximity, parallelism, common region, and even
closure.

Summary
Lines are an essential building block in our visual vocabulary. Combined with
shapes, color, value, texture, space, and form they give us a visual grammar
which we can use to communicate.

They seem simple. You didn’t need me to tell you what a line is when you
started reading this post and yet here we are some 2,000 or so words later and
we’ve barely scratched the surface of what lines can do. If we wanted them to,
lines could create the surface and represent the scratch.

Something as simple as a line can have an endless combination or variety and

through that variety convey different meanings, concepts, themes.
Even more when we combine lines into patterns we can convey additional
information and meaning. we can use lines to create textures and shapes, which
leads us to the next post.