Going to straight to high-fidelity is an epic waste of time, money, and resources. Wireframing and rapid prototyping ensures that we iterate and validate our ideas first.
What you'll learn
- How to waste time/money
- Paper prototyping
- Four-step sketching
- Gathering feedback
- Wireframe tools to use
How to Waste Time and Money
Consider this scenario:
We design an app or website. We invest everything—time, money, resources.
It looks amazing. We release it, but it tanks. People hate it.
It’s confusing, frustrating, the outcome includes nothing but bad reviews and uninstalls.
When design goes so spectacularly wrong, it’s usually because of the following:
- We didn’t brainstorm enough ideas
- Excitement took over, we rushed into things
- We focused too much on visual design
- We didn’t start with wireframe tools
- We didn’t conduct user/usability testing
- We didn’t collect feedback often enough (or at all)
By navigating down one pathway without considering what lies at the end of the other pathways, we could end up at the wrong destination, wasting valuable time, money, and resources. Enter the exciting world of wireframe tools and rapid prototyping 🎉.
What is Rapid Prototyping?
Rapid prototyping is a design process involving brainstorming, sketching, iteration, creating UX wireframes, and using creative energy to visualize as many ideas as we can in a short space of time. Feedback/user testing is then used to validate those ideas.
Rapid prototyping is about navigating these pathways to see where they lead, but not adventuring so far that it’s difficult/too late to turn back. Design, sadly, does not come with a map, so rapid iteration allows us to consider all the routes before choosing one.
We call it rapid prototyping because it’s a fast-paced, quick, iterative process—we mockup the most basic version of our design using very limited time and resources, building just enough that users can test it. It’s also known as low-fidelity prototyping.
Low-fidelity prototyping involves rapid prototyping UX wireframes or simple sketches, but usually it’s both (starting with sketches, and moving up to wireframe tools later). After that, we dive back in, making improvements as needed, adding a little more fidelity with each iteration. Eventually, we’ll end up with a high-fidelity prototype.
Going straight to high-fidelity is often disastrous 🤯.
Start with Paper Prototyping
Designers often start with paper prototyping because it’s quick and easy. These sketches can be freehand, or we can use what are called UI stencils or wireframe stencils, as shown in the example below by Grapefruit. The benefit of wireframe stencils is that we can hold them, to experience our design more realistically.
What Problem Are We Solving?
With visual design of no concern to us right now, we’re left to focus our creative energy on the problem. Assuming that user research has been conducted, most notably, customer development, we’re designing this app or website because users need it.
Why do they need it?
What problem does it solve?
Sketching begins with the main storyboard, and answers the question: “how do users solve their problem using our app or website?” It’s a safe bet that the Terms of Service (for example) won’t contribute heavily to the user’s objective, so this wouldn’t be included in our main storyboard. We could totally include it in our sitemap (which comes later), but not our main storyboard. Our main storyboard should be ~3 screens.
Below: a storyboard sketch by Anthony Lagoon.
How to Approach Rapid Prototyping UX
Rapid iteration is supposed to be quick, but very insightful, and one of the best approaches is what’s known as the Four-Step Sketch. This activity usually happens on Day 2/Tuesday of a design sprint, a methodology invented by Jake Knapp at Google Ventures used to quickly validate ideas through rapid iteration and user testing.
It follows these four steps:
- Step 1: take notes for 20 minutes
- Step 2: sketch some rough ideas for 20 minutes
- Step 3: sketch 8 variations of the best idea for 8 minutes
- Step 4: turn it into a simple 3-step storyboard (30-90 minutes)
Gather Feedback Early, and Often
Even at this stage, collecting feedback (not necessarily from users, but from team members at least) can offer valuable insights. In fact, the more hands on deck…the better. Brainstorming works best when it’s a team effort, so have some sticky notes ready, and start talking to one another! Sketch → feedback → sketch → feedback! ✍️
Keep sketching and validating to boost confidence in the solution.
How to Create UX Wireframes
A wireframe is the skeleton of our design (they’re usually colorless). Wireframes mockups can be sketches, but they can also be digitized using UX wireframe tools (either way, they’re still comparatively low-fidelity). They can depict a storyboard (as shown earlier), a user flow (or multiple flows), or they can illustrate an entire sitemap.
Designers can switch from sketch to digital whenever they want—a sketch doesn’t have to mean low-fidelity, and a wireframe doesn’t have to mean more detail.
Below: a relatively detailed wireframe sketch by Eddie Lobanovskiy.
But, that being said, when adding fidelity, sketches naturally become harder to maintain, share, and reuse, and this is where we’d typically begin to use wireframe tools, and start to think more about the overall app or website user experience.
In a nutshell, we need to consider usability (how easy is it to navigate the UI?), accessibility (is the user interface accessible to all users, regardless of disability?), information architecture (how well-presented and well-structured is the information?), and the sitemap (can the user easily and quickly find what they’re looking for?).
And the same concepts apply: iterate → feedback → iterate → feedback.
Majority of design tools have device preview features, allowing designers to conduct usability testing on real devices with real users (or at least ourselves, to begin with).
On that note, let’s discuss tools.
Best Wireframe Tools
Wireframe tools have somewhat standardized features compared to other types of screen design tools; after all, they’re designed to fulfil only one objective…to help us mockup low-fidelity prototypes. That being said, they do have minor differences.
All wireframe tools have a library of readymade UI components to help us quickly mockup apps and websites, and most ship with collaboration and user testing features to help teams rapidly collect feedback and useful insights from real users early on. Some tools also offer features to help with flowcharts and user flow diagramming.
When it comes to digitizing mockups, these are the best UX wireframe tools:
Balsamiq is a rapid prototyping tool focusing solely on UX wireframes, allowing designers to iterate sooner, user test early, and create web and app mockups using their “sketched-out” visual aesthetic that reminds us to save the visuals for later.
Compared to other UX wireframe tools, Balsamiq is lightening fast!
Although Axure includes much of the same wireframe UI components as Balsamiq, Axure is the better choice for data-driven mockups, making it ideal for experimenting with the information architecture. 87% of the Fortune 100 companies can’t be wrong!
All in all—less rapid, but more powerful.
OmniGraffle is a wireframe tool with diagramming features, making it suitable for prototyping user flows and experimenting with IA beforehand. OmniGraffle’s interface utilizes the macOS GUI, so macOS users will feel quite at home using OmniGraffle.
Moqups is an online mockup tool, but not one that feels uncomfortably laggy, nor awkward to use. It’s extremely versatile, much like OmniGraffle, aiding designers, managers, and stakeholders alike with user flow diagramming and UX wireframing.
Whimsical is the new kid on the block, although it’s already attracted exceptional reviews from the likes of Shopify, InVision, Microsoft, and us! Whimsical is the first wireframe tool to truly master quick lookup of icons and configurable elements.
Whimsical also enables real-time collaboration, and it’s very keyboard shortcut-friendly. It’s easy to see Whimsical rivaling Balsamiq in terms of speed, later down the line.
Bonus: beautiful diagrams and flowcharts right out of the box.
Complete with design systems, design handoff, and UI design tools in addition to prototyping and wireframe tools, UXPin is a full-stack UX solution for designers. Unfortunately, this many features in one web-based application makes the app slow and frustrating, but if you have the juice, it’s a mighty tool for serious UX designers.
Justinmind is the ideal balance of wireframing and high-fidelity prototyping. It’s less ambitious than UXPin, but on that note more effective and more delightful to use, helping designers create what borders on the concept of higher-fidelity UI wireframes.
Other Wireframe Tools
Rapid Prototyping Tools
Although not strictly for wireframing, these rapid prototyping tools are built for both low-fidelity and high-fidelity prototyping, useful for those designers who’d rather save a few bucks and/or keep their entire design workflow under a single subscription.
Sketch is the #1 UI design tool in terms of number of users, surpassing Photoshop in 2015. It’s arguably one of the fastest ways to design user interfaces, although, with the absence of drag and drop UI components, it’s not technically a UX or UI wireframe tool.
We can change that with Sketchframes—check it out 👏.
Adobe have really turned themselves around in the UI design space, introducing Adobe XD complete with UI design, interactive prototyping, and even design handoff features. While not strictly a wireframe tool, Adobe XD have made wireframe UI kits available.
If you’d like to read this article (and more) in ebook format, download A Beginner’s Guide to Designing UX to learn more about full-stack user experience design 💪.
Daniel Schwarz is a UX/UI designer, web developer, and maker by background, but a writer, editor, 5x author, and teacher at heart. Currently a design blog editor at SitePoint (ex Toptal), writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.