Wireframes are the meat of the design sandwich
When most people think about an app’s design, they think about colours, fonts and images. And truly, that is part of the design. But only part. Let’s call it the top slice of bread. The bottom slice of bread is the structure, how all the pieces in the entire system fit together to move a user through it.
But as far as the overall user experience goes, the interaction design layer, usually represented by wireframes, is the design sandwich’s meat. It’s where the user experience lives and dies for any app.
You can think of the interaction design layer as the screen level layout. It’s the relative placement of all the things a user is meant to interact with and how they will behave when that interaction happens. This means everything from the number and sizing of fields in a form to the buttons, their size and where they are placed. It also covers how and where calculations might happen on a page, to where you send people for more information (pop-up, now page, in-line tooltip, etc.).
In the same way that the System Map sets the foundation for the interaction design layer, the wireframes will set the visual design foundation. There are several excellent reasons to wireframes first (check out the two links below). The short answer for us is that as we move from rough pencil sketches to low fidelity wireframes and then high fidelity wireframes, we are working out the problem in finer and finer detail. It’s a bit like the difference between the writing you do in your head and actually sitting down and composting that important email. In your head, it seems great. While you are writing, you discover all these things you need to explain or clarify.
Learn more about why wireframing is an important part of the design process:
Why wireframes are important in the design process.