Design Document

Our initial ideas for this site involved doing some cultural exploration, and evolved into a culinary theme. Since our individual experiences in Bulgaria and Spain initiated this thought process, we chose to create a site that encompassed four regions of southern Europe, therefore grouping the two locations within a regional context and creating some variation in our content. Our goals consisted of making the page attractive, informative, user-friendly and, most importantly, making the recipes appetizing. We then considered formatting and decided that a dynamic navigation map depicting the region and showcasing the four countries would be an effective element to have throughout the site, making navigation simple and visual. We agreed on a map that could be easily traced and edited, and Evgenia drastically redesigned it in Photoshop, using a similar image with the countries replaced by food visuals as a separate map to create the rollover effect. We then collected images of plates appropriate to each country from the internet and our own pictures, resized them and applied a fade effect in Photoshop so they would seem to blend into the background. We selected soft, unobtrusive colors to give the page a warmer feel and appeal, without overpowering the content.

The last element we dealt with was the text content. We decided to include two recipes for each country, as well as an introductory/informative country page that would link to the recipes. We divided up this section, each of us covering two countries, and then co-edited all of the text for inclusion on the site. It seemed logical to link the recipe pages from the corresponding country pages, as well as link between the recipes so that the user would not have to go back every time, toggling between the country page and each recipe page. These links are fairly subtle, but interactive on rollover so that they are easily identifiable. We included a "home" link and unit conversions page on the primary navigation bar, as the user should be able to access those pages at any time. Unit conversions can also be accessed via the "Ingredients" headings on the recipe pages, for added convenience and user friendliness!

Required elements:

Style Sheets - Our CSS contains rules for the basic layout of our pages. Seeing as we had a lot of variable content, they had to be applicable to all our pages, and at the same time be specific enough to address our specific content issues. They include standard rules such as font size, color and style, dynamic link style and background and text color. We also used class rules to set up our tables, table elements, scrolling and non-scrolling divs that control the navigation bar/map and our image and text content. In addition, we used a non-W3C-standard opacity change class rule on the hover state of food image links (instead of swapping images through JavaScript), and it seems to be performing well in both Firefox and IE. For our id rule, we transformed the single occurrence of our page title (on the Home page) to uppercase.

Navigation aids - The primary navigation aid throughout our site is the map at the top. It is attractive as well as functional, and interactive with the user. The links are rollover images of a signature dish from each country, as well as simpler links for the more pragmatic home and conversions pages. The map serves to provide a visual of the geographical region that is covered in the page, and indicate the culinary theme by overlaying images of food within the map. Individual pages also utilize appropriate corollary links at the bottom right to establish a connection between related pages, such as between the recipe pages of each country.

Formatting elements - Our overall page design is governed by hidden tables, in which the navigation images and divs are positioned. We used same-height divs for the shorter left-side image area and the longer right-side text area (which overflows), thus achieving the scrolling that was suggested to us during our site presentations.

Javascript - Javascript is used throughout our site, for rollover links by swapping single images (in the case of Spain, Italy, and Bulgaria on the navigation map) or multiple images (as is the case with Greece). There is also a link at the bottom of each page that functions as a random recipe selector, opening a randomly chosen recipe in the same window. This was done using the switch construct.

Images - Images are an important element of our site, since its focus is cuisine and we want to create appeal for the recipes that are included. Since our design medium does not allow us to invoke the senses of touch and smell, which are of paramount importance to the perception of food, we decided to compensate through the use of imagery. We therefore chose to create a vertical image bar on the left, which is a strong structural component of the page layout, and a specific image link for each recipe. The navigation bar, of course, is another important visual that contributes to the accessibility of the site.

Links - We have rollover links in the navigation bar and introductory pages as well as text links between related recipes, and between the recipes and our measurement unit conversion reference page. The links change on rollover and activation so that they are not too obvious and distracting, but rather subtly interactive.