Some of us remember the Power of Love tune while watching Marty McFly rock his guitar in Back to the Future. As incredible as that sounds, this post isn’t about the Power of Love…rather the Power of Wireframes. Not as “hooky” of a title, but more powerful when creating a new website or app.
Wireframes are often one of the most overlooked phases when creating a new site or app.
As designers, creating a wireframe is not the most “fun” part of our job. Technically, wireframes are very easy to create. Strategy-wise, they’re one of the more valuable steps in site creation.
We use wireframes for all of our projects. This post gives a quick rundown of wireframes and why we use them.
There are many wireframing tools available online. Here are a few: Balsamiq, UXPin, Moqups (our preferred tool)…and believe it or not, some folks even use PowerPoint.
What is a wireframe?
A wireframe is what we use to show the web page as a blueprint. It’s usually a black and white “boxy” layout showing the flow of the page or app. The wireframing steps happens before we send a graphic mockup to the client. Below you’ll see the wireframe used in one of our recent projects. The full graphic mockup is on the right.
Again, not the most creative item to create.
Why use wireframes?
A wireframe strips away the aesthetics of the site and leaves the layout of the page. This ensures the layout of the page addresses the goals for the page.
When looking at the layout free from aesthetics, we see the structure of the page. Is the call-to-action clearly displayed. Are we telling the right story as the user scrolls down the page?
When looking at the wireframe together, the client and designer can quickly and easily edit the layout of the page to meet the goals of the page.
A wireframe decreases overall project time. It’s much easier to edit a layout during the wireframe phase…rather than inside Photoshop or during development.
Wireframing is one of the tools we use to ensure your site exceeds your expectations.