Wireframes
A wireframe is a planning document shared across a project team, not just used by the person who draws it. Several different people read the same wireframe, each for a slightly different reason, so the layout and the labelled links or actions between screens must be clear enough for all of them to follow.
| User | What they get from the wireframe |
|---|---|
| Website designer | Plans the layout of each page and the navigation, so visitors can move between pages in a sensible order. For example, a designer mapping out the pages of a school summer fair site decides where the ticket button and the stall list sit. |
| Website developer | Builds the finished pages, so the wireframe shows which components are planned and where they sit. This helps them follow the planned layout rather than invent one. |
| UX designer | Checks the user journey: whether someone can find what they need, and whether each screen is easy to use. They read the links and actions to spot a confusing route before anyone builds it. |
| App designer | Plans the screens of an app, such as a swimming pool timetable app, and settles where the buttons and lists go. |
| App developer and app programmer | The app developer works out what must be built, and the app programmer turns each planned screen into a working one. |
These users fall into two groups. Designers, UX designers and app designers plan with the wireframe; developers and programmers build from it. Both groups depend on the same thing: the intended layout, and the links or actions that connect one screen to the next, understood before production begins. That is why a wireframe is deliberately plain rather than a finished visual design, as covered in Components and Conventions of a Wireframe.
OCR Creative iMedia · Wireframes