Wireframes • The Whitespace Design Process

Phase 3 – Wireframes

Wireframes – the foundation of pretty much any design project. When we start a new project from scratch without ay established views to start from we first need to create wireframes. This is where we make content structure, user flows and functionality tangible. We are able to more clearly visualize the structure of what we’re building; in general but also more specifically how the user moves through it.

Wireframes, in some way or form, are usually necessary but in projects where time is a large factor or the structure in and between views isn’t going to change, it can be skipped. Examples of such projects are Municipio-projects where the technical stuff is already there and aesthetical changes are more prioritized than functional ones.

Sketch Workflow

Check out [Sketch Workflow](/docs/design/sketch-workflow) when you're ready to get started. There we'll get into how you should set up your project. Structure, naming, templates, symbols – all that fun stuff.

Iterate, iterate, iterate!

The point of wireframing is to quickly iterate through various ideas and land in the best structure for the project. Wireframes need to be clear and well thought out, yes, but to get there you need to be able to work fast and iterate often.

Choose your tool accordingly. Often times paper and pen is more than good enough but for people allergic to physical objects we also have Balsamiq and Sketch. See the "Resources" page for templates to use.