CxD Archive
Intro to Informatics and Web Development
Intro to Informatics and Web Development
  • Intro to Informatics and Web Development - Front Page
  • 1-1 Intro to Code References
  • 1-2 Basic HTML
  • 1-3 Basic CSS
  • 1-4 Classes and IDs
  • 1-5 Javascript
  • 1-6 Javascript Objects
  • 1-7 If...Else Statements
  • 1-8 For Loops
  • 2-1 Intro to User and Product Research
  • 2-2 Product Investigation
  • 2-3 Interviews
  • 2-4 Personas
  • 3-1 Intro to Interaction Design
  • 3-2 Sketching Interfaces
  • 3-3 Prototypes and Interaction Storyboards
  • 1-8 For Loops
Powered by GitBook
On this page
  • Standard Deliverables ✓
  • Advanced Deliverable ✓+
Export as PDF

3-3 Prototypes and Interaction Storyboards

Previous3-2 Sketching InterfacesNext1-8 For Loops

Last updated 6 years ago

Most web pages and apps have multiple screen views. For this exercise we want to look at two ways to demonstrate concepts having multiple screen views.

  • Interaction storyboards link a few sketches together visually to explain how people will interact with the product.

  • Interactive prototypes provide a way to simulate physical interactions using sketches.

Standard Deliverables ✓

  1. Sketch an interaction storyboard of a trivia app like the example above, but make it uniquely yours. You can use starting template, like , for sketching if you like.

  2. Photograph your storyboard and save the file so that you can edit it with Google Drawing or a similar application.

  3. Create individual image files for each or your sketched screen shots to build your interactive prototype. For example: , , .

  4. Login to marvelapp.com and create an interactive prototype like the example above.

  5. Create a document that has your photographed storyboard and a link to your interactive prototype on Marvelapp.

Advanced Deliverable ✓+

Create a second sketched interaction storyboard that is distinctly different from your first.

this one
screen1
screen2
screen3
Demo of how to use Marvel App