Graphic Lifts pg 5: Production Graphics with Wendy Peck at | WebReference

Graphic Lifts pg 5: Production Graphics with Wendy Peck at


Graphic Lifts: Using Repeating Elements



Finally, we have arrived at the part where we can use the techniques we have discussed. Most of the instructions included here are for vector programs, but many other articles, as mentioned earlier, cover what we need for this technique with raster programs.

As we move on, you will notice that many of the ideas here amount to making "sets" for your pages. Do not confuse these with the heavily ornate sets available for personal home pages. Light use is the key to using design elements. There is an old saying in the fashion world which refers to accessory use, but applies wonderfully well to graphic design. "If in doubt ... don't!" Wise words for professional style. Another I have heard (I have no idea where this comes from) is, "Simple, elegant design is possible ... it is just very, very hard work." Truer words were never spoken.


Splash page design at the top and the resulting elements, guaranteeing consistency through the site.

Find Repeating Elements
Generally, when I am creating the look for a site, I am not immediately worried about elements – that comes later. My own site is an example of this. I first picked the colors, then decided on the shape for the colored boxes. Then came the rough lines, which made it all fall into place. From there on, all the elements came from the lines and colored boxes.

Usually, I create the overall design, often the entire entry page, then analyze the site map to establish where graphic elements will help make the information more easily followed. That gives me a guide for the type of graphics I will require. Sometimes, and in the case of my site, the graphic elements present themselves instantly. I created the subheads and rough lines to use with this design before I designed the interior look.

I am very careful with my graphics and a fanatic about creating my "sets." It is too easy to forget exactly what you were doing a few pages ago, and as we all know, each page is often a design challenge in itself. Also, once I am into building the pages, I do not usually want to be going back to create graphics. Different information must be presented in different ways, which can blow a design apart if you are not working in a modular way. My site is about as simple as a structure gets, but with the elements I had to work with, I could have maintained consistency throughout the site, even if the information had been in many different forms.

Looking for and creating your design elements takes a few minutes up front, but saves you hours in the long run.


Tying a Page Together
You know the difference when you are using a well designed site. You have been to sites where you wander from section to section and you always know that you are in the same place. A lot of this has to do with branding, an area you need to understand well to create a unified site with the right mood. (Webreference has a a great article on this topic by Wanda Cummings: Online Branding: Developers and Designers Hold the Key.) Much of the success in a site with great graphic unity has to do with initial planning. You must have a very solid site map to work graphic magic. Assuming you have done your homework on the above topics, here are a few ideas to help you create graphically exciting and well directed sites.



Geometric Shapes
No matter what your main design, there is a geometric shape that will enhance your pages. For some elements, I will reduce and simplify main graphics, but I always want a simple shape or two to use for organization and color when a more complicated graphic would overwhelm the information. In the second page of this article, I included a plain bar with the dimensional one from the gray set. The last thing you want to do is make your graphics take over from the information.

Repeated shapes inspired by a menu is a very effective way to enhance your page. The visitor's eye is already using that shape to get around, and the shape can be put to work I have created a little menu sample (shown at a slightly reduced size) and some suggested geometric shapes to use though the site. I probably could have created at least as many again – this is where the repeating, duplicating and copying properties between objects can really speed up your production time. Within minutes, you can have a set of 25 elements. You would never use that many, but it will give you a great selection from which to choose the ideal few.


Next meeting !

Don't miss your opportunity to vote for your new benefits package. Dawn Smith, from Standard ....

Headlines created with text. In this case I have specified font and size since the sample is not close to the CSS styles we use. In production, the attributes should be assigned through a style.

Two variations of a 3px by 3px GIF filled with solid orange. Specify the desired width and height for an instant, custom line.

Borrowing color
There is nothing more powerful on a page than color. Don't miss the opportunity to add impact without adding any download time. Use the colors from your graphics in your subheadings, and make them large enough to stand out. I could be crucified for that statement from a graphics excellence standpoint, since text headings lack anti-aliasing. However, as much as I am a perfectionist, I am also a realist and live in a rural area with no options but a 21.6k connection. So ... I turn my head to a little aliasing to have color and style without the wait. Text headlines are also much more efficient from a production and upkeep standpoint.

You can also use colored backgrounds in tables and cells to help pick up a color and unify the page. I often keep a very small GIF, 2 or 3px square, in each of my main colors – just like the clear GIF, the size can be adjusted to suit your needs and the download time is tiny.

Don't let your elements fly all over the page. Continue on to learn how to gain control with lines.



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

Front page234567

Created: July 20, 2000
Revised: July 20, 2000