Brainstorm

Sketch

Prototype

Collaborate

Feedback Loops

Simplify

Develop

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.