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:
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.
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.
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.
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.
Download a free sample from my book, Design Fundamentals.
now i know more about a line and its kinds..
Drawing with lines and dots can go as far as your imagination and creativity can take you.You can express moods, feelings, and bring things to life.Different days you will find yourself expressing different feelings.Beauty is aways in the eye of the beholder,very true.
True. It’s amazing how a few simple shapes can express so much. I marvel at some of the designs I see in books and online that use only the most simple forms.
i am a design aspirant. the information is really useful. can you please tell what those symbols(arrow,paper clip..) at the starting of the page represent.
They were just meant to be examples of different shapes. An arrow usually represents direction. The paper clip might be representing an office environment, though it’s a tired metaphor at this point.
They are just showing different ways lines can convey information.
Art is absolutely one of the most loved things to do when we were children. However, little did we know its meaning was and how it would navigate so may wonderful things we know and see? I am convinced that lines are important especially when we all use symbols to communicate. A sociologist is the first one to tell anyone that symbols a universal conversation.
Did the meaning even matter when we were kids? It’s interesting to think how over the years we take meaning from things as simple as lines, but we do.
I agree lines are an important of visual communication and good to understand so we can better communicate with those viewing our designs.
hello, I am visual art teacher I want to teach student about elements of art, and in that types of lines,so for me its great resource for me
Thanks nilaxi. I’m glad I could provide a resource for you. I’m working on another post about visual grammar, though it’ll be less of a resource and more general opinion and ideas. It should be ready in a few weeks.
It is good things you have this site its really help me in motivating my students in line sketching. thank you. Keep Up The GOOd wor
Glad I could help motivate your students.
lines are so interesting and show so much emotion i know understand them better as an artist
thanks . i learn a lot about lines.
if i wanna follow it in art or architect, which books or sources you advice me to read?
I don’t have specific books to recommend for art and architecture, but you can see these recommendations for design books if you want..
Very interesting & snazzy to read and think about how this connunicates messages, that many humans may not be aware of… I wonder if animals may be aware of line (light) language or perhaps just the pattern of movements in space is enough to communicate ideas / thoughts without words…hence migrating birds, animal territories in space and routine routes animals do…so a migrating bird flying in zig zags may be concerned about travels
communicates, not connunicates. Whoopsie daisies.
I’m guessing animals aren’t aware of any of this, but it’s interesting to think they might react instinctively to the world in a way that fits with these principles.
I was curious so I just looked up why animals might move in a zig zag pattern and it’s because it offers then more stability when they move. I didn’t see anything about birds, though.
I am an art teacher and was wandering to know about the lines and their feelings.I must say thank you a lot for providing a precised form of knowledge about lines.I must wish to see your knowledge regarding the colours as well.
I have been attracted to and a fan of pen and ink drawing, and the use of lines for cross-hatching, to visualize textures, shading, depth, and other elements of a 3 dimensional object in a 2 dimensional drawing. My dad was a classic Walt Disney animator and I grew up in a Disney family. Some of my teenage favorites were R. Crumb’s Zap Comix & Fritz The Cat black & white cartoons, and some Rick Griffin wave and sword-fighting flying eyeball warrior’s. Yes, I grew up in the 1970’s, and it was a spacey time. Also, Jack Kirby’s Marvel Comics characters used motion indicating lines extremely well for action scenes. I am currently working on designing a Mojave Desert southern California design elements set of symbols and stylized art that reflects life here in my SoCal Mojave desert. Hsve to work on something when I retire after this school year. Thanks for the good information and food for thought and visualizing.
I found this such an interesting article and valuable to me, I am a mature student (47) studying fine arts degree, I shall be referring to to this explanation within my module. Thankyou.
very helpful, thank you for sharing your knowledge
I am a Pre-Technical skills teacher who always use lines in presentations. The article is very informative and educative. I really appreciate the knowledge acquired. Thank you.
Thanks David. I’m glad you found the article helpful. If you’re interest, there’s a corresponding article on the meaning of shapes.
wow!this is great,never belived line has to do with all i been seeing till i meet this. i recommend this for all art teachers. thank for putting up this.
I have learned much about lines in art. Keep up the standard.
This is really very helpful
Thank u . its very useful 💕 I have found answer on my assignments🤗
now iam able to use and define lines and use them in my desigs
That’s a good point about long, perfectly even lines feeling artificial.
I am just now working on a stylised illustration, so the illustration itself is ‘unnatural’. And in that situation even lines seem more suited to the overall effect because everything is precise. Would you agree that in that case an even line can be better suited to the overall look?
Absolutely. The illustration you describe calls for something ‘unnatural.’