BDes (Hons) Interaction Design

Narrative and Storytelling


Examining how storytelling can be used to enhance content, this module considers how concepts like art direction, pacing and narrative can be used to control the flow of information. Through the creation of a piece of narrative web-based content, students are taught the dynamics of design as it unfolds like a story, across frames and over time.

Narrative and storytelling form the backbone of all interactive experiences. With a focus on user journeys – how users make their way through content – the module underlines the importance of pacing and flow. We introduce students to a broader palette of design tools, including behaviour, motion, visual feedback and transitions between states, exploring how these can help define emotional responses to what we create.

We explore the importance of separating the ‘behaviour layer’ (introducing and exploring JavaScript) from a web page’s structure and content (HTML) and presentation (CSS). Through a series of prototyping exercises we explore JavaScript and behaviour in more detail, stressing the importance of progressive enhancement to support devices that may not support advanced JavaScript functionality.

The module explores both macro-interactions (how we move through content at a storytelling level) and micro interactions (how we design detailed interactions, for example, pressing a button). The intention is to explore the potentially rich ways in which we can use transitions and animations to connect content and tell stories in new and exciting ways.


The essential aims of this module are:

  • To introduce the principles of narrative and storytelling, enabling students to consider their use as part of the content design process.
  • To examine how a story unfolds over time and consider pacing as an essential part of the storytelling process.
  • To explore the process of art direction, considering its role within the design process.
  • To prototype macro-interactions at an overall story level and micro-interactions at a more focused functional level.
  • To undertake a series of prototypes using JavaScript which introduce and explore behaviour.
  • To introduce the importance of progressive enhancement as a strategy for creating inclusive experiences designed for all.
  • To draw together a series of macro- and micro- prototypes to create a finished, cohesive piece.


Students are supported through a weekly lecture programme that is designed to broaden their knowledge and understanding. The lecture programme is based on specific topics associated with narrative and storytelling. Key figures and contemporary practices are presented in each lecture, examining how a story unfolds over time and the methodology used to control the flow of information.

Narratives unfold at both the macro level, between large masses of information, but also during small, tiny interactions. With this in mind, we explore how content can be shaped at different levels of magnification: from the canvas in, to the element out. We explore storytelling canvases and also consider the functional design of different interface elements, including: buttons, menus, input elements, navigation and other elements.

Indicative lecture content includes:

  • Editorial Design
  • Learning From Print
  • Art Direction
  • Narrative and Storytelling
  • Time as a Design Element
  • Pacing, East Meets West
  • Learning From Film
  • Understanding Behaviour
  • Macro and Micro Prototyping
  • Transitions

Reading List


← Back to curriculum

Module details

  • Code: IXD304
  • Year: 2
  • Semester: 2
  • Credits: 20
  • Delivery: Lectures, Seminars, Workshops and Self-Directed Study
  • Co-requisites: Designing User Experiences
  • GitHub Repo