HOME | EXPERTS | GRAPHICS| Column 22

Let There Be Lines 10: Gallery

Don't forget to let us know what you've done. Send URLs, files, etc. to wpeck@internet.com.

Creative shading creates lines to decorate and emphasize areas of the pages.

Site designed by Iconixx group, Bethesda MD. Images © Cysive.

Gallery

There are two problems when you come to the topic of lines in design: Where do you start? Where do you end? That is without even wandering to the question, “What is a line?" There are so many variations of linear expression that it is impossible to do a thorough job of collecting samples. However, I have gathered a few samples to get you thinking about the techniques included here. Hopefully, you will be on the lookout during your online work for more ideas to add to your line arsenal

Cysive
This site uses very creative line techniques. I have included some close-ups from interior pages, but if lines are your style, you owe yourself a trip to this site. The line work is subtle, but it really helps to direct the reader's eye to important features. Make sure you visit the interior pages since this site used similar design elements very well.

Especially worth noting are the lines created by using slight variations in textures and transparency. The steps in the textured fill were probably accomplished with layer masks, which I will cover in a future tutorial, but the idea can also be applied to fountain filled lines. Note how the menu is included in the top striping. It slides right into the design of the page, but is still instantly evident.

A little shadow color at the end of a line grouping gives the impression that that section is rising from the page—great visual interest.

Hairlines separate menu items and tie the menu into the rest of the page.

Images © Sears.com.

Sears
This is certainly an instantly recognized name in North America, and the Web site does reflect the look we have come to expect from their mail order catalogues. Yet tucked into in this traditional look, we can find some Web-worthy notes.

I especially like the way the designer has used a little extra fill on the lines to create a 3D look for the menu areas and to highlight the “com” in the site name. This does nothing to sacrifice the message, but adds a lot of life to the page.

The menus are very simple, but the lines added here separate the individual items and tie the menus into the overall look. In fact, there are many tiny lines quietly doing serious work on this site.

Mouseover menus are easy to find and add a linear touch to a flowing page.

Site designed by Richard Apperly, Melbourne, Austraila. Images © Multimedia Group.

Multimedia Group
This is a Flash site, so much of the line use does not show here. As the introduction movie is playing, a few thin lines are presented. I like the way the designer has used the positive and negative to create a line. Technically, of course, it is not a line, but practically it does the same work. Another line concept is presented with the text along the path of the color division. Again, the text is not technically a line, but it adds texture and color in the same way a line would.

The menu items feature bullets that are large enough to form the impression of a line. A nice bit of linear contrast on a page that is quite round. Each of the dots contain menu items that pop out on a mouseover. The style stays very clean with only one menu list visible at a time, yet they are clearly labeled. Personally I would rather give up the clean look than have to play the “find the menu” game that many Flash (and other) designers like to play. This site has managed to deliver both a clean look and an easy to navigate interface.

Wendy Peck is a working Web designer and writer living in NW Ontario, Canada. http://wpeck.com.

Return to start

Text as Design

Let There Be Lines Start
PhotoShop Lines
PhotoShop Lines (part 2)
PhotoShop Quick Grids
PhotoShop Scan Lines
PaintShop Pro Lines
PaintShop Pro Grid/Scan/Dots
CorelDraw and Freehand Lines
CorelDraw Grid Tool
Gallery and Resources