BMNW+Refined+Prototype

toc =Refined Prototype= 3005w10 Design & System By: Brenda, Melanie, Nicolette, Wen

Issues
In this project, we only focused on the future students section. However, from our user testing, we realized that a lot of students tend to click on current students label despite being a future student. It would be a great benefit if we can also work on the current student section for a more in-depth analysis of the website. Some other areas we wanted to look at were to have a section for uploading video entries. Moreover, we were very interesting in working in the student handbook. However, because it lends more toward the current students, we didn’t have a chance to work on it. While most of the images that were taken are our own images, there were still some limitations. Having more access to the studios would have been beneficial. The website would also be able to emulate a more realistic experience if we had been allowed to take photos during class sections. Not only would it provide us with more pictures that people can relate to, we as designers would also gain a better understanding about being a visual arts student.

__Discussion 2 Notes:__ //(Some of our thoughts in our discussion 2 meeting)//

reposition into 960px get the page real menu CSS

all news and events at the bottom

gallery: different sizes

Materials for next week: Bring the big book of color. a bunch of background fonts

news and events in rectangle group up main nave and hotlines

color in YVA logo replacement of Yu and FA

search bar - (option1: stay; option2: left corner more colors - background fonts

960 width - absolute

firefox - grid plugin the news and events bar, keep the bottom consistency on gallery and facilities

inside pages: title enlarged on the picture on the right

more pictures about building

fix the panorama - menu CSS gallery is not random enough - do the grid and different sizes margins random shape on news and events - News & Events

Solutions
All of the changes we have made to the Visual Arts website have lead to a better information hierarchy. All information is categorized under sections and then further broken down with clear labels, headings and subheadings. The navigation system is simple to use as they are grouped together on the upper left side and repeated at the bottom of each page for convenience. The art gallery, being a page frequently visited, is in the hotlinks and can therefore be visited from any page. The old problem of going back and forth between Visual Arts and Fine Arts pages is no longer an issue. We also realized the importance of having the News & Events on the Home page, as this information is relevant to all of the users (Future Students, Current Students, Faculty, and Alumni). Finally, the added panorama effect in both the main and inner pages is an interesting interaction for users.

__**Home Page**__
As mentioned above, we were interested in adding a News and Events column on the Home page. The abstract shapes that lay underneath the links were inspired by the Subheading designs that are on the main content pages (Future Students, Current Students, Faculty, Alumni). Here is a snapshot of the Home page: The old Visual Arts website was nested within the Fine Arts website and lacked its own personality. In an attempt to better represent the Department that embodies creativity within the university, we have provided a solution that is both visually engaging while retaining a professional academic look.

With the use of contrast in directions and dynamic application of white space, the whole layout presents an encouraging, active, and dynamic atmosphere.

The bottom Navigation was also something that we added to each page to add functionality:

__**Panorama**__
Changes: - The focus has shifted to Visual Arts facility imagery in the panorama



__**Subheading Design to add Hierarchy:**__


__Experience__ We want our users to easily navigate their information. We did this by: • Using irregular shapes and bold text to draw the eye to the headers • Reorganizing and putting information into a clearer hierarchy • Keeping the navigation constant throughout the pages The experience of “moving through space” is shown in the panorama. As one shifts to different section of the main navigation, there is shift or change indicating the user is changing from one phase to another.

Here is a snapshot taken from our style guide to see the similarities between the graphical elements:

__Exploration:__ The use of a textured background on the left column - creates confusion

**__Revised Gallery Layout:__**
__Before:__

__Exploration: __ - Colour coding sections possibility

__ Final: __



__Changes:__ - Structured thumbnail viewing: This allows the user to view multiple pages of thumbnails by clicking the arrow - Gallery heading design - Layout change (thumbnails on left)

**__Revised Facilities Layout:__**
__Before:

Exploration: __

Final:

__Changes:__ - Clearly labelled facilities on the left hand side - Larger facilities images - Facilities Heading Design

Revised Contact Us Layout:


__Changes:__ - We realized the importance of a map locating the Visual Arts Department - Labelling of Studio Managers, Administration, etc. on the Contact us page - Paying close attention to new colour scheme

**__Branding__**
One of the things that we thought needed sprucing up, was our colour palate for our YVA logo design. Here are some of the variations: During the last two approaches, we wanted to include both of the blue and orange into the logo because the same colour was used in the main content. __Final Branding:__

**__Colour Scheme:__**
The colour scheme was something that we reviewed and explored. While working on the panorama, we noticed the beauty and harmonic colours of the Fine Arts building. Therefore, we wanted to implement those colours into our website. After all, since we are already drawing from the architecture patterns, why not the colours as well? The New Big Book of Color and The Web Designer’s Idea Book were also sources of inspiration when we were looking for colour schemes that were suitable to our approach. In the end, we modified the colours a little bit for legibility and merged the two architecture themes together to create an overall aesthetically pleasing contrast.

For further information about our designs, please view the style guide.

Group Reflections
__Brenda's Reflection__ Overall, I think this project is beneficial because we are working together as a team in a real life situation. We were able to work on our strength and weaknesses during the design stage. Some people might be better in design the overall visual design while others might be better in the interactive/ web based design. It was interesting to see how every member of the team has a different role. One might be the leader, while others like to be told what to do. Even though we are design an interactive piece, we also looked at corporate identity for rebranding the new logo and some photography skills. This project was very different from the previous projects I worked on, because most of the projects before are done individually. Time management was important in our progress. During phase 1 and phase 2, we were spending too much time figuring out how we were laying out the material. We also had too many rough ideas we really like in our group discussion. And as time was slipping away, we had to rush through the progress. This could relate to reality, where in a real life project, it can take you and the client a great amount of time developing an idea. However, when the project is coming to an end, everything must be rushed to be done. In conclusion, I was very pleased with the final website and had a great time redesign the website.

__Nicolette's Reflection__ Overall, I think that this was a good project as it provided me with experience regarding the process of building a website. Coming closer to the end I felt that Phase 3 and 4 were quite rushed. However, we were able to pull everything together in the end. I think we all learned about the difficulties with doing group work and timing conflicts, but we were able to work through those times. All in all, I enjoyed working with my group members and I'm happy with our final deliverables.

__Wen's Reflection__ This project allows me to rethink about website design and its functional side. Before this, I intended to use all kinds of interesting visual effect to achieve a sense of unique and original. However, the background and real functions of the website are the parts I missed. When I tried to do my own experiments, I messed up information and visual. The visual effects took too much spaces than it should be. Fortunately, my group members were kindly there to straight me out. We worked through the visual alignments and modified the visual effects into a smaller scale so that it doesn't affect legibility, and the same time, being interesting and attractive. I learnt a lot from this project. For being a great website, visual effects are important but not enough. Its real functions, usage and effectiveness are the more important things we need to focus on. It has been great to work with my group members and we all showed our strength in design. I learnt a lot from my teammates.

__Melanie's Reflection__ This project was the first time I got to work with actual 'clients' or as close to clients when it comes to a school project so it was a really good learning experience; from listening to the client's problems and requirements to analyzing their old website ourselves and doing user testing for our design for the first time. While at first a whole semester seems like ample time to get a website (with a specific scope we define ourselves no less) done, having to work with existing content and existing problems took much longer than I expected. Because this was a redesign, we had to worry about both improving their current content/design as well as any new problems that might arise from our original solutions. The user testing was particularly helpful in this. Critiques are generally given by profs and fellow designers so getting the time for a user testing phase gave us new insights into how others interact and browse through a website. The group aspect of the project was both extremely helpful (ex: in dividing up the workload and for brainstorming) and tedious at the same time. Time management was definitely an issue and we had to juggle each person's strengths as well as their own schedules. When it comes to coding, I'm really starting to appreciate comments that will give the next person to be working on the page a much easier time locating and changing the needed sections. I know that it is something I plan to do regularly from now on even if it's just for the sake of organizing my own work. On the whole, there were some ups and downs, slow and quickly progressing times but I am glad we managed to pull through in the end.

Presentation

 * One person will be the operator who goes through the website, the other three talk.**

Highlights: -Index Page: Rollover description and Spatial envision with panorama -Information Page: Mini interactivity, secondary navigation at the bottom -Gallery Page: Path and Dynamic shape instead of pure grid and catalog. User follow the path to browse thumbnails. Thumbnails are arranged in a linear way by academic year courses. -Facilities Page: Giving visual as the same importance as text information. They back up each other.
 * One person with the operator will explain the whole website and highlights:**

Concept: As being an academic website inside York University, we thought about all the possibilities that might cause confusion or inappropriateness. Therefore, in order to achieve more efficiency, we took out unnecessary interactions and decorations. Our website ends up with a clean, interactive and informative looking. By separating visual and information, content from both parts can be better absorbed.
 * One person will be explaining the concept:**

• For audiences: Most users come to website to search for useful information. Legibility and readability hold a more important part rather than visual itself. What we did: Take off background. However, in order to keep consistency, we still keep some interactions at the top of the page. Informative as well interesting. • For information: We are still applying a way finding system. The goal is try to reduce the impression of information overwhelming. What we did: Information is organized in linear structure. The user gets all the related information at one glance. • The visual: 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. • Animation: 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.
 * One person explain what we did and how we made our efforts:**

Final Prototype
Final Information Architecture:

Final Information Architecture: Final Style Guide: Final Visual Arts (YVA) Site: [|Link] Entire Process Documentation (Phase 1-4):