B.M.N.W+Prototype

toc =Phase 2: Prototype= By: Brenda, Melanie, Nicolette and Wen

[|Link ->] Final Prototype
 * Note: Please use Firefox or Safari to browse the site.**

= Step 1: Concept & Preparation =

Critique:** Our original concept is to make the website interactive, easy to interpret and subject. However, through critiques and discussions, we found it somehow distracting. Things take out: 1. The background image takes away all the attention from information. 2. The hands are unnecessary visual elements. 3. The half transparent panel conflict with dark color background. 4. Since the panorama moves towards left, we decide to move the logo on the left side of webpage. Things to keep: 1. Panorama movements 2. Navigation interactions.
 * Preparation:

= Step 2: Further Developments and Catalog =

We had a difficult time to define a fixed layout that works in terms of user experience. We want the users to get their information as fast as possible, also engage them to develop our website for more interesting things they might interest in. We found that interactions intend to keep users on the web page longer, however, we do not want to overwhelming the information either. After two weeks discussion and static illustrations building, we decided to apply animation only for main page and page transitions. Most of the wireframes below are functional till now.

**Draft Frameworks**
Information Page: Gallery Drafts: ==
 * ===First Draft:===

Information Page: Gallery Page: Information Page with rollover: Information Page without rollover:
 * ===Second Draft:===
 * ===Third Draft:===
 * ===Finalized Draft:===

 = Step 3: Code Building = The code building process goes along with redefining the fame work. Our team members came up with several links each for inspirations. Wen's JQuery Reference site: [|here] Melanie's sidebar and navigation collection: Nicolette's coding collection: here
 * Collections:**

1. Moving Panorama:** The panorama is a revised coding by using he image strip. [|link] Gallery is an update of the existing galleriffic library. Several things have been modified and customized for our purpose. [|link]
 * Coding Source:
 * 2. Gallery:**



= Step 4: Finalized Framework =

Surprisingly, after we think about all the possibilities that might cause confusion or inappropriateness of being an academic website inside York University, we took out a lot of unnecessary interactions and decorations. Our website ends up with a clean, interactive and informative looking.
 * Concept:**

Most users come to website to search for useful information. Legibility and readability hold a more important part rather than visual itself. __Changed:__ Take off background. However, in order to keep consistency, we still keep some interactions at the top of the page. We are still applying a way finding system. The goal is try to reduce the impression of information overwhelming. __Changed:__ Information is organized in linear structure. The user gets all the relates information at one glance. Through the process of finalizing framework, we found that information and visual always conflicting and distracting each other. Although visual makes the site look better, it might not works for the informative website. __Changed:__ Totally divide information and visual part. Visual page has nice transitions and effects. Information page stays the browsing process people are most used to. Since half of the website structure is based on modified javascript animation, we are very aware that the fancy animation will take attention away from the information. Instead of being attractive, the animated effects become a distraction. While we are testing among group members, we found people start to play with the animation instead of looking for the real website information. __Changed:__ The website is still an academic site. We took out unnecessary animation effects so that the user can focus more on the content instead of animations.
 * **For audiences:**
 * **For information:**
 * **The visual:**
 * **Animation:**

Re-designed Department of Visual Arts Postcard



Index Page:
Information Page

Gallery Page:
= Step Final: Prototype =

Final Prototype Link:
[|Link ->]