PROTOTYPING FOR LEARNING
a visual web notebook
My Goals
This site is provided as a resource and can be used to get started with prototyping in learning.
1. Share and Explore
2. Inspire and Have Fun
3. Think
4. Experiment
WHY WE PROTOTYPE
To communicate and help to create a visual story. Using prototyping we can quickly test a concept, gather feedback from our audience and architect a plan with our team.
Getting Started with Sketching
The easiest way to start is by sketching out ideas and concepts as you are thinking, brainstorming or working with your stakeholder. Grab a piece of paper and pencil and let’s start to sketch a concept.
Don’t forget to experiment, play and adapt your process.
For homework, download and test one app a month (at least) to see how you can enhance your process.
Use sketching to communicate a idea.
Tell a Story
Use your prototype to help you illustrate a concept, tell a story of how a user will navigate from area to area or how the user will interact with the content.
Basic Sketching Objects to Use
Below are quick examples of how to draw sample content within your sketch.
TEXT
Draw some squiggly lines to represent copy from a headline to a paragraph.
HAMBURGER MENU
Add to allow the user to reveal additional commands or menu items that are not critical to the primary purpose of the screen.
BUTTON
Can be rounded or squared and allows a user to select a call to action.
PLAY
Can be used within a rectangle to represent a media element such as audio or video.
ACCORDION
Allows you to present choices that may expand upon selection to reveal additional choices.
BLIND / MODAL
Can be used to call attention or alert the user to a particular interaction such as a warning or prompt.
Let’s Sketch
Grab some paper and a pencil. Draw a sample menu with 4 selections. and then a secondary content page that shows how you may use a headline, visual image or video and additional content.
Sketch Sample based on Activity
Here we see an example of a sketch showing a menu and two screens as the user navigates deeper into the program.
What are your goals?
Define the Problem
Ask questions, understand the need, don’t make any assumptions. Ask to speak to several audience (participants) who can provide feedback.
Understand the Audience
This is critical! How will they use the deliverable? Where will they use it? What type of environment? What device will they use?
Brainstorm Options
Use you sketching and prototyping apps to evolve the concept. Get feedback and once everything is good, start development.
Prototype, Evolve and Repeat
Use prototyping tools and process to gather feedback, test concepts and once approved, develop, gather feedback, launch and repeat.
Content Strategy
Design for smaller size and then scale/ enhance/ add up. This is called progressive enhancement.
Tips & Techniques
The following tips and techniques can be used to quickly build a interactive prototype in PowerPoint or Keynote.
Prototyping with PowerPoint
Using PowerPoint, you can easily follow the steps to quickly add a link to any object, export a PDF and test or demonstrate a concept on your computer or mobile device.
Adding Links in PowerPoint
- Right Click on Object and select HYPERLINK..
- From the pop-up dialog, select THIS DOCUMENT
- Navigate and select SLIDE TITLES and select the SLIDE you want the button to link to.
- Export a PDF and you can open on any device to demonstrate.
Prototyping with Keynote
Using Keynote, you can easily follow the steps to quickly add a link to any object, export a PDF and test or demonstrate a concept on your computer or mobile device.
Adding Links in Keynote
- Right Click on Object and select Add Link
- From the pop-up dialog, select SLIDE
- Select outside the pop-up to confirm
- Export a PDF and you can open on any device to demonstrate.
Resources
The following apps, tools, books and techniques can be used to expand your prototyping skills and evolve your process.
Sketch App for Mac
Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design. Download the free trail or purchase for $99.
Quickly Craft and Format Content
Craft Plug-ins for Photoshop and Sketch are amazing free plug-ins from InVision allow you to quickly add data for placeholder content, duplicate elements with step and repeat ease and prototype your concepts as you are wireframing them in Photoshop or Sketch.
Mirroring Your Mobile Device back to your Desktop
Reflector
Windows | Mac
Great app that will allow your to mirror your device back to your computer and record or display via projector or tv output.
Air Parrot
Windows | Mac
Great app that will allow your to mirror your device back to your computer and record or display via projector or tv output.
User Testing
Unlock customer insights and increase your revenue
Creating Placeholder (fill-in) Copy
Lorem Ipsum Generator
Derived from Latin dolorem ipsum (“pain itself”), Lorem Ipsum is filler text used by publishers and graphic designers used to demonstrate graphic elements.
Cupcake Ipsum
How about using auto-generated text that will actually
make people love your project even more?
Pretty sweet, right?
Tools and Web Apps to help to take your prototype to the next level with interactivity.
Marvel App
A web-based app for iOS and Android to Quickly Prototype Your Ideas
Adobe XD 
Design, prototype, share — all in XD.
Mobile Apps
Paper by FiftyThree for iOS
Apple Pencil for iPad Pro
Snagit
A screen capture utility for mac and windows. Great to share with your stakeholders to quickly grab a screen and share it. You can also capture short screen recordings less then 2 minutes.
Camtasia
Allows you to record your screen and is available for Mac and Windows. Download a trial version and test drive one of the best tools to create amazing videos.
Books to Open Your Eyes
Four great books to expand your imagination, learn about design and how people interact with content to managing your projects.
A Book Apart.
Books for people who make web things.
Responsive Web Design
Think beyond the desktop, and craft designs that respond to your users’ needs—no matter how large or small the display.
Design for Real Life
You can’t know every user, but you can develop inclusive practices to create experiences that support a wider range of people, more of the time.
Mobile First
Data-driven strategies and battle tested techniques to help make you a master of mobile—and improve your non-mobile design, too!
Designing for Touch
Get the know-how to design for interfaces that let you touch—stretch, crumple, drag, flick—information itself.
Subscribe and Learn
Keep up to date and learn about the latest tips, resources and updates with our marketing free newsletter.
