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.
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.
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.
The Alabama Alpine Camp website also uses lines to separate information into blocks.
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.
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.
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.
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.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well