Wireframing vs. Prototyping and Everything In-Between

So, what is a prototype and why is it important?

Prototyping demonstrates ideas, and baking prototyping into your workflow can begin to shift the way you think and approach design problems as a whole. Consider prototyping as the final test - Does a specific simulation of the final product and interaction between the user and the interface work? Does it make sense? Is it intuitive? Does this specific interaction solve a problem? Prototyping answers all of these questions for you, the client, and the project - It ultimately puts the usability of the interface to the test before the development gets tagged in.

Why and when to use them?

Design and all of it's processes are simply a means of communication. Wireframes, prototypes, design comps, mockups. These are all dialogue in the conversation with your users.

I apologize ahead of time, but I'm a sucker for a good metaphor. So, hear me out ...

Let's think of design as a house.

When you first go to build a home from the ground up, there is nothing more than a vision. You may have some inspiration to go from, best practices, themes in mind such as it needs to be energy efficient, or it has to have a bathroom in the basement. But think about it this way ... It all starts with a massive hole in the ground. It's a process to get to what you were envisioning..

Wireframes are the blueprint: Wireframes organize the information on the page. They give an outline for layout, begin to convey direction, hierarchy and information architecture. Wireframing should be low fidelity and to the point. No colors, no design elements, no polish. Simply strategy.

Your design comps are your visual representation: While a wireframe mostly represents structure, a comp shows how the product is going to look. These designs (like wireframes) are not clickable. You are identifying color scheme, visual style, typography, photo treatments, patterns and experimenting with the visual side of the product. Think of it as picking paint colors, choosing finishes, and shopping appliances.

Your prototype is high fidelity representation of the final product. You are taking the visual identity you have built and considering all of the user interactions. How will a user navigate the product, how can you make things as easy and seamless as possible? Prototyping is done in a number of different platforms, but most importantly, there is no back end or development needs. It allows design to test interfaces, validate through user testing and receive approval on decisions before development gets to building. This translates into saving time, money and effort in future phases. Would you choose the color of a room for your house without consulting your significant other? Of course not. Prototyping will allow you to test paint colors before you commit.

Recap

Each step is necessary and each step tests, validates and/or drives a crucial decision along the way. Both wireframes and prototypes serve distinct roles in the design process and communication with your user. Wireframes are your base and construction plans of what you’re building. Prototypes are a visual representation, they are suitable for public consumption/viewing before you give the builders final sign-off. Both are very important and one should not replace the other.

So, lets talk about tools:

There are TONS of tools and applications out there that allow virtually seamless wireframing-final product functionality, in fact, some even provide you with HTML and CSS at the end. But, they all have their advantages and disadvantages. Often times, I prefer the more specialized tools that are meant for one specific purpose (be it wireframing, designing, or prototyping) but, you may see it differently. Below is a short list of ones that I recommend exploring:

Wireframing: Good ole pen and paper, Balsamiq, Sketch, Freehand by Invision, UXPin​

Prototyping: Invision , UXPin, AdobeXD, Sketch, Craft | Invision (plugin for Sketch)

(See here for some of my FAVORITE UX RESOURCES FOR PROTOTYPING)