|
The contenders Many
designers only show their clients one or two designs. I prefer to give my clients a range of designs to choose from. This gets them involved in the overall design process. To present the five site designs to Peter, I
created a simple, one-page NetObjects Fusion site that had links to the other five site designs. I posted both the single page and the five multi-page designs on my Web site. I sent the URL to Peter for him to
review. I find this an excellent use of NOF and an efficient way to present designs to an out-of-town client. Design 1 
Several elements came together in my first design. I used the same font used in the Software Factory logo, Craze (available from Eyewire.com) for the animated banner across
the page. I chose to use this image in place of NOF's auto-generated banners. The name of the section would precede the text on each page thus eliminating the need for a
banner. I like having the flexibility in NOF of using or not using the auto-generated elements.
I created a large repeating background tile using a line drawing version of the logo, about a quarter of which you can see here. The simple line drawing gives the page's
background the appearance of an engineering drawing.
 NOF 4 makes it so easy to
create four-state rollover buttons and I always enjoy the challenge of coming up with new designs for them. Here are the four states for the buttons used in the first design.
The shape of the buttons comes from the three-quarter, pie-shaped objects that appear inside the loops of the S in the logo. As the mouse passes over the button the text changes
to red and a bright pink and gray glow appears behind the button. The highlighted button is the same as the two red and black, three-quarter, pie shaped-elements from the logo.
The mouse over causes the red and black button to flop horizontally and vertically.
I created an animated banner for the page using a large version of the Software Factory text. Because the text is static and only the small red dots change color, the file size is
relatively small for such a large animation. The blinking dots are reminiscent of blinking lights on a machine.
Design 2 
I used a gray on gray, striped background for the second design. The two stripes used for the tiling image are about 4 pixels thick. I created a montage of clip art and added a stylized, semi-transparent CD disc on top.
 The bulls-eye element on the buttons repeats the O in the font Craze which is used
on the logo. The regular button state is gray and black, changing to a 3-D red and black version with a drop shadow when the mouse passes over. The highlighted button is red
and black and changes as the mouse passes over to a 3-D version with a drop shadow.
My editor sent me a vector file for the logo which I broke apart in XARA and used to create an animated GIF logo in
which the gear parts that comprise the S rotate. The animation worked fine but the GIF animation was about 90K! Yikes. That would never do—even if Peter's clients all had fast connections.
So I redid the logo in Macromedia's Flash 4 and the size dropped to 5K. That was more like it. The animation is set to play only once. Windows users can right click on the logo and select Play and Loop to view
the animation. Mac users hold down the Control key and select Play and Loop.Design 3 
I used a variation of the big logo background for Design 3 but changed the line to white and the background to pale gray. The large embossed text is the same color as the gray
background. I used the animated logo from Design 2.  There are times when I
prefer not to use NOF's auto-generated buttons—especially when there is a large difference in the length of the text on the buttons. Instead I created a picture rollover button (accessed through the
Component Tools menu), with a gray text version for the initial image and mouse out images, and a black version with shadow and red accent dots for the mouse over image. The drawback to using picture rollover
images for buttons is there is no automatic way to indicate the currently selected page. To get around this shortcoming, I created a red and black non-rollover image with a shadow
for the highlighted state that replaces the appropriate picture rollover button on the selected page.
I placed all of the picture rollover buttons in the Master
Border and then created new Master Borders for each page. Then I swapped the appropriate red highlighted version for the picture rollover button on each page. Each new Master
Border was named to reflect the page: for example, the Master Border for the Y2K page is called Y2K. Placing the entire group of picture rollover buttons on the original
Master Border page first, ensured that all buttons would be in the exact same place when I created the new Master Pages.
|
|
