Laboratorium Design Thinking

PLEN

App mockups

From a sketch to a clickable prototype in minutes, with AI’s help too.

See the tools ↓
Show QR code

Illustration for app mockups

Mockups and prototypes

The aim of prototyping is to test a solution as quickly as possible and learn which direction is worth developing. We work in three steps, from the cheapest to the most polished. App mockups are the middle rung of that ladder.

Step 1 · hours to daysPretotype

“We pretend it exists.” A test of interest at minimal cost. For example, you print sheets with a task for the day, hand them out to students and check how many complete it.

Step 2 · days to weeksLo-fi prototype

“We show how it could work.” Basic functionality from cheap materials, where what counts is that it works. For example, a paper mockup of an app moved by hand, or a sketch in a mockup tool.

Step 3 · weeks to monthsHi-fi prototype

“We build a version close to the final one.” A clickable app with the key features, in which the user goes through the whole process. This step often goes beyond university classes.

Mockup tools

Step 1Pen and paper

A few minutes are enough to draw the interface and the user journey. Great for iterating on ideas quickly.

Digital mockupsBalsamiq

A screen-sketch editor built from ready-made elements. It makes it easy to check the information structure quickly and share it with the team.

Digital mockupsWhimsical

A lightweight editor for mockups, flowcharts and mind maps, handy for working together as a team.

With AI’s helpFigma Make

Creates interactive prototypes from a description in natural language. You can refine the result in the standard Figma editor.

With AI’s helpGoogle Stitch

An interface generator from Google Labs. It sets a consistent look and then creates further screens.

With AI’s helpClaude Design

Prototypes, slides and one-pagers created in conversation with Claude.

As of September 2026. Tools change fast, so check current plans and limits before you choose.

How to work with a mockup in class

  1. 1Go back to the How Might We questionBefore anyone opens a tool, remind the team who they are designing for and why.
  2. 2Draw the vision on paperEach person puts their idea on sticky notes and shows how they see the solution. The clash of visions builds a shared idea.
  3. 3Build a shared mockupCombine the notes into one model of the user experience, then move it into a mockup tool.
  4. 4Test it with usersAsk the people you are designing for to walk through the prototype, and draw conclusions for the next version.

What to be ready for

LooksA prototype answers a question

What counts is whether the idea solves the users’ problem, and looks come second. A prototype should answer one or two key questions.

ScopeA simple, testable version

Teams love adding more features. Keep reminding them about the core functionality and a quick, cheap version to test.

First versionFailure is information

The first prototype rarely dazzles. Each iteration gets closer to the final version, and lessons from a failure can be worth more than a success.

Resistance“I can’t draw”

For many students this is one of the few chances to build something tangible. Simple tools, paper and AI help turn an idea into something real quickly.

How AI supports prototyping

VisualsStoryboards and screens

Image-generating models create visuals of usage scenarios, interfaces and product looks from a description.

CodeVibe coding

AI turns a description into working code, which lets you build interactive mockups without programming. The generated code is worth verifying.

ContentPlaceholder copy

AI quickly writes product descriptions, articles and posts, so the mockup looks realistic.

More design tools

DiscoverDefineAI tools