In this article, Chris Bank of UXPin – The UX Design App details the various analog tools and medium that can be used to create wireframes, their strengths and weaknesses, and how they relate to wireframing & prototyping software like UXPin.
In UXPin’s first article in this series, A Practical Look At Using Wireframes, we covered who uses wireframes, what’s their purpose and how do they work together.
The second article, 50 Shades of Wireframes, we covered the many ways you can make wireframes, what levels of detail you can provide, and how to tie all product details together in the finishing stages. Below, we’re going in-depth on the analog tools and medium used to create wireframes, and their strengths and weaknesses, and how they relate to wireframing and prototyping software. And we’ll go in-depth on wireframing and prototyping software in the next article, 4 Digital Wireframing Weapons.
Non-Digital Wireframing Weapons
Semantics Could Kill Your Process… And Product
Over the years, I’ve heard the terms “sketches”, “mockups”, and even “prototypes” used synonymously with “wireframes.” Initially, wireframing tools were paper-only with what we now consider basic (not comprehensive) layouts. And the initial versions of digital wireframing and prototyping tools were either incredibly austere and covered the wireframing niche of product design (i.e. Balsamiq circa 2008), or exceptionally complex and bridged the product design stages, namely wireframing and prototyping (i.e. Axure circa 2003). While digital tools proliferate, the old paradigms of paper wireframing and prototyping remain, leading designers, product managers, and engineers alike to further conflate the terms used daily.
15 years since the first wireframing and prototyping software applications were built, the UXPin team sees lines between product stages – and corresponding terminology – blurring as product iteration cycles shorten, team composition and process varies more widely, and team members have more influence over communication and style preferences, and development is much more customer-centric which varies by product and industry. The bottom line is that every team develops its own unique product design process to meet their goals with the resources they have, and wireframing categorically has the best balance of structure and flexibility to accommodate myriad ways of getting the job done.
Below, we’ve laid out the most common types of analog tools and medium used for wireframing.You can also read more about paper tools in UXPin’s article Better Use of Paper in UX Design. Many pundits may disagree whether or not some of these are relevant to wireframing, but if it looks like a wireframe and smells like a wireframe, we’re calling it a wireframe. No matter what anyone tells you, you can achieve the majority of your wireframing objectives – defining product structure, content, information hierarchy, functionality, and behavior – through any of these. What were once concretely “prototypes”, “sketches”, or “mockups” may now be variations of “wireframes.”
We’re not here to hold you back with semantics – just get the wireframes done!
You can sketch with anything that makes pigment on a surface – there are many beautiful options. So get out your pens, pencils, markers, crayons, or Paper App and start sketching!
- Speed – It’s really quick to pull out a piece of paper or open a blank sketching screen, and start drawing out product design ideas at any level as they come to you. You don’t have to search through element libraries, switch stylus or cursor tool, memorize keyboard shortcuts, or rifle through files, which all interrupt your thought process. As documentation of the product matures (ex: existing wireframes, maser templates, and saved element libraries), however, wireframing and prototyping software can become faster even at this stage.
- Flexibility – You can easily switch from high to low-level product concepts or details, and even include them on the same page. Wireframing and prototyping apps are inherently more structured or focused – and thus constrained – which may not accommodate your full thought process especially at the earlier product design stages. While traditional wireframing apps like Balsamiq intentionally constrain the user, newer wireframing software like UXPin is blurring the lines between sketching, wireframing, flowcharting, and prototyping to offer more flexibility across the full design process.
- Limited Distractions – You can really focus on the product structure, content, information hierarchy, functionality and behavior – instead of visual design – by having few if any options for fonts, colors, or general styling. Some wireframing tools do this intentionally for the same reason.
- Duplicate Work – You don’t have master templates or elements to re-use or apply changes across different views. You also can’t neatly edit your sketches, especially as you go into more detail – sure you can erase or undo lines, but it quickly becomes tedious to make multiple changes. Finally, once you’ve got a finalized sketch, you can’t export that work to another application to pick up where you left off. All of your hard design work has to be transcribed somewhere else, whether a graphic editing, presentation, wireframing, or other tool. Unfortunately, there’s still some level of duplication between wireframing and graphic editing for a host of reasons, but products like UXPin, Axure, Proto.io, and Just In Mind provide significant overlap between those two stages to reduce duplicate work.
- Low-Fidelity – You can’t include media or fonts and font formatting, and it’s far more difficult to visually show interactions or animations than the digital tools we described below. Depending on the tools you’re using for sketching, you may also find limitations in providing color fidelity. We covered these types of high-fidelity wireframes in the second section of UXPin’s 50 Shades of Wireframing.
- Non-Interactive – Beyond limitations of visually showing interactions, you also can’t link sketches together. And forget about animations or advanced interactions – there are far better ways to convey this information. Amongst wireframing and protoyping software, UXPin, Balsamiq, Axure, and Proto.io probably provide the best solutions for this.
- No Version Control – This is an inherent issue with all analog tools since they’re not timestamped, you have no idea who made changes, you can’t make copies, and you can’t easily flip through versions and compare changes made. UXPin and Balsamiq both have revision history to address this problem.
- Limited Collaboration – Because there’s usually only a single, non-centralized version of a sketch, collaboration around them mainly happens if and when the person who drew them decides to show share them, possibly in a formalized meeting. Before or after that point, few if anyone has access to them. Consider this in stark contrast to UXPin that automatically alerts teammates when edits or comments are made. InVision is also a great solution but you have to upload your sketches first since it’s more of a prototyping and collaboration tool than a wireframing tool.
- No Standardization – Elements can be inconsistent if you’re not careful, and proportions could be off, or sizing completely off which could impact a lot of information conveyed in sketches. Stencils, wireframing and prototyping apps, and wireframing templates for graphics editing and presentation software provide a better solution for this problem.
- Ugly – For the majority of you who haven’t gone to art or design school, your sketches could be so bad that they’re rendered useless. Consider that before spending too much time on sketches.
Next Best Alternative
Whiteboarding (or Blackboarding) due to the vast similarities between the two.
Black and Whiteboarding
Similar to sketching with a few minor but important differences, including that they’re vertical and typically bigger in size. While blackboards are being replaced by whiteboards across the World, there are tons still laying around – so we wanted to mention them. As for whiteboarding, you can either pay a lot of money for official whiteboards, try Whiteyboard, make them cheaply out of glass or tile board, or use a whiteboarding app like Conojo.
More wireframing and prototyping software are also starting to provide whiteboarding functionality or something similar to it. For example, InVision now offers a whiteboarding options to better incorporate this into the full product design process, while UXPin provides real-time collaboration so different team members can work on the same wireframes together, no matter how simple or complex.
- Similar to sketching (see above)
- Scale – The larger size of this wireframing medium really allows you to start at a higher-level in the product design process, and visually tie different aspects of the product design together, low- and high-level. With the capability to zoom-in/out, most digital wireframing tools also provide a relatively large workspace although the view is ultimately limited by your screen size.
- Prominence – Most offices I’ve seen are decked out with whiteboards or glass walls in the halls and in every room, with notes and diagrams scattered everywhere. This is great for product design transparency as anyone who passes by these whiteboards can understand what’s going on and possibly even contribute – this is a stark contrast to sketches. Due to the collaborative nature of their job and the abundance of meetings they typically have, whiteboards are an extremely popular wireframing tool for product managers.
- Similar to sketching (see above)
- Fixed Orientation – Being mounted to a wall can make it more difficult to sketch, and may be a deal-breaker for some. It’s surprisingly a real skill to whiteboard well.
- Limited Details – The level of detail is usually limited unless you’re really good with blackboards and whiteboards – or have really sharp chalk or markers. Either way, it’s probably more time than it’s worth to go into too much detail on a whiteboard because graphic editing, presentation, and wireframing tools are better at this.
Next Best Alternative
Sketching due to the vast similarities between the two.
Paper Cutouts (aka Paper Prototyping)
Similar to digital or sketch wireframing depending on how they’re produced. You can use standard paper wireframing kits (which was the precursor to the UXPin wireframing and prototyping software), or simply cut out paper sketches or digital wireframe printouts – you can always cut down edges later for “re-sizing.” Although Common Craft’s famous Dropbox explainer video isn’t about wireframing, it illustrates how fun this type of wireframing can be.
- Fidelity – Because you can use digital wireframing tools or sketching to create the initial elements, you get to choose the level of fidelity you want.
- Standardization – Because you’re either creating a bunch of the same cutouts or re-arranging the same cutout, your wireframe elements are inherently standardized.
- Interactivity – You can pin pin them on the wall, wrap them around your mobile phone, tape them on your computer screen, move and rearrange elements. Adding some basic interactivity to your sketched or digital wireframes can be really effective in understanding the user experience.
- Similar to sketching or digital wireframing – Depending on how you create the initial interfaces you’re cutting out.
- Speed – They’re more time-consuming than sketches at first but can save time if you expect to have to rearrange a lot of wireframe elements. And this is also an extra step if you’re making digital wireframes in applications like UXPin which have basic and advanced interactions already.
Next Best Alternative
Wireframing Software because it offers similar fidelity flexibility, standardization, and interactivity without as many of the drawbacks.
Similar to sketching with a few minor but important differences, including standardization and structure. There are many templates you can print out, stenciling kits to make your own, and full paper wireframing kits that come with standard paper elements like the UXPin paper product I mentioned above.
- Similar to Sketching (see above)
- Speed – Stencils act as a master templates for standard elements you may use many times, while allowing you to sketch the rest of the details. Depending on your skills and preferences, it can be as fast if not faster than sketching wireframes.
- Standardization – By standardizing details (such as hardware and product elements) across your sketches, it becomes easier to see the differences between sketches and place more deliberate emphasis on certain details like layout, key features or content, flows and so forth.
- Structure – Cleaner and better-aligned lines that more closely resemble digital tools also lend more structure to your sketches so you can get a better understanding of how product content and features fit together.
- Cleaner – Unlike the other analog wireframing methods above, stenciling is typically a cleaner presentation for anyone who isn’t a trained designer or has a shaky hand.
- Similar to Sketching (see above)
- Element Constraints – Some of the flexibility of sketching is lost when you start stenciling because you’re limited to what the stencil offers. If you want to go beyond these standard elements, you’re purely sketching again.
- Outdated Elements – Unlike wireframing software, you don’t get updates on your element libraries. So each stencil becomes increasingly useless with each new release of the frameworks with which you’re building or the platforms on which you’re building.
- Focus on a Tool – One of the major reasons people love sketching and black- or whiteboarding over digital wireframing tools is that they focus less on the tool and more on the substance. This benefit starts to get lost with a constrained tool like a stencil.
- Multiple Styles – This is one of the few wireframing techniques that uses multiple styles in it’s composition. The merging of free-hand sketching and clean, ruled lines can be distracting.
Next Best Alternative
Wireframing Software because it offers similar standardization, structure, and cleanliness without as many of the drawbacks.
Now On To Digital Wireframing Weapons
In the next part of our series, 4 Digital Wireframing Weapons, we’ll dive into digital tools for creating wireframes.
If your free-hand sketching skills simply suck, and you think (or know) you’ll spend more time erasing, scribbling-out, scrapping, and overwriting your sketches instead of producing a useful wireframe, digital wireframing tools are for you. As you’ll see, there are many other reasons digital wireframing tools ought to be the primary method for creating and maintaining wireframes. I personally know a lot of amazing designers and product managers who go straight to the software and never sketch, use paper cutouts, or stencil.
As you think more about how you want to create wireframes, remember two things – it’s okay to use more than one tool in your wireframing process, and do whatever it takes to get the right wireframes done. Don’t let semantics hold you back!