|
 |
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
  
|
 |
|
|
|
