Low-fidelity screens with numbered notes, for agreeing what goes where before design starts.
A wireframe is a drawing of where things go, kept plain on purpose so the talk stays on order and wording instead of color. Linden Yard's booking flow, for a made-up clinic, is four phone screens with fifteen numbered notes. They're drawn in HTML and CSS, so the link opens on a phone at real size.
Who it's for
Designers and founders who need a yes on the flow before anyone spends a week on visuals. Send it to the client who approves the work and to the developers who'll build it.
It's the wrong tool once the argument is about real pixels: if the team already shares a design file, draw there. A page also can't take comments, so say on it how to reply. This one asks three lettered questions with a date.
What a good one contains
- One flow, start to finish. Four screens take a patient from choosing a visit to "You're booked". A wireframe of a whole app gets skimmed.
- Grays and nothing else. Once a screen has a brand color, the feedback is about the color.
- Real words where the words are the design. "30 min · $70" is written out on the follow-up row, because whether a price belongs there is the question. Text that can wait is a gray bar.
- Numbered pins in one accent. Fifteen red pins sit on the screens, each with its note underneath.
- A reason in every note. "Mobile number, not email. The reminder is a text the day before, and it carries the cancel link." A note that only names the element tells a developer nothing.
- An awkward case, drawn. Screen 02 has a closed day and leaves full slots off entirely. At this stage an edge case costs one extra box.
- A key. Four lines explain the gray bar, the crossed box, the dark button and the pin. Most clients have never read a wireframe.
- Decisions, a deadline, and what's left out. The three questions come with a reply-by date, and a list beside them says online payment isn't in this version.
Rough screens, notes that argue
Pretty wireframes fail. Round the buttons, add a soft shadow, and the client thinks it's nearly finished and asks for a bigger logo. If a screen looks done, take something away.
The other failure is notes that describe instead of argue. "Only free times are drawn" gives the client something to disagree with, and disagreeing at this stage costs minutes.
When the flow changes after their reply, replace the page and keep the link. Mark the round at the top, as this one does with "round 2".
How to send it
With a password. These are screens of a product nobody has announced yet. One password is easy to hand to the client and to the two developers who will build it.
Every page you publish gets one link that opens in any browser. You choose who can open it: anyone with the link, anyone with the password, or only the people and company domains you name, who sign in with Google or Microsoft. Change the page later and the link stays the same.
