A visual web notebook

Prototyping
for Learning.

A practical guide to designing learning experiences the right way — by sketching, prototyping, testing, and iterating before you ever write a line of code.

We sketch.
↓
Chapter 01 · Why we prototype

Simplify development by experimenting first.

One of our biggest challenges in developing learning solutions is making sure stakeholder vision, organizational needs, and audience requirements all line up. Prototyping gives us a cheap, fast way to test that alignment before a single line of production code gets written — by experimenting, gathering feedback, and iterating on the idea itself.

Communicate visually

A prototype is a story. Show the flow, the feel, the moments — the things a requirements doc can't say.

Align the room

A shared artifact gets stakeholders, SMEs, learners, and engineers pointing in the same direction.

Improve outcomes

Real feedback — from real learners — caught early means better content, better tools, better results.

Chapter 02 · The process

Four steps — with feedback between each one.

Prototyping isn't a waterfall. It's a loop. Start small, learn fast, adjust. Use this as a checklist, not a gate.

Analyze icon

Define the problem

Ask questions. Understand the need. Talk to the people who'll actually use what you build — not assumptions about them.

Feedback icon

Understand the audience

Where will they use this? On what device? In what environment? Context shapes every design decision that follows.

Brainstorm icon

Brainstorm options

Sketch, prototype, evolve. Share rough work early so the idea gets better before it gets expensive.

Iteration loop icon

Prototype. Test. Evolve.

Gather feedback, refine, test again. Once the concept is solid, then build it — and keep listening after launch.

Pro tip

Don't wait until the end to show your work. The fastest way to a better prototype is one more round of feedback before you think you're ready.

Chapter 03 · Start sketching

Pen, paper, phone, tablet — in that order.

The easiest way to start is by sketching ideas as they come — while you're brainstorming, on a call, or collaborating with a stakeholder. Start analog, then move to one of these apps when you want to share, layer, or iterate.

Notability

iOS · Mac

Handwriting, typing, photos, and synchronized audio — a near-perfect digital notebook.

★ Our favorite

OneNote

iOS · Android · Mac · Win

Microsoft's cross-platform notebook — your workbook syncs across every device you touch.

Sketchbook

iOS · Android · Mac · Win

Drawing tools that feel like real brushes — pair it with a stylus for fast, high-fidelity concepts.

GoodNotes

iOS · Mac · Win · Android

The gold standard for handwritten notes. Searchable ink, infinite canvas, PDF markup, and AI-powered typing straight from your handwriting.

Moleskine Flow

iOS

The Moleskine feel, digitized. Clean tools for sketches, notes, and notebooks.
iPad with Apple Pencil

iPad Pro + Apple Pencil

Our favorite capture-and-annotate setup. Screenshot with Pencil, mark up live, and AirDrop straight into a Figma file or Slack thread. Latency so low the pencil feels like ink.

Unplug to think

reMarkable — paper that syncs.

An e-ink tablet that feels like writing on real paper. No email, no Slack, no pings — just a notebook, a marker, and your thoughts. Pages sync to your laptop automatically, so ideas from a morning walk show up in your desktop workspace by lunch.

We use one for kickoffs, concepting, and long meetings — anywhere context-switching kills the thread. It pairs surprisingly well with Figma: sketch it on reMarkable, import the PDF, trace in Figma.

Visit reMarkable →
Chapter 04 · Storytelling

Sketch the story, not just the screens.

Instead of presenting a mockup, present a story. Use your prototype to walk through how a user meets the content, navigates the app, and hits the moments that matter.

What do they see first? How do they get from A to B? What does the "aha" feel like? When you have the answers, make sure the prototype tells them back.

Storytelling illustration
Chapter 05 · Vocabulary

Six shapes that make a rough sketch readable.

These are the quick marks we reach for to stand in for real UI. Memorize them and your rough drawings start reading like wireframes.

Text

A few squiggly lines stand in for a headline or a paragraph of copy.

Hamburger menu

Three stacked lines — the shorthand for a hidden nav panel.

Button

A rounded or squared rectangle labeled with the action — a clear call to tap.

Play

A triangle in a rectangle — the universal stand-in for audio or video content.

Accordion

Stacked rows with a caret — expandable panels that reveal more on tap.

Blind / Modal

A box floating over a dimmed layer — for warnings, prompts, or anything that needs attention.

Sketching at a desk
Chapter 06 · Practice

Try this sketching activity.

Grab some paper and a pencil.

Draw a sample menu with four items. Then sketch a secondary content page that uses a headline, an image or video area, and a block of additional content. No erasing. Five minutes. Go.

Chapter 07 · Design for Everyone

One design, every person, every screen.

Learning happens in airports, cubicles, classrooms, living rooms — on phones held one-handed, tablets in landscape, desktops with split windows. A prototype only earns its keep when it works for the full range of people, devices, and situations that'll actually meet it.

Desktop

1440 · Landscape

Tablet

1024 · Either

Phone

375 · Portrait

Mobile-first still wins. Design the smallest screen first — you'll cut content to what matters, then earn more as the canvas grows. The inverse almost never works.

Accessibility isn't a step. It's the starting line.

Plan for screen readers, color-blind learners, older eyes, low-bandwidth connections, and keyboard-only users from the first sketch. Retrofitting accessibility is always harder and always worse.

Perceivable

Hit at least 4.5:1 contrast on body text, 3:1 on large type and UI. Never rely on color alone to carry meaning.

Alternative

Pair color with an icon, label, or pattern — so the message survives grayscale and colorblind viewers.

Operable

Everything works with a keyboard. Tap targets 44×44 minimum. Visible focus states. No motion that can't be paused.

Alternative

Offer a reduced-motion mode and a "skip to content" link — small moves, huge payoff for real users.

Understandable

Plain language. Predictable patterns. Labels and error messages that tell a learner exactly what to do next.

Alternative

When copy has to stay dense, pair it with diagrams, captions, or a short audio summary for learners who process differently.

Robust

Semantic HTML, ARIA where it helps, real alt text on every image. Works on screen readers, voice control, and switch devices.

Alternative

If a custom component fights assistive tech, swap it for a native element first — you almost never need the flashy version.

Tools to check your work.

Pick them up at different phases — a sketch-level contrast check, a build-time audit, a real screen-reader pass, the OS features already on every device you own, and a one-click browser score.

While designing
Stark for Figma

Check contrast, simulate color-blindness, and flag missing focus states right inside the design file — before engineering sees it.

Explore →
While building
axe DevTools

A browser extension that audits any page against WCAG rules and explains each fix in plain English. Runs in under a second.

Explore →
While testing
VoiceOver · NVDA · TalkBack

The screen readers your learners actually use. Free on every major OS — spend 15 minutes listening and you'll catch what no scanner can.

Learn more →
Built into your OS
Native accessibility settings

The fastest test is the one you never install. Flip these on for ten minutes and your prototype will tell you where it breaks:

  • macOS — System Settings › Accessibility → VoiceOver, Zoom, Increase Contrast, Reduce Motion
  • Windows — Settings › Accessibility → Narrator, Magnifier, Contrast Themes, Color Filters
  • iOS / iPadOS — Settings › Accessibility → VoiceOver, Dynamic Type, Display Accommodations
  • Android — Settings › Accessibility → TalkBack, Font Size, Color Correction, Live Caption
One-click score
Chrome + Lighthouse

A free audit built right into Chrome — scores any live URL or local HTML file on Accessibility, Performance, SEO, and Best Practices, then lists every fix with a direct link to the offending element.

  • 1. Open your page in Chrome
  • 2. Right-click › Inspect › Lighthouse tab
  • 3. Check “Accessibility,” hit Analyze page load
  • 4. Fix the reds, chase 100. Re-run in seconds.
Learn more →
Chapter 08 · Ready to prototype

Figma — where the team designs together.

Browser-based design and prototyping that anyone on the team can drop into — designer, PM, SME, engineer. Build wireframes, turn them into interactive flows, and hand off with production-ready specs, all in one place.

  • Real-time multiplayer — cursors, comments, live edits
  • Wire up frames into clickable interactive prototypes
  • Dev Mode exports CSS, tokens, and ready-to-ship assets
  • FigJam whiteboards for ideation and workshopping
  • Auto Layout and variants scale a design system fast
  • Runs in any browser — no desktop install required
Open Figma.com →
Chapter 08 · continued

Good filler makes a wireframe feel real.

When you don't have real content yet, lorem-style generators fill the gaps without making the design look empty — or worse, guessing at copy the SMEs haven't written yet.

Lorem Ipsum

The classic. Generated Latin-like text that looks like real copy, so reviewers focus on layout instead of words.

Explore →

Cupcake Ipsum

A friendlier flavor. Makes stakeholders smile, loosens up reviews, and still does the job a lorem generator is supposed to do.

Explore →

Content Reel for Figma

A Figma plugin that pours realistic names, addresses, and copy straight into selected text layers. Ten seconds of prep for hours saved.

Explore →
Chapter 09 · Validate

Put the prototype in front of real people — fast.

A prototype is only as useful as the feedback you get on it. Skip the month-long recruiting cycle — these platforms hand you real users in hours, and a new class of AI tools will rehearse the session before a human ever logs on.

A panel of 2M+ testers who record themselves using your prototype out loud, on their own devices, while narrating every confusion and delight. Great when you need to see the moment something breaks.

  • Unmoderated recorded sessions, back in under an hour
  • Task flows, card sorts, tree tests, live interviews
  • AI-generated highlight reels, sentiment, and summaries
Visit UserTesting.com →

Best when the insight has to come from someone specific — a veterinarian, a warehouse lead, a first-year teacher. Pay-per-participant recruiting with tight screeners, plus scheduling and incentives handled for you.

  • Niche B2B and consumer panels — 4M+ people
  • Built-in screener, calendar, and payout flow
  • Use your own Zoom, Figma, or prototype link
Visit UserInterviews.com →

✨ The new middle layer · AI feedback

Pressure-test a design before a human ever sees it.

AI won't replace real users — but it will catch the obvious stuff in minutes, not days. Drop a prototype into Claude, ChatGPT, or a purpose-built tool like Maze AI or Attention Insight, ask it to role-play a specific user, and get synthesized feedback back instantly.

Use it as a rehearsal layer: ship the fixes AI finds, then send the cleaner build to real testers so every paid session exposes a deeper insight.

  • Role-play personas with Claude or ChatGPT
  • Maze AI — unmoderated tests with AI follow-ups
  • Attention Insight — predictive heatmaps
  • Copy, accessibility, and heuristic checks in seconds

Don't forget to experiment, play, and adapt.

Homework: download and test one new app every month. Your process will quietly get better — and one day you'll find the tool you didn't know you needed.

Chapter 10 · Capture feedback

Grab anything on your screen.

Getting feedback is only half the job — the other half is capturing it in a way you can share, annotate, and come back to. These three utilities cover every situation from a still image to a full walkthrough.

Snagit

Mac · Windows

The fastest path from a screen to a shareable explainer. Capture any region, window, or scrolling page, then annotate with arrows, callouts, numbered steps, and redactions in the same app — no round-trip through Photoshop, no lost context.

Explore →

Camtasia

Mac · Windows

Screen recording with a real editor attached. Capture the demo, trim the dead air, drop in zooms, callouts, and cursor effects, then export a polished walkthrough — ideal for training modules, SOPs, and product tours where clarity matters more than speed.

Explore →

Loom

Mac · Windows · Web

Record your screen, webcam, and voice in one take, share a live link before the file even finishes processing, and let viewers react or reply with video of their own — AI-generated chapters, transcripts, clean-up, and summaries included.

Explore →

CleanShot X

Mac

The power-user's screenshot tool. Scrolling capture, instant annotation, pinned floating screenshots, blur-sensitive info in one tap, and a built-in cloud link you can share faster than hitting Cmd+C. Once you use it, stock macOS screenshots feel broken.

Explore →
Chapter 11 · Feedback loops

Connect with your audience at every phase.

Look for ways to gather feedback continuously — not at the end. These three tools turn a one-off review into an ongoing conversation.

Miro

An infinite collaborative whiteboard for retros, journey maps, and workshop-style feedback sessions.

Explore →

Mural

Think and collaborate visually. Great for distributed teams running design sprints or shared ideation sessions.

Explore →

UserTesting

Watch real people use your prototype out loud. The fastest way to turn guesses about behavior into observed behavior.

Explore →
Chapter 12 · Design with AI

Think out loud. Watch it take shape.

A new generation of AI tools lets you describe an idea in plain English and see it become a visual, a prototype, or a working concept in minutes. We use them to brainstorm, visualize, and pressure-test ideas long before a single frame hits Figma.

Claude

Our go-to for brainstorming, writing specs, drafting copy, and generating working prototypes in HTML. Describe the concept — get back something you can click.

Explore →

Figma Make

Generate editable Figma frames from a prompt or a screenshot. Great for turning a rough idea into polished visual comps without starting from a blank canvas.

Explore →

Midjourney

Image generation for moodboards, illustrations, and hero art. We use it to visualize scenes and characters that don't exist yet — a shortcut from idea to reference.

Explore →
Side note · Vibe coding

Describe an app. Get an app.

Vibe coding is a new way of building software: instead of writing code line-by-line, you describe what you want in natural language and let an AI assistant write, run, and refine it. It's the fastest path from a rough idea to a real, clickable prototype — perfect for learning experiences where the concept matters more than the stack.

Full-app builder
Lovable

Type a prompt, get a deployed web app with a database and auth wired up. Ideal for standing up a working demo in an afternoon.

lovable.dev →
AI code editor
Cursor

A code editor built around AI pair-programming. Chat with your codebase, refactor whole files, and ship features with natural-language edits.

cursor.com →
Terminal-native agent
Claude Code

Anthropic's coding agent that lives in your terminal. Point it at a repo, describe the change, and it edits files, runs tests, and commits — great for real project work, not just prototypes.

anthropic.com/claude-code →
Chapter 13 · Further reading

Four books to open your eyes.

A short list of books we come back to — for expanding imagination, learning how people actually interact with things, and running projects that actually ship.

The Design of Everyday Things book cover

The Design of Everyday Things

Don Norman

The foundational text on why well-designed objects feel effortless and badly designed ones make us feel stupid. Norman's ideas on affordances and signifiers quietly shape every interface we build.

Find on Amazon →
Don't Make Me Think book cover

Don't Make Me Think

Steve Krug

A short, funny, ruthlessly practical guide to usability. Krug shows how to strip the friction out of a screen so people can focus on what they came to do — read it in a weekend, reference it for years.

Find on Amazon →
Creativity, Inc. book cover

Creativity, Inc.

Ed Catmull

Pixar's co-founder on building a culture where ideas can be wrong, messy, and still eventually become Toy Story. A playbook for leading creative teams and protecting the work from its own early ugliness.

Find on Amazon →
Sprint book cover

Sprint

Jake Knapp

Google Ventures' five-day method for answering big questions with a prototype and real users. The closest thing we've found to a repeatable recipe for moving fast without guessing.

Find on Amazon →
↑