Hypermedia Laboratory

Luís Frias, Assistant Professor, Arts Dep., Faculty of Arts and Letters, University Beira Interior

Course Type: Design and Technology-focused

Keywords: Studio-based, Twine, Readymag, Stornaway/Korsakow

University Department Level Credits Length Medium
University Beira Interior Arts Department Undergrad 8 15 weeks In-person

Course Description

Addressing the need to include contemporary digital narratives, in the scope of a Multimedia Design graduation, this course promotes as well students ability to integrate previous acquired knowledge on visual media creation and interface design and development. 

This course works as an introductory level to the production of a narrative hypermedia project. Students will be able to identify and differentiate narrative structures and patterns, linear, non-linear and hypermedia. Conceive interactive narrative structures and learn how to use tools for construction of interactive scripts. Understand the relevance and be able to apply notions of interface design in the construction of narrative interactive content.

Weekly Outline

Week 01. Contemporary creation and editing processes in the context of digital media.

Week  02. Narrative Structures: from Linear Classic Story Plots to Non-linear and Hypermedia Narrative Formats.

Week 03. Narrative structure analysis applied to multimedia content: the use of mental mapping visualization tools

Week 04. Interactive Script: Interactive Structural patterns; Dynamic POV; Audience and Interaction.

Week 05. Digital Publishing formats in Narrative Multimedia.
Week 06. Creating an Interactive Script: digital tools.

Week 07. Narrative Interface Project: Interactive Script Writing and Concept Design.

Week 08. Tools and technics for Interface Prototype development: static and dynamic.

Week 09. Laboratory: Sketching and Paper Prototyping.

Week 10. Laboratory: Paper Prototyping test and validation.

Week 11. Laboratory: Narrative Interface Storyboard and Wireframe development.

Week 12. Editing tools for Hypermedia (Web) Publishing.

Week 13. Laboratory: Narrative Interface Project Development.

Week 14. Laboratory: Narrative Interface Project Validation and Test

Week 15. Narrative Interface Projects Presentation and Discussion

Course Objectives ​

  • To create Digital Narrative Structures: Non-linear and Hypermedia.
  • To understand and analyze narrative structures applied to multimedia/hypermedia content.
  • To create an Interactive Script using: Plot types; POV; Structural patterns; Audience definition and Interaction features.
  • To use digital tools for the creation and development of a Narrative Interface Project (IDN).

Reading

  • Interactive Digital Narrative – What’s the Story?, Hartmut Koenitz (excerpt)
  • The Garden of Forking Paths, Jorge Luis Borges
  • Le Pouvoir Narratif des Interfaces, Benjamim Hoguet (excerpt)
  • La Narration Réinventée, Benjamim Hoguet (excerpt)
  • The new digital storytelling: Creating narratives with new media, B. Alexander (excerpt)
  • Writing Interactive Fiction with Twine, Melissa Ford
  • Writing IF, Emily Short (web page)
  • Twinery, Chris Klimas et al. (website—tool documentation)
  • Sam Barlow’s guide to making narrative games, Alex Calvin (website)

IDE and IDN Authoring Tools

IDN Artifacts

Viewings

  • Press Pause Play documentary (Vimeo/Youtube)
  • Marc-Antoine Mathieu : BD “3 secondes” – Entrée libre (Youtube)
  • Framed (Youtube)
  • Late Shift (iOS app/Steam)
  • An Idea and an Emotion – How I Make Games (Youtube)

Major Assignments (being assignments whose value is of 25% or more)

Narrative Analysis Visualization and —Linear vs. Non Linear : 

  • Platform: Ilustrator/Visio/Lucidchart/Miro+Twine
  • Purpose: To analyze a linear narrative media content—Press-Pause-Play documentary— identify levels (drama/plot/characters/scenario/time) and narrative structure and translate it to a nonlinear interactive format.
  • Requirements:
    • Project Length: ND
    • Project Size: NA
    • Project Aesthetics: Correct use of Graphic Design fundamentals (Typography, Form, Color, Image) to produce a coherent, clear and informative visualization of a narrative media structure.  
    • Coding Proficiency: Not Required but valued if used in Twine
  • Evaluation: 
  •  
    • Interactivity: Correct Use of Twine’s feature to structure an interactive version of a
    • Story and narrative: Students will be evaluated in their understanding of the narrative components of the content and the way they make a creative use of graphic design to visualize them. In the interactive transposition of the narrative, the creativity demonstrated on editing and organizing the content blocs identified, together with the quality of the interaction experience using Twine’s hypermedia features, would constitute the main criteria for grading level.
    • Production values: The quality of the graphics and the level of knowledge demonstrated designing the interactive script in Twine.

Interactive Narrative Project (IDN Creation)

  • Platform: Twine+Readymag or Stornaway or Korsakow
  • Purpose: The project requires the students to think creatively in a digital interactive narrative, fostering their ability to produce an hypermedia structure, applying the conceptual and technical knowledge acquired previously in the course. The digital artifact delivered within this project is the central topic of evaluation for the entire course.  
  • Requirements:
    • Project Length: 15-20´
    • Project Size: 10-15 (the narrative sequence can be measured in passages, blocs, pages or sections)
    • Project Aesthetics: Dependent on the Story-world coherence and Concept Art detail and Interface quality experience,
    • Coding Proficiency: Not required but valued.


  • Evaluation: 
    • Interactivity: Quality of platform architecture, navigation and interface design and experience patterns.
    • Story and narrative: The aspects of narrative structure, flow, immersion, emotional (affective) tension and quality of narrative choice in the drama will constitute fundamental criteria for evaluation.
    • Production values: Quality demonstrated in the resolution of the visual and audiovisual media; the quality of the interface design; and the stability of the interactive platform. Overall the quality of the narrative experience with special attention to the way it engages the user while inside the content but also how the project communicates, before and after the experience takes place.

Course Best Practices

  • The expositive and shared reflection class moments will provide the students with an array of theoretical and methodological knowledge that will allow them to conceptually structure and develop, in an experimental laboratorial format, narrative multimedia objects. 
  • The technical and tool based knowledge acquired by using software applications is an essential component for the students to develop a level of quality in their performance. As well this approach enables and structures a conceptual way of thinking connected to the matter and the aesthetic language characterized by the procedural mechanics of computational systems.
  • The students will follow a progressive learning path, in the diverse conceptual and technical assignment components, that will allow them to naturally integrate the several steps of the methodological process of production for the final project.
  • The experimental format of the exercises done in the laboratory, for theoretical and practical application of knowledge, aims to develop and consolidate skills essential in the resolution of concept and prototyping project levels for narrative interfaces.  
  • The laboratorial practice also promotes a synergic and collaborative learning environment. This is verified by the ability of the teacher to focus on each student’s work and give a more individualized tutoring, in the middle of the project development, but also by interpersonal collaboration between peers in the collective work student environment. Each weekly sessions of 4 hours, 8h altogether, are complemented by tutorial time of 1h activated on students request. 
  • The project prototype evaluation component, usability testing and user experience, benefits specifically from this collaborative working methodology, fulfilling the need for a fast and diverse process of external feedback in order to iterate project solutions.
  • Having as main objective that students are able to act as designers in the contemporary field of creation, production and distribution of narrative multimedia projects – online, mobile and interactive – this course aims to conciliate a technical and scientific area of knowledge with hands-on experimentation of project solutions. 
  • The positive conclusion of assignments and project work, planned as evaluation, will allow the students to reach globally the learning objectives and prepare them for the development of an informed project practice in the area of multimedia design for digital narratives.