Garden Site
“Emerald Hill Gardens” is a website mock-up I created as a mini-project in the late '00s for an an educational website design class. The goal was to demonstrate educational design, web coding and web design skills. (All graphics and photography used in it were done by me as well.) I used some PHP in coding it, although to a lesser extent than I used to create the page you're currently reading (and the rest of this website).
Click here to view the "EHG" site. Below are two example screenshots:
The further information below is an excerpt from the design document that originally accompanied the project:
Overview
Emerald Hill Gardens is a fictional botanical park of medium size that needs a website through which it can give both introductory information regarding the park and keep people already familiar with the park apprised of ongoing developments.
Learner Characteristics
The main target audience at this point would consist of adults interested in finding out information about the park either for the purpose of planning a specific trip or keeping abreast of general developments at the park. As the fictional park is located in New York City, and is concieved as being a medium-sized park (not quite as large as the Bronx or Brooklyn Botanic Gardens) it would likely be appropriate for the website to offfer translations in several of the more commonly-spoken languages (such as Spanish, Chinese, Korean, and Russian), but implementing that feature is beyond the scope of this simulation. The target audience is expected to be at least somewhat faimiliar with common web page features like a navigational sidebar, but is not assumed to be composed entirely of thoroughly-experienced computer users.
Goal
The main goal of the site it to inform users of the facilities and activities available to the public.
Objectives
- To provided newly-interested people with a basic idea of the park's purpose.
- To allow people who wish to stay current with park matters an efficient means of doing so.
- To provide people with an easy way to contact EHG.
Interaction Design
The layout has been kept relatively simple in an effort to make it accessible to a broad range of users. The site is divided into ten main catagories. Each of these is immediate accesssible through the sidebar, which is unifromly desplayed throughout the site's pages, with the exception that in areas in which there are subpages, the sidebar will expand to show those pages as well — for example, in the gift shop category, options representing categories of gifts available will be inserted into the sidebar, expanded from the giftshop category. The font sizes used should be acceptibly readable on all current displays (i.e. 800x600 to 2048x1536) and when stripped of their normal css (as might be the case for someone viewing the page either using a custom stylesheet accessibility setting in their browser or using a screen reader), the pages are still organized in a logical order (i.e. the menu options are listed before the page content, for convenient access).