Graphic Lifts pg 6: Production Graphics with Wendy Peck at webreference.com

Graphic Lifts: Tie It All Together with Lines

You will find a whole tutorial dedicated to the "how-to" of creating create lines in graphic programs: Let There Be Lines. In this section, I would like to take the time to look at why lines can be so valuable.

In a nutshell, lines are like markers to direct your visitors. In some cases they will act as stop signs. In others, they will take the visitor by the hand and lead them where you want them to go. But no matter what action lines cause, they also have a secondary role. Without dividers and direction, our eyes will wander all over the page. Lines can help elements feel more solid on the page as well.

As an example, look at the samples to the left. In the upper sample, the graphic is lined up neatly with the text , and forms a spot for the eye to rest. The second sample is identical, with the addition of a line. Notice how the graphic and headline now form one unit – much more the intended purpose for the graphic. In the first sample, our eye is stopped and we will then move naturally to the headline. But in the second, we stop and focus in on the headline in one movement. That is the power of lines and one we can ill afford to ignore to provide the best result for our clients.

Images have no anchor ... nothing to hold them together.

A table with visible borders anchors the images, but the look is static and the varied shapes and sizes are more evident.

The images are anchored by the stylized lines, but seem to be part of a "design" rather than just placed.

As an Anchor
Most of us run into the challenge of presenting a number of products in an easy to digest form – which usually means many on one page. If you simply place them on the page, they can appear to float all over. One solution is to box them in. But it is hard to build a dynamic, flowing page with heavy boxes.

Try, instead, using lines to tie graphics together and anchor them on the page. These samples were roughly put together as an example. Notice how the first sample at the left has nothing to balance the varied sizes and shapes and seem ... undisciplined might be the right word. The second sample has been pulled into some order with a visible table border arrangement, but it is very dull, and the varied sizes and shapes are now more out of place. Finally, study the third sample. Although this is still not refined nicely (I would like to see at least a hint of a shadow on the images) I think it is much more orderly than the first sample, and presents more style than either of the other versions. The table structure would be similar for all versions.

Dividing lines are simply a beginning. Groups of objects can be placed in a table with a background of multiple, subtle lines to clearly identify the product area. A line coming from the left at the top, and one coming from the right at the bottom of a product section can be enough to provide an anchor. Make sure you check out Let There Be Lines for more ideas and all the techniques.

Test Your Page Balance and flow
One of my favorite proofing techniques is to have a page displayed in preview mode. I then step back about 10 feet and then 20 feet from my screen. As I move back, the details of the page disappear, and the "areas" become quite evident. This is a great way to make sure that the flow of your page is as you want it. I often add or remove a line or other graphic element, or adjust spacing after this test.

For obvious reasons (unless your eyes are a lot better than mine) this is not as effective with a subdued design or a monochromatic color scheme. For that situation, you can use the print world technique of squinting your eyes until you can only see forms rather than details. You can also try crossing your eyes, though I have not had any luck with this on a monitor (but I am serious – this is also a time-tested balance check for print work).

Any of these techniques are best practiced either very subtly, or when you are alone. Our reputations are often right on the edge simply for the amount of time we are at a computer, and enhanced by the occasional conversations with our screens. Crossing our eyes or studying intently as we walk slowly backwards from our desks may not be seen in the right light by your coworkers. .

Next page

Graphic Lifts Tutorial Index

Graphic Lifts Start
Texture and Repeating Elements
Duplicating Elements in Vector Programs
Sharing Attributes in Vector Programs
Using Repeating Elements
Tie It All Together with Lines
Using Graphics to Shape Color Blocks