Elements Of Design: The Line

There are a number of design elements we can use as part of our designs and one of the simplest and most useful is the line. The type of lines you use can convey different feelings, moods and add strength to your ideas. Hairlines, dotted, dashed and curved lines can spice up a design.

When you’re driving you stay on one side of the white line, and you’re allowed to overtake when the white line is dashed. In keeping with the driving analogy, here’s some traffic warning signs, the vast majority of which consist only of lines. We’re used to seeing and obeying lines (or what they represent) every single day.

roadsigns2

Take a look at the lines below and at how each one has its own personality. By varying thickness, curves and stroke width we can produce different feelings or ideas.

LineTypes

Lines For Organization

Frequently, lines are used in design to divide sections of a page or layout, and to join sections that are related to each other. On websites and in magazines we see lines used to frame photographs, separate sidebars and join articles together.

In the image below you can see a magazine spread which makes use of both vertical and horizontal lines. On the page on the left, a vertical line separates two columns of text. On the page on the right, the introduction is separated from the heading and the main copy by using two horizontal lines along with text in italics.

Magazein

The Alabama Alpine Camp website also uses lines to separate information into blocks.

alpinecamp

The Grid

Grids are created by designers as an aid to positioning elements on a page. The grid itself is invisible on the final design, but sometimes grid lines are drawn to strengthen the effect of the grid. This can help maintain consistency throughout a website, magazine, booklet or brochure. The Black Estate Wine website uses a 12 column grid with visible lines under the main headings and also to separate links in the sidebar.

BlackEstate

Big River Man is an Indie documentary. In this poster, the lines are used almost as punctuation while sitting on a grid. Where you might expect a full stop (period) what you see is a horizontal orange line and where you might expect a comma you get a vertical line. So this is an example of lines joining, rather than separating content.

big_river_man

Lines Provide Texture

The type of line you use can add texture to the piece. Rough hand-drawn lines give a very different feel than a precise hairline. As a simple example look at the movie poster below.

There’s lots of line work on the poster for Away We Go. The lines are loosely drawn in the background and on top of the photographs of the two main characters. This design is clearly aimed at a certain audience and has a trendy Indie feel about it.

away-we-go-poster

Image Credit : Jo Blo

Guidelines For Using Lines

1. Think about what kind of line you will use. Thick, thin, wavy, dotted, dashed, hand-drawn. Each type of line can convey a different feeling.

2. What’s the purpose of the line? Is it to join related content or to separate unrelated content? Is it to add a border around an image?

3. If you’re using a grid, are your lines helping to reinforce the grid, or are they breaking out of the grid? Either can be good, as long as you know what the lines are supposed to be doing and you’re making a conscious decision about it.

4. Think about multiple lines to create texture. A repeating thin hairline can be used as a background texture, as can an elaborate hand-drawn pattern of lines.

5. Don’t just put lines in for the sake of it. As with any design element, if you don’t need it take it away.

Next week, we’ll continue the series and will look at Shape as a design element.

Related Reading:

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Faixan..

    Superb Article! Thanks a lot for this info.

  • Anonymous

    Big River Man looks awesome! Definitely better than Superman who’d just fry the gators with his laser eyes

  • Samoo

    Great job! I think you’ve very cleverly exposed the pros and cons of using lines!

  • Ivo Sá – Curitiba – PR – Brazil

    Very nice post.

  • Benivolent

    Nice article, I guess some of these information will be very useful for newbies in website development! Thanx for sharing.