Functional Specification
From Meda360 Spec
Contents |
Content Overview
Navigation and UI Design
Purpose:<p> Instead of running with a stereotypical vertical website full of hierarchical menus in a three column format, the new media department website will use a unique, artistic style that all potential media arts students will appreciate. Its unique experience will engage viewers to stay on the site to see what Pacific has to offer through its Media Arts Department.<p>
Art style:<p>
The background:
Although the entire background will be white, it will give the look and feel of a large piece of canvas paper. To give it this property there will be crinkles throughout the background, to help give the paper a recognizable texture, as well as smudge marks, and slight shadows to enhance the lighting of the paper.<p>
The main interface:
Since this takes place on a virtual piece of canvas paper, every element of the interface will look as if it is "hand-drawn." This includes every part of the interface: windows, scroll bars, buttons, toggles, arrows, tabs, etc. These are to have the look and texture of black felt pen markings that have been drawn by hand.<p>
The use of color
The only use of color is the four main colors used to associate with the four media majors: yellow, orange, green, and pink. Since these four colors are to be applied to the paper as though they were physically created, they are to take the look of being made from a highlighter marker. These four colors were chosen as the four highlighters most used. So these four are to be very brightly neon colored that are transparent over the text which it overlaps. <p>
The middle ground
The area which exists on top of the paper but behind the felt pen may include some random sketches of images. In this case, light pencil style markings will be used. The simple grey won't be distracting, and will instead give the feeling that there was some general sketching of ideas before the project was inked over.<p>
Key Functions
Layout
This Flash website begins like a typical website with a loading page and a page to direct you where you would like to go within the site. However, there is one large difference for the Media Arts website. All the pages of this site are actually on one large page, making the site very unique. The large page is to make the user feel like they are in the middle of a large sketchpad. Each line is made to feel like the site was actually hand drawn.
Transitions
On a typical website the transitions from one page to the other simply means that another page appears once you click on the link for that specific page. For the Media Arts website, each page is actually on one large page making the transitions very unique. These transitions mean that you actually fly around the site to get from one page to the other. For example, if you are at the Alumni page and you would actually like to go to the Program Overview page. The user would then click on the appropriate link, which will take the user through the entire page to get there. On the way there, the user will see numerous other sketches and drawings to continue giving the user the feel that they are on a sketchpad.
Zoom
Since the Media Arts website is on one large page, a key element is the zoom feature. This allows the user to zoom out of the site and be able to see the entire site on one screen. This allows the user to pick and choose which page that they would like to go to by seeing all of them. Once the user decides on which page that they would like to go to, then all that they have to do is to click on the page and the site will zoom back in for the user. By being able to zoom out, the user is actually able to see the sketches and hidden drawings in between the web pages.
Navigational Structure
The Media Arts website for Pacific University will have navigation that will be unique, just like the rest of the site. The navigation will simply have the name of the other pages and arrows to direct them which way they will fly next. If the user would like to have a navigation box that will stay consistent throughout the site then the user has that option by going to the Linear Navigation link located at the bottom of the screen.
Main Navigation
- Program Overview
- Faculty
- Student Gallery
- Alumni
Major, Classes, Descriptions, Media Content
Faculty Members, Bios
Major, Media Content
Alum, Bios
Utility Navigation
- Help
- Linear Navigation
- Copyright
- Zoom
Description on how to get around the site
Program Overview, Faculty, Student Gallery, Alumni
Three levels of zoom, zoom in, zoom out
The utility navigation is global but the main navigation will change from page to page depending on where the user is at on the site.
