Skip links

The Line in Web Design

Line is one of the simplest and most versatile elements of design. Being a multi-faceted element of design, line can be considered an extension of a point or a point set in motion, a series of adjacent points, a connection or implied connection between points, or the effect of the edge of an object. Line can make a shape, contour, define a boundary, create variety by using angular, broken, bent, thick or thin lines, create rhythm, simulate texture, express movement or motion and create focus through direction.

Orientation and direction of lines have the ability to convey many different states and emotions. The orientation (position or direction of a line) can imply movement; horizontal lines imply rest, vertical lines suggest strength power and are more energetic than horizontal lines and diagonal lines create the most energy and movement and can be dynamic, directional and active, but also restless, unstable and busy. Continuity of a line creates linear flow and a stronger sense of direction than a broken or jagged line.  When using a series of marks or points, the closeness or proximity of of these points causes them to lose their individual identity and form a new, larger identity.

The use of line can help connect two points that are not physically connected, as the eye tends to connect them, creating what is called a mental connection. Psychic lines are created when one line points to another, suggesting mental connections between the two points. These and all directional lines are important because they create focus. A line is a very direct method of drawing the viewer’s attention to the focal point or specific object. An arrow is a simple example, while a more subtle example is a path leading to a house.

There is power in the visual weight (thickness or thinness) of a line. For example, thinner lines may appear weak, delicate, soft, while thick lines are bold, attentive and powerful. Think of the assertive and expressiveness feeling of DANGER compared to DANGER or danger. Mood, importance and expressiveness can all be manipulated and increased by creating thicker lines or in most cases text.

Think of how many different types of lines fill your webpage. It’s probably a lot. See if you notice how they interact with one another. Do they create direction or suggest any emotion? Line expresses a variety of verbal and visual concepts and can be used by itself or in conjunction with other lines to communicate a message and impact an audience. As a design element, line can suggest anxiety, movement, energy, simplicity and can highlight certain design styles (i.e. dotted lines can suggest stitching or a homemade feel). What do your lines say about your site?