The very first posts here at Creative Curio were on the elements of design: line, shape, space, size, texture, value and color. I thought it was time to revisit the elements, look more closely at them and study how good design uses them, in order to improve our own uses of the elements.
Sometimes it’s hard to pinpoint exactly what makes good design good, or bad design bad. It really helps to deconstruct it in terms of the elements. Ask yourself how the following examples use the element of line.
How to use lines in your designs:
- create texture
- define space
- produce a mood
- indicate motion
- show perspective
Kenstar Air Coolers: Hammock
This Kenstar ad is using lines to create a mood. There is a breezy line quality, achieved by thin, wispy lines, that sometimes curl to add to the light (less serious) mood of the piece. The lines are soft; there are no angles to them, although they do get a little chaotic at the second hammock anchor.
And notice how the lines don’t have to be straight! This is an all-to-common misconception about line. Think of a skyline, not straight and much more visually interesting than using a straight horizon.
Line also defines the shape of the hammock; there is no solid area of color that holds this function like you might usually see. These thin, curving, soft lines are also relatively feminine, and along with the font used in the tagline (“Breeze that pampers”), and even the word pamper (usually what women go to the spa for), it is a very feminine ad.
Similar to the lines in this composition creating the shape, they also serve as a texture. The arrowheads to show the direction of these little air currents also provide some visual texture.
This Skoda ad’s hand drawn look says many things about the mood they are trying to create. This note is from one little kid to another, and it talks about how his dad is careful when he drives and that friends (other kids) should be just as careful while riding their bikes. Even though it sounds like it’s one child to another, it is directed at parents who are concerned for the safety of their children. Because Skoda (the car company) is promoting bicycle safety, their cars must be safe, too, right?
The use of organic lines is a good example of how to use lines to create a mood that is lighthearted and juvenile. The graph paper behind it though, suggests structure and order. I’m not sure if that is a cultural reference (do children typically draw on graph paper in Italy?), but it creates an interesting juxtaposition of lines—childish and mature, playful and ordered.
Texture is another attribute that can be produced using lines, as here with the graph paper.
Line doesn’t just have to do with illustrations or photos in a layout. Typography is every bit as important! This Oxford Bookstore ad is a great example of using typography and the lines created by it to produce a desired result.
The leading and tracking are negative (indeed the words on each line and each letter within the words are practically touching) and the thin lines that are between the words and letters create a lot of tension in the overall feeling. From a design standpoint I would say it would’ve looked more harmonious to make the letters touch, but perhaps this discord is what was intended—just look at the message (“Truth hurts. Read fiction.”)!
Lines here make the viewer feel constricted and irritated, and they lend themselves to create a sort of rhythm when the words are read. The relatively thick lines are very forceful, bold, masculine, daunting and overwhelming within their space.
Speaking of typography and line working together, it would be appropriate to note how the font size plays an important role in hierarchy. The lines of text with smaller (shorter) font size are less important than the body copy of the ad. The hierarchy presented here is the copy (“I’m in love with somebody else.”), the company (Oxford Bookstore), the tagline (“Truth hurts. Read fiction.”) and finally the unique selling point (right above Oxford it says “The largest collection available at”).
It’s good to get some web design in here, too, so let’s take a look at how Freelance Switch uses line.
In many web designs, line is the most common way to separate information. It is also a popular element for emphasizing information—think of the underlined hyperlink!
The navigation on the FS website is contained within a thick line, as is the name and tagline. They also use lines to separate out information, like the meta at the bottom of the article (date, social media links, etc).
The styled blockquote on FS has a rule (line) above and below the quote (see it better here), and I’ve also seen many other sites that have a rule on the left-hand side to further call attention to the special nature of the text.
This has been the first installment in Real World Examples of the elements of design. Next up we have shape, space, scale, texture, value, use of color and the color wheel and color theory. Subscribe to Creative Curio so you can learn all about the elements of design!