Assignment 4 Templates Individual Assignment

Assignment 4 – Templates – Individual Assignment

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

This is no longer a group assignment; it is an individual assignment. Create a splash screen, main menu, sub menu, and information screen template for your project.

Group versus Individual Assignments

If you find a classmate that you would like to collaborate with on assignments 4 and 5, both of you need to send an email to me indicating that you understand and accept the responsibility of team collaboration and are willing to work together. Do not team up with someone who does not carry their load; working alone on the final assignments is completely acceptable.

1.Splash Screen Template Storyboard

SPLASH SCREEN TEMPLATE STORYBOARD

Project Title: Around Auraria

Storyboard File: N/A

Frame # 1

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:
File:

Interface Elements

Fonts
Description: within the embedded flash Myriad Pro is used
File: N/A
Menu/Cursor
Description: N/A
File: N/A
User Input
Description: N/A
File: N/A

Thumbnail Sketch

Paste or draw a wireframe of the screen layout.

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, and the interactive map, which links to the other sub-pages

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, 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. Food, Computer Labs, Classrooms, Student Services, Home

Graphics

Buttons
Description: the 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.
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg
Backgrounds
Description:N/A
File:N/A
Icons/Screen Elements
Description:N/A
File:N/A
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 Georgy for body text. descriptive body text explaining general purpose of the site, news and information, also providing contact information for the webmaster.
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
File:N/A
Menu/Cursor
Description:N/A
File:N/A
User Input
Description:N/A
File:N/A

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

Programming
Description: Cascading Style Sheets, rollover buttons embedded into interactive map.
Branching
Description: each sub-menu 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. Food, Computer Labs, Classrooms, Student Services, Home

Graphics

Buttons
Description: the 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.
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg
Backgrounds
Description:N/A
File:N/A
Icons/Screen Elements
Description:N/A
File:N/A
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., heading 36 pt.
File:N/A
Menu/Cursor
Description:N/A
File:N/A
User Input
Description:N/A
File:N/A

INFORMATION SCREEN TEMPLATE STORYBOARD

Project Title: Around Auraria

Storyboard File: Information Screen Template

Frame #4

Template: Sub-Menu Screen Template. All of the information screens will recycle the sub-menu template.

Frame Description: (Overall description of the visual, aural, and interactive elements that occur in the 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
Description:
Description: Cascading Style Sheets, rollover buttons embedded into interactive map.
Branching
Description:
Description: each sub-menu 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. Food, Computer Labs, Classrooms, Student Services, Home

Graphics

Buttons
Description: the 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.
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg
Backgrounds
Description:N/A
File:N/A
Icons/Screen Elements
Description:N/A
File:N/A
Images
Description:: Auraria Interactive map, with rollover variations
File: map, mapgreen.jpg, mappurple.jpg, mapred.jpg, mapblue.jpg

Text

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: N/A
File:N/A

Animation

Interface Elements

Fonts
Description: Myriad Pro 12 pt., heading 36 pt.
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

2.Learning 4 Reflection – (1-3 paragraphs)

This assignment has aggressively colored substance and style into the website. I’m not sure how the other students would actually design their site, however, since I am not competent or confident writing in html, I would design mine using Dreamweaver. This assignment has inspired me to focus on and learn some of the techniques available in Dreamweaver, taking ideas and seeds I have watered from other websites, and growing them into concrete skills. More importantly, this assignment has reinforced how essential navigation and links are to a functional site. Although an information page seems inherent in every website, I feel that this template was essentially a rehash of the sub-menu template, as the information including contact information is all listed within the body text of my five total pages. In retrospect I wonder whether this makes the page too simple to be functional, or simply emphasizes my intended content. I have also become clear on the advantages of clear communication and teamwork in design. There is not necessarily a heavier workload as an individual, but there is less reassurance that the chosen path is the correct path.