tra_p4

P1 Envision | P2 Prototype | P3 User Test | P4 Refined Prototype
Phase Four: Refined Prototype Rob Wootten Thushjanthan Sivagurunathan //(TJ)// Amy Lin
 * Design & Systems | York University Visual Arts Project

Final Prototype **

STYLE GUIDE

[|Guide_2.pdf]

**TO DO LIST**
 * The Content frames of Current Students Index, Prospective Students Index, Faculty Index, Academics Index, Resources Index, and Events Index must function
 * Gallery J-Query should be working and functional for all streams
 * Have a back button from the Course Gallery to the Gallery Index
 * Include sub menus in the Gallery Index
 * Include breadcrumb in the Course Gallery
 * Sizing of the students work in the Course Gallery should fill the screen
 * Include who the instructor will be teaching the course in the course descriptions of the Course Gallery
 * Menu bars should always in position, so users don't have to scale window size
 * The logo should have more importance (larger) than the subheadings
 * Have a "Home" page
 * Try to figure out how to display the background
 * Events Montage **typography** must be similar to VA logo. It must be in a **continuous loop.**
 * A slight suggestion of **York University's** visual brand

**STYLE GUIDE REPORT** The Visual Arts department of York University wants a new revamp of their website to have a website unique and relevant to the arts culture.
 * Introduction

The project for this term will focus on designing the user experience for the Department of [|Visual Arts], York University. Under the Faculty of Fine Arts, the Visual Arts Department is looking to establish a web presence to encompass the values and beliefs of its program. With input from Visual Arts faculty and the course director, students will design, implement and test new designs with the intention of full implementation.

This project will begin with an investigation into how and why people are accessing the current Visual Arts site, in order to gain a deeper understanding of how and why it is used. In doings so, students will be looking for opportunities to enhance the Visual Art's online appeal, both visually and functionally. These solutions will include designing new visuals and interface dynamics to improve the overall user experience.

****Style Guide Report Objectives**
 * Establish an **outline to maintain** a compelling interface design
 * Create a brand identity that will effectively communicate to the target audience
 * Provide facilitators of the Visual Arts Department with **accurate direction** to maintain a convincing brand
 * **To continuously reveal a visual culture with meaningful communication**

//Identity, experience, intentions• What do you want to find out and why it is important?// Overall the visual branding identity should not interfere with the content of the website. Visual Arts Department branding must;
 * Branding**
 * Allow the student work to **surface**
 * Encompass a **distinct** and **flexible** visual identity
 * **Flexibility**: The Visual Arts Department will be constantly updated. New student work will be continuously produced, therefore the branding must have the ability to **adapt** to any visuals it may encounter.
 * Maintain the values and beliefs of the Visual Arts Department
 * Must provide a clear suggestion of **York University's branding.**
 * Constantly preserve a connection to the **target audience.**

The York Visual Arts Department logo should always be in full view, with no bleed. The logo or the background should be white, and the secondary colour should be selected from the standard branding colour palette. The font used in the logo should be Hiragino Maru Gothic Pro.

//Typefaces, sizes, styles, etc. and application// The York Visual Arts Department website uses Hiragino Maru Gothic Pro for content, and Synchro LET for the menu buttons.As a common practice in design, the larger the font, the higher the importance of the information it is set for.
 * Typography**

// **Colour Scheme** Palette, mood // The colours used in the design have both aesthetic value, and functional value, serving as an indicator of which section the highlighted piece of information is related to. Moreover the choice of a strong bold colour palette was influenced by the mood and aura of the Visual Arts Department,

// Screen design, grid, navigation // This Visual Arts website design is heavy in terms of graphics and visuals. This is a result of our decision to showcase students’ works of all levels and all areas within the department, as well as show our facilities and the teaching staff/students using those facilities. Moreover it was implemented to breach the present Visual Arts website’s inability to give a true sense of the creativity found in the Visual Arts department.
 * Layout**

The student gallery was designed to mimic physical art galleries, with the work being placed front center with primary importance, while the background information (author, course, intent) are placed in secondary importance. Moreover the artwork was organized to maximize the size of the selected work, while integrating thumbnails to promote exploration. **
 * Student Gallery

The navigation bar provides access to all information in the website and is the primary method of accessing information for the Visual Arts Department. Different colours were introduced to separate each section. It should also be noted that these colours are chameleonic, in the sense that they are relative to the information they represent, as displayed in the events flash montage (guest speaker headlines in purple, the assigned colour for events).
 * Navigation Bar**

One of the most significant features in our design is the events montage. Screen real estate is incredibly precious when handling large quantities of information. In order to create a successful design the interface implemented a shuffle feature. As the event photos change, the user is exposed to a range of information at one time. Moreover, as the user hovers over each photograph, a blurb is displayed, along with a link to the complete article.
 * Events Montage**

==== The current design has only focused on rebuilding parts of the York Visual Arts Department website. We expect the website to grow and accomodate all the forms of information which are required by an education institution’s website. ==== 
 * Conclusions**

**REFERENCES [|Behance Network: MoMA Redesign Concept] A MUST SEE: Great example of how to handle large amounts of information

media type="custom" key="5638439" **