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.
Next time we’ll continue to build our visual grammar with a discussion of shapes.
« Prev PostNext Post »
Download a free sample from my book, Design Fundamentals.
