Assignment 4 | Interactive Storytelling

/ assigned group project
/ design an interactive visual narrative
/ using a found short story, create a website that takes the viewer on an active journey through the narrative.
/ work as a team to develop an appropriate aesthetic. Each team member will have different strengths and weaknesses in the [web] design process. Use each other to develop a unique and high quality final piece.


Exercise 3_1: Select a Story
Exercise 3_2: Visual Research / Brainstorming
Exercise 3_3: Storyboarding
Exercise 3_4: Preparing Files
Exercise 3_5: Code HTML
Exercise 3_6: Code CSS


Exercise 3_1
Select a Story

Find a short story with a good amount of text that can be cut and reworked if necessary.

Exercise 3_2
Visual Research / Brainstorming

Find action words and descriptive qualities.
Write out major points of the narrative (beginning, middle, end) Create options for overall aesthetic (colors, styles, typefaces, etc…)

Exercise 3_3

Develop the pace and sequence of the story in fully designed steps.

Exercise 3_4
Preparing Code

Making and properly saving images and videos
Creating webfonts
Separating layouts into div layouts
Organize website files and folders (use index.html)

Exercise 3_5
Code HTML page

Write html markup without CSS
Add js as needed
post to blog

Exercise 3_6
Code CSS