Lines and Leading Lines

Understanding how to use lines and leading lines in web design to direct the viewers eye where you want too.

Leading lines start with one of seven visual elements of design, a line. There are many variations of a line but they all share a continuous mark made on some surface by a moving point/dot. Lines and leading lines in art is meant to direct attention to a subject and move the viewer’s eye through an image using a line. Railroad tracks, lines of colorful flowers, and roads are examples of lines used in imagery to lead the eye in a specific direction. Which is very effective when used in web design.

When it comes to designing websites, it is important to understand how to lead a viewer’s eye to the crucial information on the page. Visual hierarchy is another principle which is critical in effective web design. Creating communication through visual elements varying size, color, contrast, alignment, repetition, proximity, density and whitespace, as well as style and texture is how visual hierarchy tells you which information is most important. As an example, what is most important can be noticeable by using a brighter color than the other elements, such as red.

However, this article is meant to stick to the fundamental design principles of a line as a jumping off point to later discuss visual hierarchy in another article.

Back To Line Basics

Main Kinds of Lines and Emotion Suggestions

Horizontal

When used in art, a horizontal line will make a  viewer feel comfortable, calm, relaxed, peaceful, and quiet.

Vertical

Vertical lines can be used to show dignity, formality, and strength.

Diagonal

Diagonal lines can give the viewer a sense of action and excitement.

Curved

When used in graphics, imagery, or art, a curved line can be used to express movement in a graceful, flowing manner.

Zigzag

Creating visual confusion, a zigzag suggests action and excitement.

A curvilinear line is an organic line with a soft natural feel. The free-flowing curves can suggest an exuberant emotion. Often seen depicting the female form, the use of a line has encouraged numerous studies in the field of environment and behavior, and effects of architecture, urban design and architectural form on human response.

Quite the opposite of a curvilinear line is the rectilinear line. Geometric in style, the straight lines with pointed edges create a harsh and energetic feeling. Cubist artists like Picasso employ a dominant use to express an organized sense of chaos.

Implied and Actual Lines

Within artwork there can also be an implied line or an actual line. An actual line can be clearly seen. An artist will use lines which are drawn or painted with the intention of being noticed. As opposed to an implied line, where the viewer connects other elements to make a line. Visual direction and leading lines uses implied lines to direct the eye to a focal point.

Line Quality and Thickness

Among various types of lines, quality and thickness can also portray motion and emotion. The quality of lines is determined by the tool the artist uses and the motion of the artist’s hand. In regards to thickness, the line is determined by how dark and heavy it appears. Thickness in lines can create emotion and moods. Wispy or delicate can be suggested by a thin line. Strength or anger can be depicted by a thick line.

Line Variation

Lastly, line variation can add interest to lines. Variations can include length, which can be long or short. Width which can be thick or thin. Finally, texture, which can be smooth or rough.

Leading Lines

What is a leading line?

Now we learned a little about the line as a visual design element, we are ready to talk about leading lines. Directing attention to a subject and head of the picture, leading lines can also visually pull the viewer into the distance. Essentially creating visual flow because a line will naturally lead the eye along it and through the image. When used in photography, leading lines will add life to an ordinary shot because it can quickly make sense of the shot and add dimension. When used in web design leading lines can help a viewer process the information given in the correct sequence or you can bring a viewer through to the “call to action.”

Types of Leading Lines

There are a few ways to accomplish a leading line; patterns, color, and leading lines (or lines). In photography, leading lines can be found everywhere. Photographers will enhance their subject by using different types of lines, such as; railroad tracks, lines of colorful flowers, split-rail fences, a gravel road, highway, tail lights, or shadows to draw the viewer’s eye toward the subject.

How to Use Leading Lines

When using leading lines, the simplest way is to start from the bottom of an image and draw a line to the top using 3D perspective. Think of standing in the middle of a road (photo at the top of this article), if you follow the painted divider line notice the two sides of the road create a triangle flowing towards the distance. This example “leads” me to my next point, when using a line as a depth of field, try to complete the depth of field if there is a defined leading line.

Why They Work

People are inherently visual thinkers, not data processors. When taking in information and processing it evenly, people organize what they see in terms of “visual relationships.” Therefore, a line can direct the eye and quickly make sense of the image allowing the brain to process what is along the line to the point of focus. Not only quicker, but the brain can maintain attention longer while processing what is along the line because it is focused.

How Not To Use Leading Lines

When creating a leading line, ask yourself one important question, “Where is the leading line taking you?” If your line is taking you off the page, out of frame, no where in particular, or avoiding the subject, then you are not one the right “track.”

Correct Use of Leading Lines

Using a leading line correctly should be a given by now; have your line lead toward the subject. When your line flows near the subject or turn off into the wrong direction you will lose impact and it will no longer be considered a leading line.