Examples
The examples below show the mockups and storyboards that students created for projects in the past. Notice that there are many ways to go about planning for your projects and that you don’t have to use sophisticated tools:
- Harry Potter Timeline (infographic): Harry Potter Timeline and Mockup using Illustrator
- The Nutcracker Toy Catalog (flipbook/magazine): Remix and Mockup using paper and pen
- Ethereal Ariel (blog): Remix and Mockup using Frame Box
- Scooby-Doo in Retirement: Remix and Mockup using Wireframe (I think?)
- Cat in the Hat Goes College: Remix and Storyboard using PowerPoint
Professionals also use these tools in their work. While these examples are beyond the expectations for this course, they give you an idea of the role that the tools use in such projects:
- Hitchcock’s Storyboards from 13 Classic Films
- Awesome Storyboards from 15 of Your Favorite Films
- Karateka Storyboard (video game)
- Storyboard Entry on Wikipedia
- Storyboards at Wikimedia Commons
- Jay Bennett Uses myBalsamiq for Video Game Prototyping
- 25 Examples of Wireframes and Mockups Sketches
- 40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups
Lynda.com Resources
- Creating a Short Film: 03 Pre-Production (2h 13m)
- Storyboarding with Photoshop (4m 52s)
- Sketch and Storyboard (7m 58s)
Mockup Tools
Mock-ups are usually used for websites, projects that are “static” (like posters or brochures), and texts that are primarily linguistic or visual in nature. Wireframes fall into this category. Be sure to use the Mock-up guidelines on p. 95 of Writer/Designer to guide your process.
Here are some possible tools:
- Mockflow
- Invision
- Frame Box
- Pencil Project
- Wireframe.cc
- iPlotz
- Froont
- Codepen
- Gliffy (a flowcharting tool)
- mindmapping tools (like bubbl.us or Coggle).
Storyboard Tools
Storyboarding is usually used for projects that move through a series of pieces, places, or points in time—like a video, comic book, or graphic novel. Be sure to use the storyboard guidelines on p. 97–98 of Writer/Designer to guide your process.
Storyboarding is, essentially, outlining your text visually, so you may be happy with creating a simple outline in Google Docs. For online tools I’ve made, I created storyboards with PowerPoint and Google Slides as well.
If you want to try something specifically created for storyboarding or a comic making, take at look at these resources for creating and organizing storyboards:
- StoryboardThat
- Storyboard Generator
- Toon Boom Storyboard (30 day trial)
- MakeBeliefsComix
- Pixton
Old-Fashioned Tools
Your favorite word processor will work just fine. You don’t need to use fancy tools unless you want to. Microsoft Word or Google Docs tools will give you what you need.
Good, old paper and pencil can work for mock-ups and storyboards. There’s no reason that these planning tools have to be digitally produced.
Backing Up Your Design
Many of the mockup and storyboard tools publish your design on their site. Just in case something goes wrong, I strongly advise you to print your work to a PDF, take a screenshot, or otherwise back up the mockup or storyboard that you create. If you sketch out your mockup or storyboard on paper, take a photo with your phone.