A wireframe is the blueprint of a website or app. It is made of grey boxes and placeholder text, and it shows where the headline, the menu, the product image or the buy button will sit on a screen. It has no colour or photos yet, and that is intentional. The name comes from the way the sketch resembles a structure bent out of wire.
With a colourful design, the conversation almost always drifts towards the looks. The blue is too dark, the photo is not quite right. With a wireframe these questions simply do not come up, so everyone can focus on what matters at this stage, which is whether visitors find what they are looking for and get the information in the right order.
What we decide on the wireframe
- Which pages there will be and how they connect
- What goes into the top, most visible part of a screen
- How many steps a purchase or an enquiry takes
- Where an explanation is needed and where a short label is enough
For a website, wireframes are usually made for the main page types, for example the homepage and a service page, because the other pages are built from these patterns. For an app or a complex webshop we draw the whole process, screen by screen, so that no step is left out.
If the mobile and desktop views differ in a meaningful way, we make wireframes for both. The mobile version often reveals that an element which fits comfortably on a desktop ends up three scrolls away from the important content on a phone, and it is better to see this early in the design.
Every change on a wireframe is cheap. Moving a box takes a few minutes, while the same change in a finished design or on a page that has already been built can take days. That is why it is worth talking the questions through here and only moving on once the structure is clear to everyone.
A wireframe can later become a clickable prototype on which the flow can be tried out, and the UI design, meaning your brand's colours and images, is built on top of the approved structure. If you design with us, we go through the wireframe together and finalise it based on your feedback before choosing a single colour.
