Graphic Greats: Production Graphics with Wendy Peck at webreference.com | 22

Graphic Greats 5: Subtle Lines at Work

Lines take the back seat, but still perform a very important role in this site. Images © San Francisco Symphony.

San Francisco Symphony
Lots of lines here, but you have to concentrate to see them. Lines definitely take a back seat to the images, but they have control of the page. Lines direct the flow, and subtly fill in where empty space would be too harsh. In fact, the line use is so good, that while much of the screen is filled with detail, you still feel that the design is clean and open. We often forget how effective a line can be when the color is only a shade or two removed from the background color. This site should inspire you to use subtle design lines in your work.

The Saab site is very clean with excellent fine line use. A close-up of the navigation system is shown below. Images © Saab.

Saab
(Click on the link and then on the “Click here to enter” link.)

The Saab USA site defines subtle line use. The page uses blocks of color for interest (and are they not just wide lines?) and adds very fine lines to the navigation system for style and to help remember where you are.

In fact, the navigation system is worth taking a look at for its own merit. I see many examples of beautiful, artsy menus, but too often they are hard to understand and leave a visitor guessing. This three level navigation through the car's features was easy to navigate and very creative. I have included a sample of the navigation at the left, with three levels showing. You should visit the site to see this menu in action, since the static example does not do the “real thing” justice.

ditech.com
This site uses a lot of lines, but like our other subtle samples, you will have to concentrate to see them. I have included a close-up version of the menu to show how much simple dotted lines can do for a menu. Without them, this is nothing but a list of text. The visually lightweight dotted lines turn it into a menu.

The header for the site is enhanced with very light scan lines. I did not even notice them when I first viewed the site, but the textured appearance, and graduated fill does add to the style. The page headers are in different colors, but the horizontal layout and the scan lines help to unify the look.

The background also uses lines for texture and interest, and perhaps to reach a tone that is not available in a single Web safe color. With the wide range in monitor sizes and resolutions, backgrounds like this are becoming popular. The main information area of the site is clean and clear, yet the background helps to reduce the huge amount of “white space” for visitors with high resolution monitors.

This is not a fancy site, but it is perfect for the business represented. The graphic line use makes it pleasure to get around and very attractive.

Next page

Graphic Greats Index

Design Lines Start/Lines with Masks Tutorial
Lines for Design
Subtle Lines at Work
Tiny Lines in Vivid Color
Unusual Lines