A Mouthwatering Makeover

by Gary W. Priester

• A lesson in life: We take a walk down memory lane and discover the origins of Figtree's Café located on the picturesque boardwalk in Venice Beach, California.
• Blending great food and local color: Figtree's current Web site is a collection of good ingredients in search of a new recipe.
• Assembling the ingredients: Creating the repeating background image for the site and finding the perfect font to reflect the colorful and eclectic style of Venice Beach cuisine.
• Preparing a fig entrée: Recycling is always desirable, and the fig and fig leaf line art from the current site gets its own makeover and has its colors done.
• From entrée to side dish: The overly colorful images from the current site get a makeover, too, in an effort to help them make the transition to the new site. Some new images that begin as raw scanned black and white line art receive a tasty dollop of color and pizazz.
• Moving between the courses: A piece of black and white clip art gets sliced and diced and cooked up and served as new navigation buttons.
• A bug in the soup? While creating a feedback form to enable patrons to provide praise or, heaven forbid, report a bug in the soup, we discover some bugs of our own and discover a way to get around them.
• Dinner is served: The finished design.

Had I been living in Los Angeles (my place of birth) instead of northern California, my home for the past 15 years, this might have been one of my tastier Web site makeover assignments. I could have insisted on personally tasting treats from this month's Web site makeover—Figtree's Café.

The café's specialties include oatmeal or cornmeal pancakes (with pure maple syrup), homemade chicken apple sausages, and the veggie Dagwood sandwich on rosemary foccacia bread. The Navajo corncakes with black beans sounded scrumptious, as did the turkey meatloaf with tomatoes and red wine, and the dozens of other tasty entrées and sinful sounding desserts that have become the hallmark of Figtree's Café. What a feast it could have been!

In my high school days, I spent a lot of time hanging around the beach and frequently drove down to Venice Beach and walked along the "boardwalk." Venice, home of Muscle Beach, known for its display of human muscles not mussels, has always been one of the more colorful places in Los Angeles—a place never lacking in local color. Perhaps no other area so epitomizes the Southern California look of sun and surf and everlasting youth.

Figtree's Café, opened in 1978 by former L.A. school system teachers Bill and Tami Feigenbaum (literally Figtree in German), is located just off the broad beach bordering the Pacific Ocean. Given the brief life expectancy for most restaurants, 23 years is pretty old for a restaurant and speaks to the quality of the food and the personalized service.

Blending great food
and local color

My first impression of Figtree's Café came when I arrived at its home page http://www.figtreescafe.com.

The painting on the home page has an intentionally ragged border, typical of all art on the site, and shows the location of the restaurant with its European café-like awning and outdoor dining. The copy under the painting informs me that this is "The place to eat on the Venice Boardwalk." It looks so inviting, I'm almost tempted to go to L.A. Well, almost.

The original Web site was divided into six sections. The page shown here has links for other Venice Beach-related Web sites and an essay describing a day at the beach capped off with a memorable meal at Figtree's. Embedded in the sea blue background is a repeating white line illustration of a fig and fig leaf.

The history page changes to aquamarine with the same repeating fig leaf background and another photo with a ragged, multicolored border. The photo treatment and background are typical of all pages on the site. The site uses six graphic elements for buttons that are placed along the top of the page.

Assembling the ingredients

I could see what Figtree's was doing with its site, blending the local color of Venice Beach with its creative, multi-ethnic menu. From my non-local point of view, however, the site seemed to cater more to the local color and less to the style and food of the restaurant.

The site also relied on frames, but it didn't need them. The frames didn't really add anything to the site. Yes, they stayed on the top of the page as you scrolled down, but they also took up a lot of space, so you had to scroll more to read. And, as frames always do, they make it much harder to bookmark and print pages. So I thought we'd go frameless (always a good way to go).

I was also bothered by the garish color backgrounds that changed from page to page. The colors did not seem appetizing. Looking at the cost of entrées on the menu revealed that this was a more upscale restaurant, and so I felt restraint was called for. I wanted to retain the line drawing of the fig, the feeling of the bright colors, and the ragged-edged illustrations and see if I could find a way to blend them into a new recipe for a tastier site.

I began by creating a background for the site, which unlike the current site, would remain the same on each page. I created a torn-paper edge to repeat the edges on the existing photos. I added a panel to the right with a rainbow blend of pinstriped lines.

The pale yellow portion takes up 650 pixels or most of the average browser's screen, with just a small amount of the pinstriped section appearing to the right. To keep the torn-paper portion from reappearing on browsers set to higher resolutions, I extended the pinstripes another 550 pixels. I exported the graphic as a .gif bitmap using the browser palette for cross-platform color compatibility. As large as it is, the tiling background image is only 4.5K in size.

My next item of business was to find an appropriate typeface to use for Figtree's Café. My short list of possible candidates included from top to bottom: Tempus Sans ITC, Pablo LET, Harlow Solid Italic, Ex Pronto, Bradley Hand ITC, and, Papyrus. These were all good possibilities but I wanted something more lively and arrived at a font called Curlz MT (the MT stands for Monotype, the foundry that makes the font).

Curlz MT is whimsical and informal, just like the beach. I used Tempus Sans ITC for the rest of the text.

Preparing a fig entrée

I looked though my various clip-art sources and found a wonderful book in the Dover clip-art series: Food and Drink Spot Illustrations, designed and illustrated by Susan Garber. Dover's "copyright-free" books are found in most art stores and many bookstores as well.

What makes Dover's clip-art books special is that all of the illustrations are copyright-free, which means you can use them any way you'd like. The books are almost always under $10—this one even includes a CD with all of the images so there's no scanning needed. You can bring them right into a paint program, and then have your way with them.

Missing from all of the wonderful black and white stippled images, however, was a fig and fig leaf. I decided to recycle Figtree's current graphic and downloaded one of the background images from the site. I opened the image in my paint program and changed it to black and white.

I opened the image in CorelXara, my vector drawing application of choice, and created some colorful shapes over the black and white fig art.

I added the same pale yellow background that was used for the torn-paper background image. The elements were converted into a 24-bit bitmap image in Xara and then several Photoshop plug-in filters applied to create a pastel chalk drawing appearance.

I changed the line color of the bitmap in Xara by applying an outline color to the bitmap. As far as I know, Xara is the only vector drawing application that can do this to both black and white bitmaps and full color bitmaps. The line-art bitmap was placed over the filtered colored bitmap, and Stained Glass Transparency (Xara's name for Subtractive transparency) was applied retaining the line drawing but dropping out the white background.

The image was exported to .gif using the browser palette, 4-bit color depth and no dithering.

From entrée to side dish and back

I liked the chalk art and line art look and decided to use it to create more images for the site. Shown here are three of the illustrations, half in line art and the other half with the color applied. These new images, featuring fresh ingredients and prepared foods, will be sprinkled liberally throughout the site to add a dash of color wherever appropriate. This is a pretty simple technique and worked very well with line-art images that I scanned from the copyright-free Dover book.

The current images on the site had too much importance and I felt they needed to blend more subtly into the main course. I downloaded the photographic images from the site and opened them in Photoshop where I removed the outlines, replaced the colored backgrounds with yellow backgrounds, and added soft drop shadows under the images.

Moving between the courses

In keeping with my more refined beach-elegant motif, I decided to forgo NetObjects' ability to create rollover buttons in lieu of a simpler lighter approach. I liked the current site buttons and toyed with the idea of using them, but in the end decided they really did not mix well with the new ingredients.

I scanned an image from the Food and Drink Spot Illustration book, this time a border of fresh green vegetables. The image was resized to 640 pixels in width, slightly smaller than the torn-paper background image, and sliced and diced it into six equal sections. The text for each section was added in Tempus Sans ITC and a duplicate set of images and text were created.

One set of buttons will have pale yellow backgrounds with pale olive green lines and the other set will have pale olive green backgrounds with pale yellow lines. The olive green buttons will be used to highlight the selected page while the yellow buttons will be used for the nonselected pages.

I also toyed with the idea of making each button a rollover with a down, over, and out button state but decided against this, opting for faster loading times.

Once the first button bar was assembled and links added for each page, I copied and pasted the buttons to the other pages. Double clicking on one of the buttons in NOF opens the Picture File Open dialog from which the highlighted version of the button could be selected. The link remains with the image.

A bug in the soup?

The current site has a questionnaire on the last page. To me, the form was asking too much from the visitor because there was a comments box for each question. I deleted all but one comment box at the end of the form. The visitor could add as much or as little clarification to the questions as needed in one box and I saw no need for more.

This is a restaurant, and responses are voluntary. A less demanding form is less intimidating, takes less time, and will get better participation. As most of the questions used radio buttons for the response and most of these questions had the same options—Excellent through Unsatisfactory—I created one unit and then copied and pasted it to create subsequent questions. This way I only had to change the Group Name on the Forms Radio Buttons Properties palette.

NOTE: When creating a form using radio buttons (the little white circles), only one of the options can be selected at one time. Be sure the Group Name for each set of buttons is the same. For example, the first question asks you to rate your server. All Group Names for this question say Server. The text on the Value Sent changes with each answer. So, if I select Excellent, the value sent text should read Excellent. If you want the reader to be able to select more than one option, use check boxes.

One tip on creating forms in NetObjects Fusion: Sometimes the length of a field looks shorter in NetObjects Fusion than in the browser. I generally keep visible field lengths to around 30, then set the total field length to much longer, say 90. That way fields don't get too wide in the browser. This prevents your page layout from getting askew.

I created a variation of the asparagus illustration (one of the spot illustrations created for the site), placed the text Return on it, and made it into a single linked button at the top of the page. It worked fine as you can see in the screen shown here.

Dinner is served!

Click Here to see the site makeover.

Be sure to go to the menu page and view the lunch and dinner menus. Mmm, mmm, good! I'm very pleased with the results and hope this makeover gets Bill and Tami cooking on their site makeover. All I ask in return is they send me their recipe for Navajo corncakes with black beans. I don't think that's asking too much, do you?

About the author

Gary Priester is a partner in The Black Point Group, a Northern California graphic design company. He is the author of Looking Good in Color, Ventana Press and CorelDRAW Studio Techniques, Osborne/Corel Press. E-mail Priester or visit his web site. 

© 1999 Gary W. Priester