Author’s note: This is the second of three articles about wireframes and mockups. The last article covered what wireframes and mockups are, this article discusses when to use wireframes and when to use mockups, and the last article will cover how to do wireframing and how to do mockups.

So you have a website or mobile app project you want to complete. Now the question is, should you do wireframes, mockups, or both for your software project?

The answer, in our opinion, is you should always do mockups for every project, and you should do mockups and wireframes for projects with any complex functionality.

Mockups are great to have for every project. Even if you are doing a simple WordPress website, it’s a great idea to make some simple mockups for the home page, about us page, and any other custom or graphic intensive pages.

For more complex sites, you will want to create a mockup for each different type of page throughout the site. You will want to do this mockup in conjunction with a style guide and pay special attention to colors, fonts, font sizes, and spacing.

Wireframes are not required for a simple project, such as a WordPress website, as simple sites don’t have a lot of unique functionality that needs to be defined. For a simple project instead of a wireframe you can normally get by with just a written sitemap with comments about page content on it.

However, for a complex webapp or for any mobile app, you will definitely want to build out wireframes. And to do it correctly you should wireframe every single page type on the entire site and hyperlink them all into a complete wireframed site.

For example, if you were going to do wireframes for the Google site, you would first mock up the login page, as in the example below.

Mockup Example – Goodle Login Page – Courtesy of Balsamiq.com

Next, you would mock up the Inbox page, because this is the first page you would see after logging in.

Mockup Example – GMail Inbox Page – Courtesy of Balsamiq.com

From there you would mock up pages showing what happens you click on every button, icon, or hyperlink, so that you show exactly how it functions and where it goes. For example, if you click on the filter icon in Gmail, then it would go to a page like the one below.

Mockup Example – GMail Inbox Page – Courtesy of Balsamiq.com

Many prospective customers tell us that they don’t have either the time or money to wireframe every page. We always tell them that unless you have infinite time and money then they must wireframe every page. If you don’t wireframe every page then you are going to run into problems down the road, just like if you tried to build a house without a blueprint. And just like a house, it costs 5x or more to rebuild something you already built, when compared to making a change in a blueprint.

Please be sure to read our next blog post on how to do simple wireframes and mockups