FreeStack guideWeb & code4 min

Make a three-screen prototype before you build the app

Use Excalidraw and Penpot to test the start, the action and the result before committing to implementation.

By FreeStack editorial

What you’re working towards

A simple clickable route with an empty state, an action and a useful result.

You do not need a complete design system to learn whether someone understands an idea. Work on one journey that a person could finish in a few minutes. The sample below is a fictional project board created for this guide.

Free boundaries before you start

Source checks for this workflow. These notes clarify older catalogue summaries; they do not change your saved toolkit.

Excalidraw · checked 2026-10-13

Free browser whiteboard with local saving and PNG, SVG and editable file exports. The manual guide does not use AI credits. Excalidraw Plus is a separate paid workspace for cloud organisation. The editor software is MIT-licensed; hosting and imported assets have separate terms.

Account requirement not confirmed in this source check.

Penpot · checked 2026-10-13

Professional hosted plan is $0: core tools, up to 8 team members with unlimited viewers, up to 10 GB storage, 7-day autosave history and 7-day file recovery; files remain limited by storage. MPL-2.0 repository software; hosted service terms apply separately.

Account required for this workflow.

PICTURE THE RESULT

A small example to aim for

01Choose

Pick one small project.

02Do

Complete the main action.

03Confirm

See a clear saved state.

FreeStack example output · illustrative, not a provider screenshot or a tested export.

Jump to a step

Choose the moment that matters

Write the user’s starting problem and the result they need. For a project board, the task might be adding a job and identifying its next action. Leave billing, integrations and team administration outside this experiment. Put the exclusions beside the brief.

Sketch the three states

Draw the starting screen, the input or action, and the successful result in Excalidraw. Include a blank list and a recoverable mistake. Use realistic button labels, not placeholders such as “Click here”. Ask whether each screen makes the next step obvious.

Make the path clickable

Build the screens in Penpot and connect them using its prototyping features. Use one type scale and a small set of colours. Add just enough detail for a visitor to recognise the task. A static success screen is a prototype, not evidence that data is stored.

Watch one person try it

Give someone the task without explaining which button to press. Note where they pause, what they expect and whether the result answers their question. Change the most important obstacle first, then try again. Record unresolved behaviour before handing the design to development.

THE BUILD AT A GLANCE

Your workflow, connected.

Follow the steps and carry the output into the next stage. These are suggested handoffs, not automatic integrations.

01Define the test
Start with a plan
A focused task
02Sketch the route
Excalidraw
Three screen sketches
03Connect the screens
Penpot
Clickable prototype
04Observe & revise
Review & finish
A clearer journey

Provider information

Check current plans and documentation before committing to a workflow.

View 2 provider links

A couple of useful questions

Does it need to look finished?

Only polished enough to test the question you are asking. Visual detail is useful when it affects trust or comprehension.

How many screens?

Start with the smallest complete journey. Add a screen only when the task cannot be understood without it.

What would you try?

Share your result or ask a specific question about this workflow.

Join the conversation