Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 466 lines (318 sloc) 19.8 KB

IXD302/DES310: Narrative and Storytelling


Module Hand In: Tuesday 8th May 2018 at noon.

Remember to put links to all deliverables in one post for the module on your tumblr blogs.

Deliverables

1. Narrative Takhe Website
2. Master Apprentice: Heroes and Villans Website
- Include the Style Tiles, Moodboards, Typography Excercises
3. Research: Tumblr Blog, Sketchbooks and Supporting Material including prototypes.


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 through 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.

For a more in-depth explanation of the module’s intent, including recommended reading, read the abbreviated module descriptor. (This module is run concurrently for students on both the BDes (Hons) Interaction Design and BSc (Hons) Interactive Multimedia Design courses.)

Students are provided with an existing piece of content, which we have carefully developed to include a broad range of content types. Without the burden of having to generate content, they are encouraged to develop a single page web site, where the use of narrative and storytelling is brought to the fore. The content is sectioned, with various asides, maps and charts, allowing for considerable creative interpretation.

Paul McCormack


Overview

Week 01: Introduction; Brief; HTML is a Design Element
Week 02: The Narrative Experience Week 03: Single Page Showcase
Week 04: What Is Narrative? Learning From Print
Week 05: What Is Narrative? Learning From Music and Film
Week 06: Group Critique
Week 07: Visual Vocabulary: Flat → Skeuomorphic → Flat…
Week 08: Moving From A to B: Designing Transitions
Week 09: The Wonderful World of Maps
Week 10: Amplifying Data
Week 11: Optimising for Performance
Week 12: Group Critique

Fridays, 11.15-12.15
Conor Lecture Theatre

Master Apprentice Responsive Storytelling

Every other week you will complete a Master Apprentice Responsive Storytelling Excercise.

  • Lesson 1: HTML and Semantics
  • Lesson 2: Art Direction and Style Tiles
  • Lesson 3: Typography
  • Lesson 4: Responsive Web Design (RWD)
  • Lesson 5: Macro- and Micro-Interactions

Detailed View

Week 01: Introduction; Brief; HTML is a Design Element

We kick off the semester with a short refresher, stressing that HTML is a design element. This session is intended to ease students back into their second year, blowing off the cobwebs and reiterating what we covered in Year 1. It is particularly designed to pick up direct Year 2 entrants that might be missing core skills.

  • Introduction
    • Outline of the Module
    • Teaching Staff
    • Lecture Series Overview
    • Assessment and Deliverables: A note on the deliverables and amount of effort I’m expecting. (This is a 20 Credit module, which equates to 200 effort hours, excluding the lectures, that’s 176 hours of self-directed study.)
  • HTML is a Design Element
    • Design Last
    • Frontend Guidelines

Resources

Download Bird Project Copy here

Deliverable 02 Lesson 1: HTML and Semantics


Week 02: Stories Drive Communication

Stories form the backbone of human expression and, considered carefully, underpin interactive experiences. In this lecture we explore the magic of stories and investigate the potential storytelling has when applied to design for the devices we use daily.

  • How Stories Function
  • From Watch to Desktop (And Everywhere in Between)
    • The Medium Frames the Message
  • The Narrative Web
    • Collage, Montage; Cause, Effect

Resources

As mentioned, if you haven't looked at Markdown yet it would be very beneficial to start now.


Week 03: Single Page Showcase

A roundup of beautifully designed single page sites, to inspire. If you’re looking to level the big beasts, this is where you should be aiming. We’ll take a series of single page stories and break them down, exploring how narrative and pacing underpin their design.

  • Bird Inspiration
    • Classics
    • Young Pretenders
  • Portfolios
    • Get them to explore how others tell the story of their portfolio.
  • Side Projects

URLs

The following single page websites were submitted by last years Yr2 group.

Deliverable 02 Lesson 02: Art Direction and Style Tiles


Week 04: What Is Narrative? Learning From Print

Print’s not dead, far from it. It’s linear (and non-linear) and there’s a lot we can learn from it. In this lecture we explore the legacy of printed narratives, exploring books, magazines and other printed ephemera, where a story forms a backbone of the experience.

  • What is this thing called paper?
  • Getting inspiration off-screen.
  • Exemplars (Show and Tell):
    • Monocle
    • iD
    • Speak
    • Time Magazine
    • The Economist
  • How books function and tell stories.
    • Pacing
    • Choose Your Own Adventure

URLs

Books


Week 05: What Is Narrative? Learning From Music and Film

From Gorecki to Glass, Kurosawa to Kubrick, there’s a great deal we can learn from the worlds of music and film. In this lecture we introduce the idea of structure, rhythm and cadence, and the importance of considering the spaces within content journeys.

  • Exemplars (Show and Tell):
    • Kurosawa
    • Kubrik
    • Haneke
  • Structure
    • The Shape of Song
    • Verse Chorus Verse
    • The spaces between notes matter.
  • Pacing
    • East and West
    • The Power of the Pause
  • Colour

URLs

To follow.

Deliverable 02 Lesson 03: Typography


Week 06: Group Critique

A group critique encouraging peer learning, this session affords an opportunity to gather feedback on the work done to date. Expect honest opinions, expressed fairly.

During the crit we'll be focusing on the following deliverables:

  • HTML and Semantics (Week 1)
  • Moodboards (Week 3)
  • Style Tiles (Week 3)
  • Typography (Week 5)

*Both for Master-Apprentice excercises and Bird Project


Week 07: Visual Vocabulary: Flat → Skeuomorphic → Flat…

We were unable to deliver this lecture as it fell on a designated reading day but for those interested in skeuomorphic to flat design the following material will provide a solid overview.

Let’s explore how our visual vocabularly has evolved. Once it was flat, then it became skeuomorphic (allowing the language of the real world to inform our understanding of new, emerging devices), now it’s flat again. We’ll explore the past and current landscape, including Google’s Material Design and IBM’s new IBM Design Language.

URLs

Responsive web design

CSS Grid

Flexbox

Media Queries

Deliverable 02 Lesson 04: Responsive Web Design


Week 08: Moving From A → B: Designing Transitions

How we move from A → B matters. Animation can play an important part in the story. Do we use a dissolve? A Magic Move? In this lecture we’ll investigate transitions between states and explore Keynote as a rapid prototyping tool for designing interactions.

  • Transitions
    • Fade
    • Dissolve
    • Jump Cut
    • Etc.
  • How do the transitions we choose shape understanding and shape the form?
  • Timing

URLs

Some tasty resources from the Internet.

Transitions

Smooth Scroll

Animations

Buttons

Responsive Web Design


Week 09: The Wonderful World of Maps

Returning to the content supplied (which includes a map) we ask: Why use a static map when we can learn all about the wonderful world of APIs?

We’ll explore the Google Maps API and OpenStreetMap, encouraging the you to delve a little deeper and extend your skillset.

URLs

Deliverable 02: Lesson 05: Macro- and Micro-Interactions


Week 10: Amplifying Data

When designing with data, we have an opportunity to amplify that data through the careful use of design. In this lecture we explore charting libraries to present complex statistics elegantly and effectively. We’ll explore Chart.js and Google Charts, encouraging the students to add a new skill to their existing toolbox.

URLs

Table goodness

Graphs and charts


Week 11: Optimising for Performance

We’re designing for everyone, regardless of their bandwidth. Let’s stop lazily designing for fat broadband pipes and start thinking of those with less capable connections. Those on mobile, those travelling on limited bandwidth, those less fortunate than us in the developed world. Let’s optimise, relentlessly.

  • A different kind of speed.
  • Blazing Fast
  • Concatenation
  • Minification
  • Compression

Resources

Image Optimisation

Concatenating


Week 12: Group Critique

A group critique encouraging peer learning, this session affords an opportunity to gather feedback on the work done to date. Expect honest opinions, expressed fairly.

This critique affords the students formative feedback, providing them with an opportunity to address any issues and to improve the quality of the submission before the May 8th hand-in.

Deliverable 1: Takahe Project Deliverable 2: Master Apprentice: Heroes and Villans (up to Week 06) Deliverable 3: Sketchbooks/Tumblr/Workspace Journal


Assessment

  • Deliverable 1: Bird Project (60%)
  • Deliverable 2: Master-Apprentice: Responsive Storytelling (40%)
    • Lesson 1: HTML and Semantics
    • Lesson 2: Art Direction and Style Tiles
    • Lesson 3: Typography
    • Lesson 4: Responsive Web Design (RWD)
    • Lesson 5: Macro- and Micro-Interactions

A more detailed breakdown of the assessment, with deliverables, is available here.

-->