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

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 SUB MENU TEMPLATE STORYBOARD

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.

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

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

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. 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

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

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:

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

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

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

Storyboard File: food.doc

Frame # 3

Template: Sub-Menu template

Frame Description: The map for the main page will be displayed prominently, and specific content relevant to food establishments will be displayed in the body. A list of dining locations with information will be provided, with external links to these venues if available. Also there will be a brightly lit Food Establishments title built into the map image for the current page, and the link for the current page on the menu bar will glow red. Menu bar is displayed which links to the main page and four sub-pages: food, computer labs, classrooms, and student services. Around Auraria logo is displayed in the menu bar. Also links to a contact page for the webmaster. Audio

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, foodb.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 such as Starbucks with selections of coffees available and daily roasts. File: N/A Off Screen Description: File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg 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

Storyboard File: student.doc

Frame # 4

Template: Sub-Menu Template

Frame Description: The map for the main page will be displayed prominently, and specific content relevant to student services will be displayed in the body. Information regarding important dates, fees, and departments will be provided, as well as where they are located. Also there will be a brightly lit Student Services title built into the map image for the current page, and the link for the current page on the menu bar will glow red. Menu bar is displayed which links to the main page and four sub-pages: food, computer labs, classrooms, and student services. Around Auraria logo is displayed in the menu bar. Also links to a contact page for the webmaster.

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, studentservicesb.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 student services. It will provide information regarding important dates, fees, and different departments, with corresponding external links. File: N/A Off Screen Description: File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg Animation

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

Submit your work to the ASSIGNMENT LINK for a grade. Post it to your wiki page so your classmates can review your progress

5. Learning 5 Reflection – (1-3 paragraphs)

This assignment was revisionist history for me. I learned, importantly, why to make a storyboard. Storyboards are the legacy materials which correspond with a project. Last week I could not digest the usefulness of this, and was essentially reverse engineering a design in order to fill in the blanks. However, after further contemplation, the usefulness of providing empirical data on design elements of a website has become clear to me. In order to build off of established content it is important to have a clear list of font sizes and types, button names, file names- basically all of the details that will be extrapolated into a functional page.

The importance of a template as a cookie cutter has been clear to me, but I still had a hard time determining the value of having each storyboard clearly map content. To give an analogy, when a storyboard writer for a film comes up with intricate descriptions of each scene, the director usually gets pissed, throws them out, and fires the storyboard writer. Essentially these intricate storyboards in film detract from the creative purpose of the director. Similarly, by writing out each piece of each storyboard, it seems to streamline the later design of the website; being too invasive early on could cause flatness and limitations in design further on.

This week I became clearer on the differences between path animations and produced animations, however as far as I can tell my splash concept incorporates both into a flash. Can produced animations contain path animations, or is that an improper use of these terms? Finally, I failed to see the point in differentiating largely between the sub-menus and main menus in a simple website design. The framework remains the same, and it would defile the concept of simplicity to create a separate sub-menu where there is not meant to be one. This goes along with the analogy of ‘not reinventing the wheel all the time’. Assignment 5– Storyboard Rubric

Criteria Unsatisfactory Satisfactory Meets Exceptional Total Points Expectations

Template Applied Missing The storyboard The storyboard The storyboard does not use the uses the template uses the template template design design but is design and adds and is missing missing content content related to content related to related to the the screen. the screen. screen. The storyboard The storyboard documents all the The storyboard documents most design and does not have enough design of the design and content details and content content details needed to details to produce needed to produce the the screen. produce the screen. screen. Possible Points 0 1 2 3 /3 Storyboard Missing The screen The screen Frame Number number does not number correspond with corresponds with the frame number the frame number on the flowchart. on the flowchart. Possible Points 0 1 2 / 2 Storyboard Missing Few storyboards Most storyboards All storyboards Details document the document the document the design and design and design and content details content details content details needed to needed to needed to produce the produce the produce the screen. screen. screen. Possible Points 0 1 2 3 / 3 Storyboard Missing The thumbnail The thumbnail The thumbnail Thumbnails image does not image indicates image indicates indicate the some of the the navigation, navigation, navigation, content, and content, and content, and other functional other functional other functional areas of the areas of the areas of the screen. screen. screen.

Possible Points 0 0 1 2 /2 / 10 Assignment 5– Treatment Rubric

Criteria Unsatisfactory Satisfactory Meets Exceptional Total Points Expectations Description of Missing The content The content The content how the content section is not section is section is fully will be treated in adequately somewhat described. The an interactive described. The described. The content section environment. content section is not noted. content section being described being described is noted. may or may not be noted. Possible Points 0 1 2 3 /3 Description of the Missing The visual, aural, The visual, aural, The visual, aural, visual, aural, and and media and media and media media events on elements are not elements are elements are fully the screen. adequately somewhat described. described. described. Possible Points 0 0 1 2 / 2 Description of the Missing The functionality The functionality The functionality functionality and and interactivity and interactivity and interactivity interactivity. elements are not elements are elements are fully adequately somewhat described. described. described. Possible Points 0 1 2 3 / 3 Mechanics Many grammar, Few grammar, No grammar, spelling, or spelling, or spelling, or punctuation punctuation punctuation errors. errors. errors. 0 0 1 2 / 2 / 10 Grading Scale 20 = 100% 19 = 95% 18 = 90% 17 = 855

16 = 80% 15 = 75% 14 = 70% 13 = 65% 12 = 60%