Assignment 5 Storyboards - Individual Assignment

Assignment 5 – Storyboards - Individual Assignment

First, start by doing a “save as” of this document as A5yourname_fall09

1. Template Revisions

Revised thumbnail sketch and template for main menu and sub menu screens.

MAIN MENU TEMPLATE STORYBOARD

Project Title: Around Auraria

Storyboard File: Home Page

Frame # 2

Template: Main Page

Frame Description: The purpose of the main page is to provide a brief description of the functionality of the site, news, and the interactive map, which links to the other sub-pages. In addition, a separate frame

Audio

Narration
Description:N/A
File: N/A
Script: N/A
Sound Effects
Description: N/A
File: N/A
Music
Description: N/A
File: N/A

Programming

Programming
The website will be designed using Adobe Dreamweaver.
Cascading Style Sheets, table design, rollover buttons embedded into interactive map.
Branching
Description:
Home page branches out to the four category pages, highlighting different buildings on the map. Clicking on a non-highlighted space returns the user to the home page. Contact link takes user to a separate information screen to contact the webmaster. Food, Computer Labs, Classrooms, Student Services, Home, Contact

Graphics

Buttons
Description: five buttons are imbedded links built into the map. They are highlighted areas based on different colors using coordinates built into the map image. As the mouse rolls over these areas the Food areas glow green, Computer Labs glow purple, Classrooms glow red, Student Services glow blue. By clicking outside of a highlighted area the user will return to the Home page. In addition the buttons for the side menu bar exist as separate images
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg, home.jpg, food.jpg, computerlabs.jpg, classrooms.jpg, studentservices.jpg, contact.jpg
Backgrounds
Description: bgcolor=black
File: N/A
Icons/Screen Elements
Description: Around Auraria logo
File: aa.jpg
Images
Description: Auraria Interactive map, with rollover variations
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg

Text

On Screen
Description: Font used is 12 point Myriad Pro for body text. Descriptive body text explaining general purpose of the site, news and information.
File: N/A
Off Screen
Description: N/A
File: N/A

Animation

Path
Description: rollover on the map for specified coordinates will highlight target areas with different colors
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg
Produced
Description: N/A
File: N/A

Interface Elements

Fonts
Description: Myriad Pro 12 pt. yellow, heading 36 pt drop shadow, outer glow, buttons 36 pt. Myriad Pro drop shadow outer glow.
File: N/A
Menu/Cursor
Description: N/A
File: N/A
User Input
Description: N/A
File: N/A

mainmenu

SUB MENU TEMPLATE STORYBOARD

Project Title: Around Auraria

Storyboard File: Submenu Page

Frame # 3

Template: This is the outline for the four pages which link from the Home page, each provides the interactive map at the top, followed by information about specific content for the category, in body text below the map.

Frame Description: The map for the main page will be displayed prominently, and specific content relevant to the four topics will fill in the body. Also there will be a brightly lit title built into the map image for the current page. E.g. Food Establishments, or Student Services.

Audio

Narration
Description: N/A
File: N/A
Script: N/A
Sound Effects
Description: N/A
File: N/A
Music
Description: N/A
File: N/A

Programming

Graphics

Buttons
Description: five buttons are imbedded links built into the map. They are highlighted areas based on different colors using coordinates built into the map image. As the mouse rolls over these areas the Food areas glow green, Computer Labs glow purple, Classrooms glow red, Student Services glow blue. By clicking outside of a highlighted area the user will return to the Home page. In addition the buttons for the side menu bar exist as separate images
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg, home.jpg, food.jpg, computerlabs.jpg, classrooms.jpg, studentservices.jpg, contact.jpg
Backgrounds
Description: bgcolor=black
File: N/A
Icons/Screen Elements
Description: Around Auraria logo
File: aa.jpg
Images
Description: : Auraria Interactive map, with rollover variations.
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg

Text

On Screen
Description: Body text will define and identify places relevant to the current page, e.g. food venues and their names, locations, menus and prices, with appropriate links off site.
File: N/A
Off Screen
Description:
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg

Animation

Interface Elements

submenu

2. Flowchart and Storyboards

Paste the image of your flowchart and indicate which screens on the flowchart have storyboards. Create a storyboard for the four screens indicated on your flowchart. Make sure that the frame number on your flowchart corresponds with the frame number on the storyboard.

flowchart

3. Treatment and Content Outline

Paste your content outline. Write a treatment for 3 of the content areas in your content outline. Indicate which content sections have a treatment.

1. Opening Screen (Homepage/Introduction) [treatment 1]

2. Auraria Interactive Map (Map Menu Links) [treatment 2]

2.1. Food

2.2. Computer Labs

2.3. Classrooms

2.4. Student Services

3. Auraria Interactive Map (Sub Menu List)

3.1. Food (Aqua) [treatment 3]

3.1.1 Arts Building

3.1.2 South Classroom

3.1.3 North Classroom

3.1.4 Administration Building

3.1.5 Ninth Street Historic District

3.1.6 Einstein’s

3.1.7 Tivoli

3.2. Computer Labs (Purple)

3.2.1 Arts Building

3.2.2 South Classroom

3.2.3 North Classroom

3.2.4 Plaza

3.2.5 Seventh Street

3.2.6 Science

3.2.7 (KC) – King Center

3.2.8 (WC) – West Classroom Building

3.2.9 Tivoli

3.3. Classrooms (Pink)

3.3.1 Arts Building

3.3.2 South Classroom

3.3.3 North Classroom

3.3.4 Plaza

3.3.5 Seventh Street

3.3.6 Science

3.3.7 (KC) – King Center

3.3.8 (WC) – West Classroom Building

3.3.9 Modules

3.3.10 Children College

3.3.11 (TE) – Technology Building

3.3.12 (CN) – Central Classroom Building

3.3.13 Auraria Early Learning Center

3.3.14 Lawrence Court

3.4. Student Services (Blue)

3.4.1 (FA) – Facilities Annex

3.4.2 (AD) – Administration Building

3.4.3 (PD) – Printing and Design Center

3.4.4 (FM) – Facilities Management

3.4.5 (PE) – Events Center/PE

3.4.6 (LSC) – Lawrence Street Center

3.4.7 Library

3.4.8 Tivoli

3.4.9 Modules

Splash Screen Treatment

Frame 1

The splash plage will consist of a flash animation centered on the page designed to highlight some of the exciting and enjoyable featured activities and places available on the Auraria campus. It will begin loading with a large counter in the center of the screen counting down rapidly from 5280 to 0. There will be quick visual synopsis of the site, with images of food venues, student services, and classrooms panning quickly across the page. This will fade into the image of a map of the Auraria Campus in the center of the animation, approximately 50% of the size of the flash image. The website title, “Around Auraria” will appear at the top in black Myriad Pro font. A one-line description of the site, “An Informational Map of Auraria Campus” will appear at the bottom in the same font. A small green oval will grow from nothing to an approximate size of 200x150 with ENTER spelled in grey in the center of the oval. This oval will be in the bottom right-hand corner of the flash animation.

A flash animation will be centered on the page, providing user with a Denver and Auraria specific welcoming feeling, and a quick synopsis of the content of the site, delivered through visual imagery and music rather than written explanation.

Main Menu Treatment

Frame 2

The main page will consist of an interactive map in the top left cell of a large table, which links to the four sub-pages: food, computer labs, classrooms, and student services, as well as back to the main page. This interactive map will highlight these four general areas with different colors using coordinates built into the map image. As the mouse rolls over each area the Food areas glow green, Computer Labs glow purple, Classrooms glow red, and Student Services glow blue. By clicking outside of a highlighted area the user will return to the Home page. Each highlighted area from the roll-over effect will link to its correlating sub-menu page. There will be a side bar in the right cell of the table, consisting of links to the home page and all four sub-menu pages, the Around Auraria icon, and a link to the contact page for the webmaster. In the bottom left cell of the table, body text will display a brief description about the functionality and purpose of the site. This text will be in Myriad Pro 12 pt font. It will describe the site’s history, effectiveness, and display any news including updates about specific content, as well as list updates made to the site.

Food Sub-Menu Treatment

Frame 3

The Food sub-menu page will consist of an interactive map in the top left cell of a large table, which links to the four sub-pages: food, computer labs, classrooms, and student services, as well as back to the main page. This interactive map will highlight these four general areas with different colors using coordinates built into the map image. There will be a brightly lit Food Establishments header built into the map. As the mouse rolls over each area the Food areas glow green, Computer Labs glow purple, Classrooms glow red, and Student Services glow blue. By clicking outside of a highlighted area the user will return to the Home page. Each highlighted area from the roll-over effect will link to its correlating sub-menu page. There will be a side bar in the right cell of the table, consisting of links to the home page and all four sub-menu pages, with the food link colored red. The Around Auraria icon, and a link to the contact page for the webmaster will also be displayed in this side bar. In the bottom left cell of the table, body text will provide a list of dining locations with information about each. Menus, hours of operation, locations, and external links to these venues will be listed if available. This text will be in Myriad Pro 12 pt font.

4. Content Storyboard 1-4

CONTENT STORYBOARD 1

Project Title: Around Auraria

Storyboard File: splash.doc

Frame # 1

Template: splash screen template

Frame Description: A flash animation will be centered on the page, providing user with a Denver and Auraria specific welcoming feeling, and a quick synopsis of the content of the site, delivered through visual imagery and music rather than written explanation.

Audio

Narration
Description: N/A
File: N/A
Script: N/A
Sound Effects
Description: click sound on enter button
File: click_splash.m4a
Music
Description: techno music from local artist pretty lights
File: pretty_lights_splash.m4a

Programming

Programming
Description: Simple flash animation, will start with a counter from 5280 rapidly descending to 0, then several images of activities and places around Auraria campus will fade across the screen and as they fade out a map of the campus fades into the foreground, with an enter button.
Branching
Description: enter button will link to the main page

Graphics

Buttons
Description: Enter Button, links to the main page
File: enter_Splash.jpg
Backgrounds
Description: N/A
File: N/A
Icons/Screen Elements
Description: Flash Animation - Small Map, Title, Description
File: splash.swf
Images
Description: photos of auraria used in flash
File: auraria1.jpg,auraria2.jpg,auraria3.jpg,auraria4.jpg,map.jpg

Text

On Screen
Description:
File:
Off Screen
Description:
File:

Animation

Path
Description: flash animation
File: splash.swf
Produced
Description: flash animation
File: splash.swf

Interface Elements

Fonts
Description: within the embedded flash Myriad Pro 36 pt is used, 72 pt for the enter button.
File: N/A
Menu/Cursor
Description: N/A
File: N/A
User Input
Description: N/A
File: N/A

Thumbnail Sketch:

template1

CONTENT STORYBOARD 2

Project Title: Around Auraria

Storyboard File: home.doc

Frame # 2

Template: Main Page template

Frame Description: The purpose of the main page is to provide a brief description of the functionality of the site, news, and the interactive map, which links to the four sub-pages: food, computer labs, classrooms, and student services. The Around Auraria icon will be displayed in the side bar, along with links to all sub-pages. Also links to a contact page for the webmaster.

Audio

Narration
Description:N/A
File: N/A
Script: N/A
Sound Effects
Description: N/A
File: N/A
Music
Description: N/A
File: N/A

Programming

Programming
The website will be designed using Adobe Dreamweaver.
Cascading Style Sheets, table design, rollover buttons embedded into interactive map.
Branching
Description:
Home page branches out to the four category pages, highlighting different buildings on the map. Clicking on a non-highlighted space returns the user to the home page. Contact link takes user to a separate information screen to contact the webmaster. Food, Computer Labs, Classrooms, Student Services, Home, Contact

Graphics

Buttons
Description: five buttons are imbedded links built into the map. They are highlighted areas based on different colors using coordinates built into the map image. As the mouse rolls over these areas the Food areas glow green, Computer Labs glow purple, Classrooms glow red, Student Services glow blue. By clicking outside of a highlighted area the user will return to the Home page. In addition the buttons for the side menu bar exist as separate images
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg, home.jpg, food.jpg, computerlabs.jpg, classrooms.jpg, studentservices.jpg, contact.jpg
Backgrounds
Description: bgcolor=black
File: N/A
Icons/Screen Elements
Description: Around Auraria logo
File: aa.jpg
Images
Description: Auraria Interactive map, with rollover variations
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg

Text