|
Designing a page look 
I thought the masthead was as good as any place to start.
Once I got the design for the masthead and color scheme, then developing the other elements would soon follow. The background color wanted to be bright and cheerful and
energetic, and orange, I am told, is the happening color. I used Adobe's MotterCorpus MM (Multiple Master) font which met my criteria of being readable while at the same
time having a distinct look and personality. I included the motto found on the original site "To Relieve, Inspire, and Share Ideas with Open, Direct, Anonymous Communication". I used as many symbols (mostly Microsoft's
Webdings) as I could find that corresponded to the main areas of the site: Counselors, Dating, Get Help, Archives, Our Sponsors, and
Contact Us, and arranged them in a colorful montage consisting of bright, solid, Web-safe colors.
As if this were not enough color, I created a repeating background image (shown half-size) to add even more color and energy to the site. Too much color and energy? Perhaps.
But it was a beginning. And I felt good that the masthead reflected some of the original design. Maybe not a whole lot, but don't quibble! 
If my first design had too much color, I thought my next design should be more restrained. For all I know, these teens
were more sophisticated and liked a more high-tech, low-key design approach. I used a repeating black and dark gray pinstripe background and Courier New for my font. I applied
a deep two color fill to the text. I had both extremes covered.  I created a repeating
background of Microsoft Webdings symbols, shown here about one third actual size, to add a bit of very subtle texture to the page. This kind of repeating background is becoming almost a trademark for my
Web page designs. And if I can't rip myself off, then who can I?
 Here are two pair of rollover
buttons. For this design, I opted to use Fusion's Picture Rollover effects, as opposed to the auto-generated buttons, because it gave me more flexibility. The down, and out states (top row) are plain gray
and the two-colored fill buttons (bottom row) are the mouse over state.
For me, this next masthead design struck a happy medium. It was colorful and yet not overtly so. I used a halftone dot pattern in three colors to mimic the original site masthead
and once again used Adobe's MotterCorpus MM with a drop shadow to help it stand out from the texture below. I skewed the halftone dots forward to add motion and energy to the design. 
I created a simpler repeating background about one third of which is shown here. The background pattern is 800 pixels
wide and 40 pixels tall and just adds a little bit of texture to the left margin of the page. Because the colors are solid, even though the image is quite large, the file size is tiny.  This design uses symbols for the buttons and Picture Rollover effects instead of auto-generated buttons. To make things less
static, the mouse over effect is an animation, so when the mouse passes over the button, the symbol animates rapidly though a succession of different colored and sized symbols.
For more information on creating Picture Rollover effects, including the use of animation, see my article
Mouse Over Magic. The final design will have a three column front page with titles for the three regular sections: Recent Articles, Hot
Topics, and Features. These title bars include the halftone dot patterns in different colors.
|
|
