[Home][Schedule][Assignments][Resources] [Classmates]

Interactive Storytelling GDD 250 - Schedule

This schedule is web-based and is subject to constant change. Regular small assignments may be added to this schedule by the instructor. These changes will always be announced in class before the assignments are due. However, students are responsible for checking this web page for information about assignments. All webbed assignments are due by 6pm Sunday night. Late assignments will not be accepted for credit. in the case of an emergency, arrangements must be made with the instructor and paper documentation must be provided.

Jump to week
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16
Reading: CDSG, Chapters 3 and 4 - Notebook prompt: Pick one of your favorite characters is a game and use Sheldon's analysis to think about how the writers made that character matter to you. Which techniques did they use? How can you come up with characters for your assignments in this class that are not stereotypes?

Introduction to the class

What kinds of stories are you interested in building? There are many kinds of stories available to us at the moment. Today we will determine individual student competence in HTML, work on your author page (due on Sunday) and discuss how to make good storyboards.
also: links and lists:
targeting links: using the <a> tag
the difference between a relative path and a full path
and how to validate your code.

By the end of class, you should have a 250 subdirectory in your www directory. you should have a page in the 250 folder entitled index.html which has your id on it. This page is where you will put links to all of the assignments that you turn in for the class. (Sample page code)

Due by 6pm Sunday: (WA1) Create a page that tells readers about you as an author Example. This should be posted to your 250 folder and linked to the index.html page. Check that the link works! The CSS styling should support your content. Assignment should include:
  • at least one background image
  • in-page images
  • borders
  • background colors
  • several fonts
  • internal and external links
week 2
2/2 and 2/4

Read: CDSG, Chapter 5 and this blog post.Notebook prompt: Do you agree with Sheldon's point about representations of sex in games? Describe how you use emotions for the characters you are developing. What emotions interest you in games? How best can writers create those experiences for players?

The first page of your design notebook should have the following text : "I have read the syllabus for Interactive Storytelling, and I understand Prof. Bertozzi's expectations for the course." followed by your signature. The notebook should be a tabbed three ring binder with sections for: weekly reading responses, storyboards and paper prototypes for all assignments, critiques of other student work, and usability tests.

Story Construction: How will you create a story structure with a series of decision points yet retain the arc of the story? Work on creating moving images to develop the story.


Nice resource to help you decide on site color scheme.
optimization examples gif and jpg
simple use of animated gifs for storytelling.

Simple animations are best made using small gif images. This week's assignment is an animated gif if you will be working on the web or spritesheets if you are working with another platform. Here are two examples done by former students:
homepage animation by benjamin childers
pac-man's realization by cortney williams

Presentation:
Due by 6pm Sunday: (WA2) Come up with a character or characters that will form the basis of your midterm story. Think about the premise that an interactive story allows the player to be introduced to a character and then see who that character will become -- and in the process learn something about themselves. Use either an animated gif or an image map to tell us something about your character/s.
week 3
2/9 and 2/11

top


Read: CDSG, Chapter 7 - Notebook prompt: How can you use Sheldon's experience and examples to come up with your own stories? Which of his techniques seems the most useful to you? Are you more interested in linear or non-linear story development? Why?

Think about the role of images in storytelling. How does it change our ability to imagine the characters and the world if we are provided with images? Begin more complex stylesheet formatting: div and span tags.

photoshop and imagemaps:

Take a look at Shelley Jackson's body. how can we use image maps as interesting forms of interactive navigation?

Discuss differences between image maps and image slicing.
how does the text itself affect the story?:
Typetester site use this to compare/contrast text styles
Thinking with Type by Ellen Lupton
Here is a very simple image map. This one is a more complicated image map. And here is one that uses javascript.
Presentation:
(WA3). Create a webpage (or several) that begin your story. Introduce us to your characters and the basic plot of the story. Why do the characters need the player? How will the player's interactions change the progression of the story? What are the character's challenges? Why should we care about them?
week 4
2/16 and 2/18
Read: CDSG, Chapter 8 up to 196 - Notebook prompt: What does breaking the fourth wall do to the player's experience of a separate world? When does it destroy the suspension of disbelief. What are some examples from games you have played?
Storyboarding is an extremely important part of interactive media design. The process allows you to clarify your own ideas, demonstrate concepts to your client and other members of the design team, and document the process. Here are the storyboards for this site.

You know that your storyboards are complete if you could hand them to another designer and that person could create the piece exactly the way you envision it.

Soon we'll be adding audio if you haven't already. Use some of these!

More complex CSS example. Here is an example with an external stylesheet. Start playing with Javascript- prompts and madlibs. For an example of creative use of tables and graphic storytelling, see what scott mccloud has done with online comics.

Discuss midterms and what is expected. You should be working on your storyboards which are due week 6.

You should download Twine and start playing with it. If appropriate, you can start building your midterm using this platform.
Presentation: Jasmine
Due Sunday: (WA4) The beginnings of your midterm narrative project. This should include the environment, characters and some idea of what will happen to them. You should have at least 5 different clickable steps that introduce us to your narrative.
week 5
2/23 and 2/25
CDSG, Chapter 8 up to end - Notebook prompt: What does Sheldon mean when he says that you shouldn't make players discover the story. Why is it the designers' obligation to provide this experience for the players? How can you use all the other elements he describes in this chapter to make the story meaningful?

First in-class usability test today (you will need this to help you). Here are some sample general questions. Here is an example of a usability test with very specific questions. You should use something like this to test your sites.

Here is a way to use a timer to control when things happen.

Here is a demo of how you can use an imagemap and javascript to make an interactive storyboard for your team project.

midterm proposal with storyboards:due next week
must include all of the following elements:
--one paragraph summary of the story, client and audience
--your plan: how will you communicate the story? How will interactivity support the narrative? What is the mechanic?
--information architecture: how will the piece be structured? one page of your storyboards should be a map of the whole site.
--storyboards: each page sketched out on paper to show layout, design and mode of interaction. All code should be printed out and included in final storyboard
--usability study- how will you test the effectiveness of your work?


z-index example and another example.
Audio in the page example.
Presentation: (T) Mike - The Stanley Parable, (Th) Max IB
Due by Sunday 6pm: storyboards as described above. These can be digital as well as in your design notebook.
week 6
3/1 and 3/3

top

CDSG, Chapter 9 - Notebook prompt: Analyze a game that you have played using Sheldon's drama staircase. It is easy to see how this structure is used constantly in traditional media like books and films. How does it work in interactive media?

Telling stories. How can audio be integrated effectively into interactive storytelling? Come to class with examples of excellent audio design in games you have played.


Here are two timers. One redirects to other pages. The other starts and stops an animated gif.

Story

Presentation: Joe - Firewatch
(WA5) create a midterm folder that links to your class index page. Inside the folder you should have an index file for your midterm, an external css file and several pages that demonstrate progress on your story development. Here is an example that uses an external javascript file as well. Here is a diagram. We will go over this in class next week.
week 7
3/8 and 3/10
CDSG, Chapter 10 - Notebook prompt: See if you can apply some of the material about quests in this chapter to your own game. How can you make the tasks that you are giving the player to do more fulfilling? How can you make sure that the mechanics required for the quests support your overall narrative?

What are archetypes and why are they so important in storytelling? What archetypes are you using in your story and how do they help the reader engage emotionally with your characters?

Begin Javascript
Presentations: Matt R. - Wolf Among Us
Work on midterm projects which are due next week.
week 8
3/22 and 3/24

top

Presentation:
due before class : midterms
In class: midterm evaluations and critiques
here is a link to the midterm evaluations you will use to review your fellow student's work.
due next week: usability evaluation of your own site and written critiques of the 4 classmates after you on the class list. Have 5-8 people take your usability test. Review your results and then summarize your findings. Your summary should include the following as well as any results specific to your topic: What worked best, What didn't work well, Was your message received in the manner in which you intended? Did users have problems with navigation? Didi they like the design? You should also discuss what you could do to improve your work. You will not be expected to make the changes you recommend unless you plan to continue the project for your final.
week 9
3/29 and 3/31
Design Notebooks - You will turn your design notebooks in for mid-term review. They should contain: Reading responses, design documents for your author page and midterm, the questions you will use for your usability test. You can add the results of the usability test after I return them.

Develop a proposal for your final project which we will discuss in class. I have a number of people who are interested in having working with you if you don't have an idea of your own.


Proposals are due April 7th. Proposals should include:
::typed::
1-2 page written description that includes story info, intended audience,
intention or purpose, platform, design and usability considerations, and key features.
::pencil on paper::
information architecture diagram
storyboard sketches that clearly show the layout(s) you plan to use.

The proposal should clearly demonstrate your plans for the story and how it will address the needs of your intended audience.

Given that students are working on different projects in different platforms, the final 5 weekly assignments will be self-defined milestones appropriate to your individual projects. We will discuss these in class and you will list them in your design documents and turn them in on the appropriate day.

Presentation: (T) Glen (TH) Sean - SOMA
due before class : midterm usability posted to your website and a hard copy turned in in class. Turn in: the questions that you used, summary of results and what you learned from the test, how you could improve the site.
(WA6) Self-defined milestone due linked to web by 6pm Sunday and proposal for your paper which is due in two weeks
week 10
4/5 and 4/7

Working towards the Final Project

Some examples of good papers from previous semesters include: Matt M.'s. Andrew's paper is not for a narrative game class, but is a good analysis which may help you formulate your ideas.

Here is something you could use for your final. It uses Javascript to load elements in the page dynamically. We will go over how this works in detail. Here is the map which is the key to everything.
(WA7) Self-defined milestone due linked to web by 6pm Sunday
Presentation: (T) Johnny (TH) Matt
week 11
4/12 and 4/14
due in lecture (Thursday) : interactive narrative analysis paper

This is an example of a structure that provides the player with an inventory and based on the contents of the inventory creates winning and losing conditions. Here is the map that shows the structure.

Presentations: (TH) Luke - Amnesia
(WA8) Self-defined milestone due linked to web by 6pm Sunday
week 12
4/19 and 4/21

top

self defined reading

Here is a structure that uses an external javascript page but allows for multiple html pages for those of you using image maps, for example.

And one more time with simple and then more complex audio....

Presentation: (T) Josh and Austin(Th)
(WA9) Self-defined milestone due linked to web by 6pm Sunday
week 13
4/26 and 4/28
Due in class on Tuesday: usability test for your final project

On Tuesday the class will conduct a usability test on the progress of the finals. You should bring questions that will elicit useful feedback about your work. During the classtime you should have 3-4 people in the room test your final while you test the work of others. The results should be summarized in your design notebook and inform your final push to completion.

(WA10) Self-defined milestone due linked to web by 6pm Sunday
Presentation: Evan - I Have No Mouth and I Must Scream
week 14
5/3 and 5/5

Here is an example of the same structure we have been testing, but with images as buttons.

Here is a link to a similar structure that loads and plays sound files as directed.

where do i register a new domain id?
the accredited registrar directory
this is a comprehensive listing of registrars compiled by internic.
internic faq page (answers many questions about domain registration).
choosing a domain id the basic cost for domain registration varies depending upon who you choose to work with, and any current offers or specials they offer. you will need to have an internet service provider (isp) in order to register your domain id. Some providers: meta tags <html>
<head>
<title>mime 2000</title>
<meta id="description" content=
"the mime program at indiana university is a content driven program designed to bring together talented individuals who are interested in all aspects of newmedia design and who understand that newmedia will not be designed by individuals but by groups of people talented in all sorts of areas such as fine arts, music, theater, computer science, communications, psychology, folklore, storytelling, marketing and computer science." >

<meta id="keywords" content=
"multimedia, education, training, multimedia, art, new media, masters degree, interactive storytelling. digital storytelling, interaction design, game design, virtual reality, information science, information architecture, computer science, communications, telecommunications" >

</head>

search engines and your url
Take a look at the code of a page that ranks very high on a google search for the artist's id.

due final exam week:
answers to the following questions in your design notebook

how have you progressed as a designer since the beginning of the semester?

do you feel that you acquired enough technical skills over the course of the semester?

do you feel that you acquired enough usability skills over the course of the semester?

which assignments were the most and the least helpful?

any other comments that you have on the class would be appreciated.

how successful was your final project?

what areas of your final project need improvement?

where does the final project need to go next?

turn your notebooks in with all of the paperwork for your final project on the appropriate due date (see below).

reminders for your final project:
  • All code must validate! If you didn't write some of your code, credit who did!
  • All pages must have appropriate meta tags
  • Credit all sources for images/text/3rd party code you are using (including code you are using that I wrote)
  • Credit yourself for building the site on all pages with link to bio/contact
  • Make sure you cross browser/cross platform test before presentation day
  • If you have worked with others, have them email me to help me grade your work - your relationship with your client/team is part of the final.
exam week
You will be presenting final projects during our scheduled final exam time: 8 am!!! May 12th. . You must present your final project to get credit for it. You also should have completed a usability test on the completed version of your final and have your questions and summary of results in your design notebook and linked to your index page. Students must also turn in a video of the story being experienced which we will publish on the GDD website.
Turn in all your materials: Design notebooks, Usability studies, Peer evaluations to me at the conclusion of the final exam.

Last changed, 2016, © 2000→ Elena Bertozzi Image carved in boxwood by Maestro Adriano Porazzi, printed and embellished by Alberto Casiraghy.