Before a house is built, there are blueprints. Before a vacation, there is an itinerary. Before your video game team rushes in, there is a coordinated attack plan. Okay maybe not so much that last one, but you get the idea. For things to go well, a plan is required.
When we begin designing the architecture, experience, and interactions for software, there are typically two levels of plans used: a highly-detailed, more refined prototype, or the moderately-detailed, flexible wireframe.
Both wireframing and prototyping have strong use cases, and we use both at Vehikl depending on the project, budget, and client.
Wireframing
There are people who believe that wireframing is dead due to an ever-growing, discerning population of people with a critical eye for what makes a good or engaging app. Depending on the type of client and project you’re working on, wireframing may or may not be the right solution.
Wireframing is the software equivalent of a blueprint. It’s a static representation of the site’s flow, relationships between blocks of elements, and what UI elements will be used.
The less time I spend on an idea, the less attached I’ll be.
The main use-case for wireframing is that because it’s fast, it is also inexpensive. Wireframing can be done as simply as with pen-and-paper or a whiteboard. Hand-sketching (yes, even you can sketch!) is the most efficient way to create and validate several ideas quickly.
Spending time planning out all the nuances are usually unnecessary for the first iterations of most MVP projects
What wireframing does is allow you to express ideas free from the technical investment required with creating ideas with HTML and CSS. It also carries less emotional investment. “The less time I spend on an idea, the less attached I’ll be,” says Treehouse’s Nick Pettit. “This is good in the early phases because I don’t want to settle too soon. Now is the time to explore all the possibilities.”
Another key benefit of wireframing is the ability to design on a meta level without being distracted by the fine details of what will exist in the final product. Spending time planning out all the nuances of interaction, typefaces, animations, or creating pixel-perfect mockups are usually unnecessary for the first iterations of most MVP (Minimum Viable Product) projects.
What about Digital Wireframes?
Sometimes you’ll run into situations where teammates, clients, or stakeholders will need more clarity than sketches on a whiteboard. Or perhaps you’re just more comfortable with a mouse than you are with a marker. Luckily, there are tools for creating digital wireframes. These tools behave a lot like physical sketches, where you are encouraged to spend less time on details (pictures, fonts, colors, etc.), and more time on validating ideas (flow, layout, etc.).
If digital wireframing sounds appealing, take a look at tools like Balsamiq Mockups, Sketch, or OmniGraffle. Each of these allows you the ease of quick idea generation while also enabling you to share online, create comment threads, and track versions of your wireframes for later reference.
When to use wireframes
For projects where the budget or deadlines are limited, wireframing can deliver all the value of a well-thought plan without additional overhead. Consider also the people who you’ll be coordinating with. Are the people who are giving you feedback engineers? Are they your in-house team? C-suite executives? End users? Depending on the audience, they may have different levels of understanding of a wireframe; use the mockup method that makes the design the most transparent to the intended audience.
Prototyping
Fully interactive prototypes have become much more widely used with the advent of responsive web design and the high demand for animations and touch interactions. Clients may expect or even demand this level of fidelity.
interactions and animations should only be designed for an MVP if they are necessary for the usability of the product
When your site’s responsive transitions and interactions are absolutely vital to the user’s experience, an interactive, high-fidelity prototype can make the design sprint run smoother as well as answer important questions about the interface that will come up later in development. It is important to note that interactions and animations should only be designed for an MVP if they are necessary for the usability of the product.
It’s easy to get wrapped up in the bells and whistles, admiring the beauty of your transitions and interactions. But it’s best to use the cheapest and most simple form of mockup that meets your goals and communicates your design.
When tablet and mobile interfaces, for example, need individual design sign-offs before development, or when interaction design is a project requirement, prototyping is the answer. Prototyping software (such as Sketch, InVision, Justinmind, Marvel, Axure, etc.) mimics the aesthetic of the final project, and enables you to validate pixel-perfect design decisions, interactions, and animations before beginning development.
What about HTML/CSS prototyping?
HTML/CSS prototyping offers a level of testing and validation in a real-world environment (as well as minimizing waste, since much of the code used in prototyping can be used also in the final product).
much of the code used in [HTML/CSS] prototyping can be used also in the final product
Front-end frameworks like Bootstrap and Foundation allow in-browser prototyping so that you can focus on perfecting things like spacing and proportions as they’ll behave in an actual web browser.
So… which should I use?
The short answer is: use the tool that makes the most sense for the project. In more detail, use as much fidelity as is necessary for the audience who will be looking at the wireframe. Here’s a handy TL;DR image for reference:
