Week 9 Page 3: Using Line for Unity and Consistency
How to Use Line in Design
Lines can be incredibly useful tools for designers. When used correctly they can be effective for creating separation, connection and eyeflow. Think of all the ways you could use lines in screen design; separating columns, separating navigation labels, drawing borders around information... But don't just think of lines as practical tools... they can also add visual interest and flow to a design.
A line doesn't have to be just a line!
Traditionally, we tend to think of lines as being straight connectors between two points. Like this:
However, you might want to think more creatively about the simple line. How about dashed, dotted or textured lines? Curved or diagonal lines? Any of these can get you away from the "boxy" restrictions of the traditional screen design. Let's have a look at how you can use a variety of lines in your designs!
The traditional line:
There's nothing wrong with traditional vertical and horizontal straight lines! They are perfect separators of content!
Think of a site like The New Yorker that wants to feature many topics on a single page: http://www.newyorker.com/ Links to an external site.
Here's a very simple example of line in action:
Even when you use the tradition line, remember that it IS an element and has a visual weight. Look what happens when lines are too heavy, too close to content or with inconsistent weights! In the top example, the lines act as subtle separators. In the bottom example, they have become more than separators... they are visual distractions!
Dressing Up the Traditional Line
If you are using many lines in a design (as the New Yorker example demonstrates), it's probably not a good idea to add extra detail or ornamentation. But, if you have just a few lines and want them to tie into another theme in your design, there's nothing wrong with dressing them up a bit. Add a circle or square at the ends. Make them colored! The following example comes from a site that uses a circle theme and repeats that on all the lines. Notice how consistent the use of lines is: http://www.getnymi.com/ Links to an external site. (Archived site)
Line Variations: Breaking Away from the Traditional Line
Curved and wavy lines are useful for breaking up the horizontal, boxy look of some screen designs. They often add a casual, relaxed mood to a design but this may depend on how smooth they are. Some curved lines might look almost frenetic! Here's an example of a site that uses lines creatively as separators, containers and directors of eyeflow: http://poppiesflowers.com.au/ Links to an external site. (you need to look at a few pages to see how consistent the use of line is):
Here's a very different use of wavy line to create a sense of fluidity. It certainly breaks the horizontal nature of a screen design!
Links to an external site.
Dotted and dashed lines can be an interesting variation on the traditional solid line! One advantage of these lines is that they can have a lighter visual weight. However, keep in mind that we often associate dashed lines with cut-out coupons. You can experiment with a a combination of solid and dotted lines for visual variety but make sure they are consistent in weight throughout a design.
Diagonal lines are also useful for breaking up the horizontal, boxy look of some screen designs, but unlike wavy lines, they have a definite energy and tension to them. If you want to create dynamism in your design, try a diagonal line!
Lines as Containers
Lines are frequently used to contain content and organize it on a page. If used consistently, borders can be a great way to create unity in a design either on a single page or multiple pages. Think about using something other than traditional lines (like dotted lines perhaps) but remember that if the lines are too heavy, they will overwhelm the content. Also remember that dashed lines tend to be associated with coupons so be careful when using this style of border! Look at the use of boxes at this site! They are subtle but just enough to create visible containers. They also help to organize the content into a unified group.
Lines as Directors of Eyeflow
Lines can create unified and connected designs by leading the viewer's eyes from one point to another. A practical use of line in web design is to direct the viewer through a single scrolling web page. An obvious use of a directional line would be an arrow, but most lines inherently lead the eye anyway. Here's an example. The line draws the eye down from the map and the circles on the line make us pause to look at the information next to them:
And lastly... we have to enjoy a dreadful use of line! So... here it is! What's wrong with the use of line at this site?
The golden rule:
Lines should help not hinder content! Keep it simple!
http://www.merciatouristboard.org.uk/ Links to an external site.
Successful Use of Lines or Not?!!Look at the following sites and decide: Successful or Not Successful? • Konnu: http://www.konnu.com/ Links to an external site. • Stack Magazine: http://www.stackmagazines.com/ Links to an external site. • Dan Mall, Designer: http://danielmall.com/about/ Links to an external site. • The Estate Trentham: http://theestatetrentham.com.au/ Links to an external site. You can post your comments to our Weekly Class Discussion, Discoveries and Questions Forum if you want to discuss these sites with other students. |