Design a set of webpages that accomplish the following:

Conceptual Parameters

• An open ended narrative that explores a theme of interest to you.
• You can think of the project as a story that can be told in different order depending where the user clicks.
• You can also develop it so that it is a linear story if this fits your vision.
• You can also think of it as a type of game in which the outcome may be different for each person based on the choice of links.
• You may also approach it as an abstract series of collage-like compositions that relate to each other in an open-ended way.

Technical Parameters

• You should have at least 6 pages, but you may need more, particularly if you decide to develop an open ended narrative or a game based on choice of links.
• All pages need to be linked. You need to have the set up of an index page with a “pages folder” + “images folder.”
• You need to have a single CSS style sheet in the Pages Folder linked as explained in the tutorials.
• You need to have at least three images per page. Each page may have as many images as necessary. You need to create at least one of the images for each page. Design the image layout in any way that fits your vision (within a containter/window, aligned left, center, or right).
• At least one of the images in each page needs to be placed in an SVG mask and clipped in some way based on the tutorial on SVG clippings.
• You may develop additional SVG designs for each page if you find that it fits your idea.
• You need to embed at least two videos throughout the pages. The video may be short (5 to 15 seconds) or long (no more than a minute) Optional (not required): consider developing gifs and include them as part of your narrative.
• Develop two and no more than three typeface class styles. Apply them with the <p></p> tag.
• Include a background pattern or color for each of the pages.
  

Formal Parameters

• The pages should have a consistent design.
• The pages should offer some type of narrative (open ended or a direct message/story are both acceptable, also relevant for a game-like project).
• You need to keep in mind all rules of design that relate to image and text.
• Consider implementing all features you have learned so far in order to develop an innovative and unique design.
• If you are wondering about a specific design approach go back to one of your page layouts from the first three weeks, and consider implementing the visual approach and/or idea.
• You should also revisit your video projects to get a sense of what you could do in terms of video as part of an interactive project.

Examples of experimental storytelling:

Superbad:
http://superbad.com/
Disco:
http://subculture.com/disco/index.html
A is for Apple:
http://www.aisforapple.net/
Hooger Brugge, Modern Living
http://ml.hoogerbrugge.com/
Peter Horvath
http://artport.whitney.org/gatepages/september03.shtml
http://www.peterhorvath.net/

Experimental Storytelling with hyperlink choice:

Helen Thorington, North Country
http://turbulence.org/project/north-country-part-1/#
http://turbulence.org/Works/Thorington/nc/

Peruse the Electronic Literature Collection to get ideas on storytelling:
http://collection.eliterature.org/

Consider developing work in ASCII
Banksy, Coca Cola Add
http://www.chrismorton.info/2013/01/24/banksy-the-apostle-paul-and-coca-cola-warning-explicit-language/
https://ascii.cl/
http://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20
https://www.ascii-code.com/ascii-art/

Some ideas for animated SVGs:
http://paperjs.org/examples/
Some ideas for HTML5 Effects:
https://code.tutsplus.com/articles/21-ridiculously-impressive-html5-canvas-experiments--net-14210