Wireframe

A wireframe deals with structure. It uses grey boxes, lines and plain labels to show which pieces of content and which controls a screen holds, which come first, and what sits behind a click. Leaving out colour and type is deliberate: it keeps the review on whether the screen works.

Fidelity varies. Some wireframes are sketches on paper, others are tidy greyscale screens in Figma with real labels. They come after the flows are agreed and before visual design, and a set of them is often linked into a wireflow, which shows how one screen leads to the next. Once the structure holds, the wireframes become finished designs, and the finished designs become a clickable prototype or the build.

Moving a table above a chart takes a minute in a wireframe and a week once the screen is designed, built and reviewed. Wireframes let a team test structure while it is still cheap to change, with stakeholders and with the people who will use the product. They also keep the visual debate for later, so feedback on the first round is about what is missing and where it sits.

Wireframes come after the flow and before any visual design. We trace the task through the product first, then draw the screens it needs, so navigation and hierarchy get tested while they are still cheap to move. We fill them with real content: the longest title, the most detailed record, the field that is sometimes empty.

We test them with representative users where the scope allows and check feasibility with your engineers. Once the structure holds, we design every screen on your content with its loading, empty and error states, and the components your developers build from. A focused piece of product design on one area takes four to six weeks, and product design starts from $10,000 a month.

Say a finance team is redesigning the screen where managers approve expense claims. The first wireframe puts the approve button beside each row. A manager reviewing it points out that she approves claims that break policy without noticing, because the warning only appears after she clicks. The second version shows the policy flag in the row and puts the warning directly above the button. Nobody has chosen a colour yet.