Wireframes: skeleton first, skin later
22 de September, 2026 · Design
Before choosing colors and photos you need to decide what goes on each screen and in what order. This is how we work on a site’s structure and why it saves you time and money.
Nobody builds a house by picking the tiles first. First come the blueprints: how many rooms, where the door goes, how people move through it. On a website, those blueprints are called wireframes, and they’re one of the stages that add the most value to a project, even though the client almost never sees them published.
What a wireframe is
It’s a black-and-white sketch of each screen, with no photos or final colors. It shows what content goes where, in what order and with what importance: where the heading is, what the main button says, which sections follow, what someone arriving on a phone sees first.
By taking visuals out of the equation, the conversation focuses on what matters: whether the page achieves its goal.
Why not jump straight into design
- Changes are cheap. Moving a section in a wireframe takes minutes; doing it once the design is finished or the site is coded takes hours.
- You discuss the right things. When there are colors and photos, meetings drift into “I don’t like that blue”. With a wireframe you talk about structure, messages and journeys.
- Missing content shows up. Sketching each screen quickly reveals which texts, photos or data need to be gathered, avoiding the classic “lorem ipsum” that survives until launch.
- Everyone understands the same thing. Client, designer and developer look at the same blueprint.
Our process
- Briefing and analysis. Understanding the business, the audience and the goals before drawing anything. What should happen when someone visits the site?
- Information architecture. The site map: which pages exist, how they’re grouped and how you reach each one. This is where the menu is defined.
- Wireframes. Key screens in low fidelity, starting with the mobile version. Reviewed with the client and adjusted.
- Visual design. With the structure approved, we add the skin: brand identity, typography, photos, animations.
- Prototype. On more complex projects, we build a clickable prototype to test the journey before coding.
- Development and testing. Only then is code written, with everything important already decided.
What to look for when reviewing a wireframe
If you have to approve one, don’t worry that it “looks ugly”: that’s on purpose. Ask yourself:
- In the first few seconds, is it clear what my business does and for whom?
- Is the main action (contact, buy, book) easy to find?
- Are the questions customers always ask me answered?
- Is there anything that doesn’t need to be there?
- Does the order of the sections tell a story that makes sense?
Good visual design makes a site look good. Good structure makes it work.
That’s why at PuntoArg we never skip this stage, not even on a one-page site. If you’re about to start your website, let’s begin with the blueprint.
