Mockup and Storyboard Examples
These examples show the mockups and storyboards that students created for projects in the past:
- Harry Potter Timeline (infographic): Harry Potter Timeline and Mockup using Illustrator
- The Nutcracker Toy Catalog (flipbook/magazine): Remix and Mockup using paper and pen
- Rose-Red and the Bear (video): Remix and Outline and Mockup using a text editor
- 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
- A Midsummer Night’s Tweets: Remix and Storyboard using Storyboard That
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 (if you’re familiar with the term) 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 (30-day free trial)
- 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, because it was simple and I had a copy. If you do go this route, Google Slides would work too.
If you want to try something specifically created for storyboarding or a cartoon or timeline tool (listed in Monday’s post), take at look at these resources for creating and organizing storyboards:
- StoryboardThat
- Storyboard Generator
- Toon Boom Storyboard (30 day trial)
- MakeBeliefsComix
- Pixton
- Bitstrips
Old-Fashioned Tools
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. Sketch them out if you want to, but then scan them or take a photo so that you can turn them in.
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.
In-Class Writing
After you look at some of the tools, go to the "Project 4 Design Quiz" tell me the following:
- whether you will create a mockup or a storyboard (or both).
- which tool you will use. If you haven’t decided on a mockup or storyboard tool, you can explain why.
- any questions that have come up for you as you’ve worked on designing your project.
Homework
For today, do the following:
- If you didn’t complete your "Project 4 Design Quiz" quiz in Canvas, please use the grace period to finish by 5:30 PM Thursday (11/5).
For Friday, do the following before class:
- Friday will be an in-class workday, for creating/finishing your storyboards and/or mockups.
- Bring whatever you need to work on your project in class.
- Anyone signed up for the English Career Connection will be allowed to leave early, after I check in with you on your project.
]]>
Today we’ll begin work on Project 2, which means we’ll be talking about effective websites. I’m still grading your first projects.
Discussing What Makes a Website Good
To get started, let’s brainstorm about what makes a website “good” using Padlet:
Based on the information from the lynda.com videos you watched for homework and your own experience, post one or two things about how websites work.
After everyone posts on Padlet, we’ll establish some guidelines for the web portals that you will make, and apply the criteria to some example websites (found via WebsitesThatSuck.com):
Homework
- Find three portfolio-style sites that you like and want to emulate. Find sites where they show their work and/or their qualifications in their field. Some examples:
- If you are a creative writer, look for the websites of some writers you admire. Be sure you admire the website. Admiring the writer is optional.
- If you are a journalist, look for the homepage of some journalists.
- If you are a teacher, look for the websites of some teachers.
- One rule: Don’t choose any site of mine. I want to avoid any awkward strangeness.
- Be ready to post your links and say what you want to emulate on Friday.
]]>