writingforinteractivemedia.pbworks.com€¦ · Web viewIf you find a classmate that you would...

Writing for Interactive Media

COM 3470

Production Notebook

Prepared for:

Professor Peggy O’Neill-Jones

Prepared by:

Kris LaGraff

Date: 02/28/10

ContentsAssignment 2...............................................................................................................................................3

1. Message Design...............................................................................................................................4

2. Assignment 2 Summary (1-3 paragraphs).......................................................................................4

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

Assignment 3...............................................................................................................................................6

1. Revisions to Assignment 2...............................................................................................................6

2. Flowchart.........................................................................................................................................6

3. Assignment 3 Summary (1-3 paragraphs).......................................................................................6

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

Assignment 4...............................................................................................................................................8

1. Splash Screen Template Storyboard................................................................................................8

2. Assignment 4 Summary (1-3 paragraphs).....................................................................................14

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

Assignment 5.............................................................................................................................................17

1. Template Revisions........................................................................................................................17

2. Flowchart and Storyboards............................................................................................................17

3. Treatment and Content Outline....................................................................................................17

4. Content Storyboard 1-4.................................................................................................................17

5. Assignment 5 Summary (1-3 paragraphs)......................................................................................25

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

Assignments 2-5 – Project Notebook

COM 3470 Writing for Interactive Media

Submitted to: Professor Peggy O’Neill-Jones

Name: Kris LaGraff

Date: 02/28/10

Contact Information: [email protected]

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

Use this template for assignments 2-5. This will become a cumulative record of your previous and current work. I will review your work and fill in the evaluation form at the end of each assignment. For the next assignment, do a save as and rename the file. This will leave your previous work and my evaluation in place. By the end of the semester this document will show your cumulative work, revisions, and reflections on the changes you made and why you made them. Showing your previous and current work is a requirement of the course.

Group versus Individual AssignmentsAssignments 2 and 3 are group projects. Assignments 4 and 5 are individual assignments. If you want to continue to work in a group for assignments 4 and 5 you must earn the privilege by communicating early in the week, fully participating in the assignment, and accepting responsibility for the role you play on the team. 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 an option.

Assignment 2 – Message Design – Group AssignmentYour final project will be the pre-production documentation needed to develop an information or education website.

As a group, choose a simple and familiar topic. Do not use an existing website, even if you made it. This project requires new thinking, not a revision of old thinking. You will develop the different pre-production elements throughout the course.

I am not kidding about a simple topic. Developing a website is a multifaceted process with many iterative steps. Make your topic simple so you can see the complexity. Run topic ideas past me if you are not sure.

1. Message Design

Project

Title :

www.changeatire.com

Goal: This website is to inform the public on how to change a tire on an

automobile.

Objectives: Know how to select the proper tire for their car.

~ Get instruction on how to use a number of hand jacks.

~ Learn how to change a tire on their particular vehicle.

Audience

Analysis

Users of this website will be persons 16 and older of who can operate a

vehicle. They will have knowledge of vehicle operation, and be internet

savvy. They will vary widely in education level and be interested in "Do it

Yourself Projects."

Content

Outline

1. Introduction

a. What is changing a tire?

b. When is it needed?

2. Supplies needed for changing a tire.

a. The rim of the tire.

b. The new tire.

c. How to choose the right car jack for your car.

d. What is a "donut?"

3. Safety precautions.

a. Proper jack placement.

b. Side of the road tire changing procedures.

http://www.changeatire.com/

4. Step-by-step instruction.

a. Understanding your tools.

b. Jacking up the car.

c. Unmounting the tire.

d. Checking the new tire for setup.

c. Mounting the new tire.

d. Releasing and removing the jack.

5. Extra tips for a simple tire change and the various amount of tires I can

buy.

User Profile Audience Analysis

General Description

Name: David WoodsSex: Maleage: 36Location: DenverEducation Marketing Degree, CU DenverFamily: Married, one childOccupation: Marketing research analystIncome: 90,000 yearlyDisabilities: Glasses Computer: MACTechnical Skills: Adobe Photoshop, Adobe Illustrator, Microsoft OfficeFavorite Movie: Boiler RoomWeekend: Spends time with family, Cycling, Running

Typical Schedule

6:00 Wake up, breakfast, go for run7:30 Shower, get dressed,8:30 Arrives at work 6:00pm arrives home, eats dinner, spends time with family11:30 Goes to sleep

Audience

Analysis

Example: http://clem.mscd.edu/~oneilljp/com3470/templates

Discussions

Topic: User Persona

I built a user persona to put up on the wiki. Make any changes you see necessary.

Topic:

I think we're on the right track, the simpler the better. I like the idea of coming up with an instructional site, think "how to". How to change flat tire, how to tie your shoes, how to make ice cubes. JK, just trying to brainstorm.

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

2. Assignment 2 Summary (1-3 paragraphs)As an individual, summarize the assignment and your contribution to your group. This assignment included creating a simple educational or instructional website. After some brainstorming our group decided on using the topic of changing a flat tire. This will be an instructional site that provides step by step instructions about changing a flat tire on an automobile.

For this project I helped the group brainstorm to come up with some ideas. I also built the user persona that is located on the assignment link on the wiki.

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

What did you learn and how did you learn it? What do you need to know more about?

I learned about message design and how to properly construct an outline to get a new project organized. Using the proper pre-production design steps is essential for successfully starting and completing a new project.

http://clem.mscd.edu/~oneilljp/com3470/templates

Assignment 2 – Rubric

Criteria Unsatisfactory Satisfactory Meets Expectations

Exceptional Total Points

Goal Statement Missing The project goal is described in vague, general terms.

The goal statement identifies some but not all of the key elements.

The goal statement addresses the identified needs or problems and represents what the writer wants the project to accomplish.

Possible Points 0 1 3 4 /4Objectives Missing Many of the

objectives are written with vague, immeasurable verbs. Many of the objectives do not support the goal statement.

Some of the objectives are written with vague, immeasurable verbs. Some of the objectives do not support the goal statement.

The objectives are written in precise, measurable statements that describe the behavior the audience must exhibited in order to achieve the goal.

Possible Points 0 1 2 3 / 3Audience Analysis

Missing The audience is described in vague, general terms.

The audience analysis describes some but not all of the key elements.

The audience analysis has demographic information and describes audience gender, age, income, education, work experience, and life experience.

Possible Points 0 1 2 3 / 3Content Outline Missing Much of the

content is not related to an objective statement.

Some of the content is not related to an objective statement.

The content relates to and supports the objective statements.

Possible Points 0 1 2 4 / 4Mechanics Many grammar,

spelling, or punctuation errors.

Few grammar, spelling, or punctuation errors.

No grammar, spelling, or punctuation errors.

0 1 2 3 / 3Learning Reflection

Missing The learning is vaguely

Somewhat describes the

Describes the learning and

described. learning and lessons to take forward.

lessons to take forward in detail.

Possible Points 0 1 2 3 /3TOTAL /20

Grading Scale20 = 100%19 = 95%18 = 90%17 = 855

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

Assignment 3 – Flowchart – Group AssignmentFirst, start by doing a “save as” of this document as A3yourname_fall09

1. Revisions to Assignment 2

REVISION DATE

Project Title : Add title here

Goal: Add project goal here.

Objectives: Add objectives here.

Audience Analysis Add audience description here.

Content Outline Add content outline using content outline format

User Profile Add the user profile using the persona format from the text.

Audience Analysis Add audience analysis here.

2. Flowchart

Create a flowchart in Bubbl. http://bubbl.us/

Export the flowchart as an image.


http://bubbl.us/

3. Assignment 3 Summary (1-3 paragraphs)As an individual, summarize the assignment and your contribution to your group.

Learning 3 Reflection – (1-3 paragraphs)


Assignment 3 – Rubric



The flowchart reflects the content outline

Missing The flowchart and content outline have little relationship.

The flowchart reflects the content outline in places. The content section that is being communicated is not indicated on each screen.

The flowchart mirrors the content outline. The content section that is being communicated is indicated on each screen.

Possible Points 0 1 3 5 /5The flowchart reflects different screen types

Missing The flowchart does not distinguish the splash, main menu, sub menu, and information screens by either color or shape. A legend or key that indicates the screen’s purpose is missing.

The flowchart distinguishes some splash, main menu, sub menu, and information screens by either color or shape. A legend or key is possibly provided to indicate the screen’s purpose.

The flowchart distinguishes all splash, main menu, sub menu, and information screens by either color or shape. A legend or key is provided to indicate the screen’s purpose.

Possible Points 0 1 2 3 / 3The flowchart indicates user's path through content

Missing The flowchart does not indicate user navigation choices and screen branching.

The flowchart indicates some user navigation choices and screen branching.

The flowchart indicates all user navigation choices and screen branching.

Possible Points 0 1 2 3 / 3Revised goal, objectives, audience analysis and content outline

Missing Goal, objectives, and content outline have not been revised.

Goal, objectives, and content outline need additional revision.

Goal, objectives, and content outline have been revised and the reflection added





Possible Points 0 1 2 3 / 3

Learning Reflection

Missing The learning is vaguely described.

Somewhat describes the learning and lessons to take forward.

Describes the learning and lessons to take forward in detail.

Possible Points 0 1 2 3 / 3TOTAL /20

Grading Scale20 = 100%19 = 95%18 = 90%17 = 855

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

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 AssignmentsIf 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: www.changeatire.com

Storyboard File: Splash Screen

Frame # 1

Template:

Frame Description: (Overall description of the visual, aural, and interactive elements that occur in the frame)

In this frame there will be a white background with an animation of a black flat tire that is being inflated by a hand pump in the center of the stage. The tire will grow with each pump motion and represent the loading of the site. Once the site has loaded the pump will push once more and the tire will explode and each bit of tire will morph into a part of the homepage, such as buttons, title, etc. There will be natural sounds of a car followed by the sound of a pump inflating the tire. The splash screen will help visually inform the user that this is an informational site about automobile tires. The inflating tire will be an obvious car tire.

Audio

NarrationDescription: N/AFile:Script:Sound EffectsDescription: Natural sounds of traffic – to help inform that the purpose of the website is for automobile tires. The sound of an air pump when the tire is inflating, followed by a pop when the tire explodes. File:MusicDescription: N/AFile:

Programming

ProgrammingDescription: All programming will be done in Flash CS4

BranchingDescription:

Graphics

ButtonsDescription: There will not be any buttons provided on the splash page.File:BackgroundsDescription: Background will be white to stay with the site theme of gray, red, and black.File:Icons/Screen ElementsDescription: Screen elements will consist of two images – tire and pump, and the text “How to Change a Tire.File:ImagesDescription: A tire that starts flat and inflates as the page loads. Pump that moves up and down to inflate the tire.File:

Text

On ScreenDescription: The text will read, How to Change a Tire. There will be the word loading within the image of the tire followed by the numerical percentage.File:Off ScreenDescription: N/AFile:

Animation

PathDescription: File:ProducedDescription: A tire and pump drawn in illustrator CS4 then transferred over to Flash. The tire being inflated and finally exploding will be tweened and action scripted within Flash CS4.File:

Interface Elements

FontsDescription: All fonts will be Myriad Pro.File:Menu/CursorDescription: No menu, standard cursor.File:User InputDescription: No physical user input will be required on this page.File:Thumbnail Sketch

Paste or draw a wireframe of the screen layout.

MAIN MENU TEMPLATE STORYBOARD


Storyboard File: Main menu/Homepage

Frame # 2

Template:


This frame will appear after the splash page loads. This will be the main menu page the user is automatically directed to. In the upper left it will contain the phrase “How to Change a Tire”. This page will introduce the user to the button links provided for the site. Each button will link the user to the appropriate content. The left side off the page from top to bottom will have the buttons Tire changing, Links, About, Contact. The center of the page will contain the same automobile image from the splash page minus the tire pump. The background will be white with the buttons in red and the text in the button in black. The tire image will be black and white. Since this is an educational site I will keep the graphical interface simple to reinforce the importance of the informational content.

Audio This screen will contain No audio.

NarrationDescription:File:Script:Sound EffectsDescription:File:MusicDescription:File:

Programming

ProgrammingDescription: Programming will be done in Illustrator CS4 and Dreamweaver CS4 using HTML and CSS.


Graphics

ButtonsDescription: The four buttons will be listed down the left side of the page and will be simple ovals containing the text that pertains to the button.File:BackgroundsDescription: Background will be white to reinforce that the content is the most important aspect of the page.File:Icons/Screen ElementsDescription: The screen elements will be the buttons and image of the automobile tire.File:ImagesDescription: The only image on the page will be the automobile tire.File:

Text

On ScreenDescription: The onscreen text will be How to Change a Tire across top and the text within the buttons.

File:Off ScreenDescription: N/AFile:

Animation

PathDescription:File:ProducedDescription: The buttons may be animated and scripted within Flash CS4File:

Interface Elements

FontsDescription: Myriad ProFile:Menu/CursorDescription: Standard cursor.File:User InputDescription: The user will be able to select one of the four buttons. File:Thumbnail Sketch


SUB MENU TEMPLATE STORYBOARD


Storyboard File: Submenu page

Frame # 3

Template:


The submenu screen will contain brief written content about changing an automobile tire and why this site is helpful to a user looking for this information. The template of the screen will stay consistent to the layout of the Main menu minus the tire image. Instead of containing an image of the tire it will contain written content. The four buttons will remain in the same place, listed down the left side of the screen. How to Change a Tire will remain across the top of the screen. All colors and fonts will stay consistent to the original template. This screen will explain the purpose of the site so that visitors will be able to determine whether this is the appropriate information they are looking for.

Audio No audio will be present on this screen.


Programming

ProgrammingDescription: : Programming will be done in Illustrator CS4 and Dreamweaver CS4 using HTML and CSS.


Graphics

ButtonsDescription: Buttons will stay consistent to the Main menu page.File:BackgroundsDescription: Background will remain white to add consistency.File:Icons/Screen ElementsDescription: Screen elements will be the buttons and a text box providing a brief description.File:ImagesDescription: No images will be displayed on the Sub menu.File:

Text

On ScreenDescription: The onscreen text will consist of a description of the main object of the site to inform users what the object of the site is. How to Change a Tire will remain across the top of the page.


Animation

PathDescription: There will be no animation on this page except for the interactive buttons that will remain on each page of the siteFile:ProducedDescription: Possibly produced in Flash CS4.File:

Interface Elements

FontsDescription: Myriad ProFile:Menu/CursorDescription: StandardFile:User InputDescription: Users will be able to select a button to be redirected to the appropriate information.File:Thumbnail Sketch


INFORMATION SCREEN TEMPLATE STORYBOARD


Storyboard File: Information Screen

Frame # 4

Template:


The information screen will use the same template that has been carried throughout the whole site. This screen will provide the user with the content that the site was built for – How to Change a Tire. This screen will list step by step how to change a tire, containing thumbnail images for each step to visually aid the user. The screen interface will remain the same with the title across the top and the buttons listed down the left side. The exceptions will be the tire image and the button Changing a Tire, this button will not be available since the user is on this screen. Colors and font will be consistent to the template.

Audio No audio will be present on this screen


Programming

ProgrammingDescription: Programming will be done in Illustrator CS4 and Dreamweaver CS4 using HTML and CSS.


Graphics

ButtonsDescription: Buttons will stay consistent to the Main menu page.File:BackgroundsDescription: Background will remain white to add consistency.File:Icons/Screen ElementsDescription: Screen elements will be the same as the submenu screen.File:ImagesDescription: Each step listed within the content will contain a small image to help visually aid the user through the step by step explanation. Jack positioning, lug nut loosening, tire removing, tire replacing, jack lowering. File:

Text

On ScreenDescription: On screen text will consist of the title across the top and the step by step info listed throughout the center of the page.


Animation

PathDescription: There will be no animation on this page except for the interactive buttons that will remain on each page of the siteFile:ProducedDescription: Possibly produced in Flash CS4.File:

Interface Elements

FontsDescription: Myriad Pro File:Menu/CursorDescription: Standard cursorFile:User InputDescription: Buttons that remain on left side of the screen.File:Thumbnail Sketch





I learned how to storyboard and template a site. I learned the importance of consistency and not over complicating a project. By using templates and covering each detail of the site I was able to solve any issues or problems that may arise. Wire framing was a new concept to me before this module and I’m still working using them to the full potential. Overall I feel this module contained a lot of valuable content related to the steps of designing a project. I feel I was lacking in some of the terminology contained within the A4 section of the preproduction notebook. I studied the module lecture notes and the treatment examples which were very helpful but I could still learn more about some of the specific terms and what they entail. Specifically the “File:” category I left these blank throughout the assignment because I didn’t understand what it was asking. I feel confident in flowcharting and storyboarding a project but I know I need more understanding in some of the specific details of each category.

Assignment 4– Rubric



Splash Screen Template

Missing The screen may function to set the tone or mood of the site

The storyboard does not have enough design and content details to produce the screen.

The screen functions to set the tone or mood of the site

The storyboard documents most of the design and content details needed to produce the screen.

The screen functions to set the tone or mood of the site

The storyboard documents all the design and content details needed to produce the screen.

Possible Points 0 1 2 3 /3Main Menu Template

Missing The screen may not function as a place to find major topics and link to the supporting information.


The screen functions as a place to find major topics and link to the supporting information.


The screen functions as a place to find major topics and link to the supporting information.


Possible Points 0 1 2 4 / 4Sub Menu Template

Missing The screen may not function as a place to learn more about a major topic.


The screen functions as a place to learn more about a major topic.

The storyboard documents most of the design and content details needed to produce the

The screen functions as a place to learn more about a major topic.

The storyboard documents all the design and content details needed to produce the

screen. screen. Possible Points 0 1 2 4 / 4Information Screen Template

Missing The screen may not function as a place to get detailed information about a major topic.


The screen functions as a place to get detailed information about a major topic.


The screen functions as a place to get detailed information about a major topic.






0 1 2 3 / 3Learning Reflection

Missing The learning is vaguely described.

Somewhat describes the learning and lessons to take forward.

Describes the learning and lessons to take forward in detail.

Possible Points 0 1 2 3 /3TOTAL /20

Grading Scale20 = 100%19 = 95%18 = 90%17 = 855

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

Assignment 5 – Storyboards - Individual AssignmentFirst, start by doing a “save as” of this document as A5yourname_fall09

1. Template Revisions

Make any revisions to Assignment 4 and note them.

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.

4. Content Storyboard 1-4

CONTENT STORYBOARD 1

Project Title:

Storyboard File:

Frame #

Template:


Audio

NarrationDescription:File:Script:Sound EffectsDescription:File:MusicDescription:File:Programming

ProgrammingDescription:


Graphics

ButtonsDescription:File:BackgroundsDescription:File:Icons/Screen ElementsDescription:File:ImagesDescription:File:Text

On ScreenDescription:File:Off ScreenDescription:File:

Animation

PathDescription:File:ProducedDescription:File:Interface Elements

FontsDescription:File:Menu/CursorDescription:File:User InputDescription:File:Thumbnail Sketch



Project Title:

Storyboard File:

Frame #

Template:


Audio




Graphics


On ScreenDescription:File:Off ScreenDescription:File:Animation

PathDescription:File:ProducedDescription:File:

Interface Elements




Project Title:

Storyboard File:

Frame #

Template:


Audio




Graphics



PathDescription:File:ProducedDescription:File:

Interface Elements




Project Title:

Storyboard File:

Frame #

Template:


Audio


Programming



Graphics



PathDescription:File:ProducedDescription:File:Interface Elements

FontsDescription:File:Menu/CursorDescription:File:User InputDescription:File:

Thumbnail Sketch





Assignment 5– Storyboard Rubric



Template Applied Missing The storyboard does not use the template design and is missing content related to the screen.


The storyboard uses the template design but is missing content related to the screen.


The storyboard uses the template design and adds content related to the screen.


Possible Points 0 1 2 3 /3Storyboard Frame Number

Missing The screen number does not correspond with the frame number on the flowchart.

The screen number corresponds with the frame number on the flowchart.

Possible Points 0 1 2 / 2Storyboard Details

Missing Few storyboards document the design and content details needed to produce the screen.

Most storyboards document the design and content details needed to produce the screen.

All storyboards document the design and content details needed to produce the screen.

Possible Points 0 1 2 3 / 3Storyboard Thumbnails

Missing The thumbnail image does not indicate the navigation, content, and other functional areas of the screen.

The thumbnail image indicates some of the navigation, content, and other functional areas of the screen.

The thumbnail image indicates the navigation, content, and other functional areas of the screen.

Possible Points 0 0 1 2 /2

/ 10

Assignment 5– Treatment Rubric



Description of how the content will be treated in an interactive environment.

Missing The content section is not adequately described. The content section is not noted.

The content section is somewhat described. The content section being described may or may not be noted.

The content section is fully described. The content section being described is noted.

Possible Points 0 1 2 3 /3Description of the visual, aural, and media events on the screen.

Missing The visual, aural, and media elements are not adequately described.

The visual, aural, and media elements are somewhat described.

The visual, aural, and media elements are fully described.

Possible Points 0 0 1 2 / 2Description of the functionality and interactivity.

Missing The functionality and interactivity elements are not adequately described.

The functionality and interactivity elements are somewhat described.

The functionality and interactivity elements are fully described.





0 0 1 2 / 2/ 10

Grading Scale20 = 100%19 = 95%18 = 90%17 = 855

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

writingforinteractivemedia.pbworks.com€¦ · Web viewIf you find a classmate that you would...

Documents

Transcript of writingforinteractivemedia.pbworks.com€¦ · Web viewIf you find a classmate that you would...