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
- emphasize
- 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.
Skoda: Daddy
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.
Oxford Bookstore
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”).
Freelance Switch
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!
It’s amazing how something that seems as simple as a line can define a whole work of art. This part reminds me of being in my high school art room and having my teacher tell us the definition and importance of lines. We all looked at her like she was crazy! I’m glad she kept going and I finally understood just how important they can be.
And great work transitioning from a tradition and almost obvious use of lines with the beautiful Kenstar ad to the use of lines on a website. Alot of times I get overwhelmed with so many other elements that I can forget about the effectiveness of a properly placed line.
Jacob,
Yeah, I’m trying to find a variety of ways to use line, but sometimes it’s hard! Even I get into thinking about lines in one way (a straight paragraph rule, for example) and if I don’t find something that fits that exactly, I pass it by. And when looking at a piece, it’s also hard to focus on just the line, as opposed to an indepth breakdown of all the elements and how they play on each other—like line and texture, two different elements, that can be dependent on each other, as in the Skoda ad.
This is cool. I didn’t really grasp the differences and subtlties of these fundamental design concepts in school. Perhaps I will reread those earlier posts you did. Look forward to the next ones too!
Kristarella,
I didn’t know you actually took design classes in school! I thought it was just a hobby of yours. The earlier posts don’t use real world examples. I didn’t really know where to look before, but these new ones will give a more practical look at how to use the elements of design. I’m also planning to (finally) do a series on the principles of design as well.
I’m not sure that any design classes at school have any baring on my hobby now. It was mainly looking at elements of design in Visual Arts classes, I did take a sort of half-class on design in my second last year (as well as another half-class on photography, which definitely developed my love for photography).
I did love Art at school, even though I wasn’t particularly talented. You can see a few bits of my major work (there were about 10 pieces together) on my photoblog. None of the methods I used were taught at school, it was more the concepts that were important, so I don’t look at my major work now and love it - there’s a lot technically wrong there, but I’m glad I was able to develop a concept and work it through in different ways.
Haha, another long ramble for ya :P
You know, the nice thing about working on a computer is those of us (read: me) who couldn’t grasp the concept of lines and curves by hand, now have tools like Illustrator and PS where we can edit the path without going through multiple erasers. LOL!
Nice post. :)
Kristarella,
I think a photography class would be a lot of fun! I’ve always wanted to take one, but never got around to signing up. Mmm, those coffee beans look tasty! Photography can be much more difficult that graphic design, because you have to use things that already exist instead of being able to composite and draw in what you need/want. Have you ever seen the work of Chema Madoz?
Erika,
Hey there! Welcome to Creative Curio! Hehe, I totally agree with you. I’m terrible at drawing, but thanks to Illy and PS, you’d never know :D
So, you should make a landing page for these series of posts - the original ones and now the elements in pracice “real world” ones. That would be very handy.
Kristarella,
Excellent idea. I wanted to do that when I wrote the first ones, but… obviously never made time for it! You’re right, it would be handy for people to bookmark. I want to make one for my InDesign tutorials/walk-throughs, too, because it seems like not too many people are familiar with the program, but really want to learn more. So much stuff to optimize on the blog!!
Some great advice as usual. Love the honey jar—wish there were a Waitrose in Japan. I like the Oxford Book Store ad too. The chap standing precariously atop the text is a nice touch; he’s about to jump, perhaps?
Text as outlines can also make for quite a strong image.
Johno,
And it is beautiful. We don’t have a Waitrose in the US (at least on the west coast), but I saw it in a Comm Arts magazine. I think you’re right about the guy about to jump. And ah, outlining text. Great idea, too!
Oops, honey jar is in the next post on shape, but it could easily go here, too
One Trackback
[…] Using Line: Real World Examples […]