A user flow is the path a person takes through your site to finish one task, drawn as screens, actions and decisions joined by arrows. A wireframe is a plain sketch of one screen's layout. Map the flow first, then wireframe each screen in it. Below are eight common flows and three wireframes to download as SVG.
| Shape | Means |
|---|---|
| Rounded pill (blue) | Where the flow starts |
| Square box | A page or screen |
| Grey box | Something the person does, such as filling a form |
| Diamond | A decision or a check that can fail |
| Rounded pill (green) | The goal is reached |
Updated
Each flow keeps to one goal and the fewest steps that reach it, with the most common failure drawn as a dashed loop. Use them as a starting point for your own site, then wireframe the screens they pass through.
A visitor creates an account and reaches their first useful screen.
A shopper pays for what is in the cart.
A new client books a first appointment.
A member who forgot their password gets back in.
A prospect sends a question and knows when to expect a reply.
A reader subscribes and confirms.
A shopper finds a product from the search box.
A local customer asks for a price for a job.
Say what you do, prove it and point to one next step.
Let people compare plans and pick one without contacting you.
Make it easy to reach you and clear when you will reply.
Pages designed one at a time tend to work alone and fail together. The pricing page looks great but has no clear next step; the signup form asks for things the checkout asks for again. Drawing the flow first shows every hand-off between screens, which is where most people drop out.
A flow also makes the cost of each extra step visible. When a booking takes nine boxes on paper, it becomes obvious which ones can merge.
Once the order of content is agreed, the wireframe becomes the brief for the real design. Each grey block turns into a section with its heading and copy, and the labels in the corners become the section names you use with your team or your site builder.
A user flow maps the screens and steps of one task on your site. A user journey is wider: it covers what someone thinks, feels and does before, during and after using your product, often across several channels. Flows are for designing screens; journeys are for understanding people.
Download the file and drag it onto a Figma canvas, or open it in a browser, copy and paste. Figma turns the shapes and text into editable layers you can restyle and extend.
Enough to show what is on the screen and in which order: navigation, headings, images, forms and buttons. Leave out exact copy, colours and fonts. If people start discussing the shade of blue, it is too detailed.
No. Paper and a pen are fine for a first pass. Diagram tools help when you want to share, edit or keep flows alongside designs, and plain SVG files like these work in most of them.
Related: Website structure, Website layout examples, Website ideas, Website mockup generator, How to create a pricing page.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.