PROTOTYPING FOR LEARNING
  • Brainstorm

  • Sketch

  • Prototype

  • Collaborate

  • Feedback Loops

  • Simplify

  • Develop

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.

parallax layer

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.

parallax layerparallax layer

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

TEXT

Draw some squiggly lines to represent copy from a headline to a paragraph.

hamburgerMenu

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.

yesButton

BUTTON

Can be rounded or squared and allows a user to select a call to action.

play

PLAY

Can be used within a rectangle to represent a media element such as audio or video.

accordion

ACCORDION

Allows you to present choices that may expand upon selection to reveal additional choices. 

alert

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.

phoneHT
tabletVT

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

  1. Right Click on Object and select HYPERLINK…
  2. From the pop-up dialog, select THIS DOCUMENT
  3. Navigate and select SLIDE TITLES and select the SLIDE you want the button to link to.
  4. 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

  1. Right Click on Object and select Add Link
  2. From the pop-up dialog, select SLIDE
  3. Select outside the pop-up to confirm
  4. 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.

Reflector

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.

airParrot

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

Web Based Prototyping with proto.io

Create high-fidelity prototyping that look exactly like your real app with drag & drop ease all in your browser.

Mobile Apps

Adobe Illustrator Draw

Paper by FiftyThree for iOS

Apple Pencil for iPad Pro

Tools to Capture Your Ideas

Free and inexpensive apps to grab and record anything on your screen.

Jing

A free 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.

Snagit

A free 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.

Brief books for people who make websites.

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.