4 Digital Wireframing Weapons
In this article, Chris Bank of UXPin – The UX Design App details the various tools that can be used to create wireframes, their strengths and weaknesses, and how wireframing & prototyping tools like UXPin are evolving to address the evolution and diversification of product design.
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. Prior to this article, we covered analog tools and medium to create wireframes in 4 Non-Digital Wireframing Weapons. Below, we’re going in-depth on the digital tools used to create wireframes and their strengths and weaknesses, and how tools like UXPin are evolving to address the evolution and diversification of product design.
Blurring Lines of Product Design Stages
As I’ve mentioned before the terms “sketches”, “mockups”, and even “prototypes” have often been used synonymously with “wireframes.” As the initial versions of wireframing and prototyping software have evolved from the austere likes of Balsamiq circa 2008 or complex likes of Axure circa 2003, the UXPin team sees lines between product stages - and corresponding terminology - blurring in a much more seamless and collaborative way.
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. What were once concretely “prototypes”, “sketches”, or “mockups” may now be variations of “wireframes.”
Below, we’ve laid out the most common types of digital tools used for wireframing.
Word Processing Software
Everyone (yes, everyone) has used some form of word processing software in their lives -- Google Docs, Microsoft Word, Apple Pages, and so on. Because this is a much less common tool, it was very difficult to find examples online. But here are some instructions if you want to take this route.
- Familiarity - We’ve all used them so we know what we can do with them. And since most word processors offer the very basic elements of wireframes -- shapes, colors and text - you can theoretically use them for this purpose. It’s definitely an option if you’re absolutely terrible at using everything else.
- Similar to Presentation Software (see below)
- Basic Elements - This is even more limited than presentation software, although you can always import images and adjust the arrangement and set them above or below text to achieve this goal. It will be far more time-consuming than the other tools mentioned, however.
- Difficult to Layout - Changing the arrangement of text and pictures will easily get you started, especially the “bring in front of text” command so you can move elements around freely. However, I’ve often run into issues when re-arranging elements that are higher up on a page than others. Because word processors are designed to adjust surrounding content as you make changes to simplify the document creation process, it actually works against you when trying to rearrange elements independently of one another. Essentially, you can’t set or lock elements into place like you can with almost all other software.
Next Best Alternative
Presentation Software is the next best alternative because you’re probably familiar with a program, and it offers far more functionality to let you create beautiful basic wireframes. While Adobe Illustrator is the most similar to word processing while giving you more control over shapes, colors, and text, you’ll quickly realize how similar the limitations are between the two. And, of course, if you’re not stuck in your ways with tools you’re already familiar with, I’d suggest going straight to dedicated wireframing and prototyping software - they exist solely for that reason.
Graphics Editing Software
There are many digital graphics applications (free and paid) that could be used but the vast majority of designers and product managers use Adobe Illustrator, Photoshop, or Sketch for graphic design already - so those are clear winners if you choose to use them for wireframing too. But you could also try out GIMP, Pixlr, or another popular free image editors.
Image credit: Marc Decerle
- Familiarity - Marshall McLuhan once said, “We become what we behold. We shape our tools, and thereafter our tools shape us.” Since the vast majority of designers, engineers and product managers have used or regularly use Photoshop or Illustrator, they’ve adapted their workflow around those tools over time. If you are a power user of this software, the speed gap compared to other wireframing tools closes - even dedicated wireframing and prototyping tools like UXPin. To wit, advanced usage of master templates, smart elements, existing graphics work, workspace organization, and/or keyboard shortcuts could potentially make you as effective in Photoshop or Illustrator as UXPin for basic types of wireframes - but not for advanced interactions, animations, user flows, and many of the other features provided by dedicated wireframing and prototyping tools. And if I had a timer and gave you a few days to learn the app, you’d probably be faster in UXPin.
- Wireframing Element Libraries - First and foremost, there are many wireframing templates and toolkits which turn this app into a pseudo-wireframing tool - a very basic wireframe is mainly shapes, colors, and text after all. As you work more in this software, you can leverage master templates, smart elements and wireframes or wireframe elements you’ve already created if you’re smart about it - this takes a lot of discipline, though, and I’ve heard more people mess this up than do it well.
- Fidelity - With the ability to use almost any shape, text, or color your heart desires, you can literally create almost any wireframe you can imagine, not constrained by wireframing element or icon libraries. You can add any level of fidelity (i.e. media, color, and text) in here with the exception of interactions and animations. Many wireframing tools limit your ability to do this intentionally. However, that’s gradually changing thanks to products like UXPin, which has been launching many high-fidelity features lately with image editing, gradient editing, one of the most beautiful color pickers on the market, and many more to come.
- Feature Bloat - For the same reason these tools are so flexible, there’s also a steep learning curve and a lot of ongoing distraction from feature bloat. This is mainly due to these products not originally being intended for wireframing. Moreover, they’ve evolved to accommodate more types of graphic work - in a sense, trying to become “all things to all people.” As a result, these tools are typically not as quick or effective as wireframing and prototyping applications, or analog methods for anyone who isn’t an advanced user. With that said, Sketch, a new and popular graphic editor in town, is attempting to solve this feature bloat problem through a focus on the essential features (a la the 80-20 rule), less obtrusive layers, drawing tabs within a project. However, it’s limited compatibility with Illustrator and Photoshop and poor .svg support have been significant drawbacks to using this as an option at all, especially in larger organizations where everyone would have to switch.
- Non-Stock Element Libraries - Although you can find wireframing element libraries to import, it can be cumbersome to find the right ones instead of using the stock or community-generated libraries provided by dedicated wireframing and prototyping software. And, if you’re not aware of these libraries, you may run the risk of spending time making your own from scratch or not providing the right level of detail because you don’t know what typical wireframes should look like.
- No Collaboration - Most graphic editing applications don’t offer any collaboration within the application - it’s one of the main reasons Flinto and InVision entered the market. For example, you can’t edit the same document together in real-time or invite a colleague to leave comments or annotations - which is important when working on content and information hierarchy. Moreover, there aren’t dedicated areas or functionality in the software to document additional details about the product structure, functionality or behavior. While presentation applications like PowerPoint or Keynote provides additional areas for annotations and better illustrates user flows, wireframing and prototyping apps provide the total package, especially applications like UXPin or Axure which allow you to produce higher-fidelity wireframes that come very close to final mockups you’d produce in graphic editing software. Oddly enough, Adobe Creative Suite once offered reviewing services then discontinued them - hopefully this will change, for their sake.
- No Presentation - You can export to PDF, email a file, or share your screen. That’s about it.
- No Flowcharting or User Flows - It simply doesn’t exist. You can’t export images to a PowerPoint, or visualize them in series (i.e. a user flow). The best you can do is export them to UXPin, Axure, InVision or Flinto individually look at them side-by-side or create links between them to visualize more granular user flows.
- Non-Interactive - It simply doesn’t exist. You can’t link wireframes or mockups together, show animations, create clickable buttons, menus, or other elements in these tools. Prototyping tools like Invision (for web and mobile) and Flinto (for mobile) entered the market to address this issue. Additionally, wireframing and prototyping tools like UXPin are addressing this interactivity issue both at the wireframing and at the prototyping level so product teams can build high or low-fidelity prototypes (or interactive wireframes) - so they can better test usability and user experience at any stage in the product design cycle.
- Fidelity Creep - Whether or not you import and use third-party wireframing element libraries, you run the risk of not providing the right level of detail or fidelity desired by the team. There are so many “adjustments” you could make - even if you’re not supposed to.
Next Best Alternative
Wireframing and Prototyping Software because they not only cover the basic wireframing functionality offered in graphic editors (shapes, text, and colors), but they offer interactions, animations, user flows, and much more. Moreover, some modern tools like UXPin are starting to integrate with and overlap with the basic functionality of graphic editing applications to make the decision easier. For many product teams, the better option is wireframing software because they’re focused solutions for wireframing, and a central medium for collaborating on wireframes and integrating with other tools that are important in the entire product design lifecycle.
As with word processing software, most people have used presentation software at some point in their lives, and almost every businessperson has - it’s probably mandatory in US education by now. The broad familiarity of this tool makes it another great basic option for creating and presenting wireframes to teams. Although the predominant choices are PowerPoint and Keynote, you can also use Google Presentations, Prezi, or another popular free presentation tool.
- Familiarity - As with word processing software, you know the basics. And it’s really easy to learn more advanced features like animations, slide transitions, linking slides for interactions and so forth.
- Wireframing Element Libraries - Because of wireframing libraries like Keynotopia, this app can quickly become a pseudo-wireframing tool with the basic shapes, colors, text, animations, hyperlinks, and focus on UI narratives and user flows you need. As you work more in this software, you can also leverage master templates, and reuse slides or parts of slides when making changes to your wireframes. It’s far easier to be disciplined about this in presentation software compared graphic design apps.
- User Flows - By nature, the application takes you through a linear flow. This forcing function is great at making you think about the actual product experience instead of separately, pretty wireframes or mockups. For more advanced users, you can actually link presentation slides in more complex ways to showcase many user flows that don’t necessarily follow the linear progression of a presentation. Unfortunately, most wireframing and prototyping software is clunky when it comes to visualizing user flows but UXPin, Flinto and InVision do a great job.
- Interactivity - Whether you’re showcasing a full-bleed wireframe or a wireframe with annotations, you can add hyperlinks between slides and triggered animations within slides to visualize desired interactions. I’ve personally done this quite a bit and love the experience, it can be extremely time-consuming and not give you the desired results. Also, once you start playing around with advanced user flows and interactions, however, it becomes more difficult to incorporate slides with supplemental notes or other contextual information about the product design. Wireframing tools like UXPin, Axure and Proto.io are better for this.
- Non-Stock Element Libraries - Similar to the issues in graphic design software, it can be cumbersome to find the right element libraries, if they exist at all. Unlike dedicated wireframing and prototyping apps and their communities, presentation libraries like these aren’t updated as frequently and the library quality almost always suffers. Alternatively, you may run the risk of spending time making your own from scratch or not providing the right level of detail because you don’t know what typical wireframes should look like.
- Limited Collaboration - Most presentation software doesn't offer any collaboration within the application, with the exception of Google Presentation where multiple people can work on slides at the same time and even leave comments. However, software outside of Keynote and PowerPoint seriously lack in interactivity, manipulation of graphics, and shape, text, and color options that even make this a tool worth considering. If you care about collaboration without compromising other benefits, you should stick with UXPin, Balsamiq, Axure, Proto.io or other wireframing apps - or check out InVision or Flinto for prototyping software.
- Limited Flow Charting & User Flows - As I mentioned before, you can actually communicate pretty advanced user flows. Keynote and PowerPoint actually have flow diagram images for high-level flows, and you can link slides together to show many user flows that don’t necessarily follow the linear progression of a presentation. However, it’s not easy to do and the flow charts (or sitemaps) aren’t linked to the wireframes themselves in ways that product like Axure or UXPin do - the UXPin team is even aware of these limitations, and working on an even tighter integration between these two features.
- Limited Interactivity - Clever users can actually get pretty far if they use all of the features in Keynote or PowerPoint. And that may be all you need. Once you start to think about the ease of adding basic interactions within wireframing and prototyping software, and the breadth of options when you start to think about all the combinations of elements, content, views, and animations, you quickly come to realize why people use wireframing and prototyping software to communicate the functionality and behavior of the product. UXPin, Axure, InVision, and Flinto are pushing the envelope here.
Next Best Alternative
Wireframing and Prototyping Software because they not only cover the basic wireframing functionality offered in presentation software (shapes, text, colors, user flows, and interactions), but they offer more advanced interactions and user flows, among other things. Additionally, an increasing number of wireframing and prototyping applications allow you to export to presentations so you get the best of both worlds here.
Wireframing & Prototyping Software
There are many wireframing and prototyping software you can use, but only a few serious apps that are truly worth checking out, in our opinion. To name a few products, UXPin, Balsamiq, Axure, and Proto.io are great - these are not to be confused with prototyping-only tools like InVision or Flinto which do not offer most of the wireframing functionality we’re discussing. There are also myriad free, but very limited wireframing applications.
Image credit: UXPin
- Built for Wireframing - This is self-explanatory, especially for more advanced wireframing tools that also provide prototyping functionality like UXPin and Axure.
- Speed - Because they’re designed specifically for wireframing, they should be the fastest tools for creation, collaboration, and presentation of wireframes. For example, power users can actually be faster than stenciling or sketching because of how quickly they can create, copy, or adjust elements that would otherwise be drawn out. But we know there are many ways to get from point A to B in the world of wireframing, and often multiple tools are used to accommodate the creative thought process.
- Element Libraries - As I mentioned above, many of the other tools are mainly comparable to wireframing and prototyping software because of element libraries. However, they often have limited and lower-quality libraries if any - and they don’t come stock. In contrast, UXPin has 900+ web and mobile elements, and 150+ UX patterns that combine many of these elements both for inspiration and to skip starting from scratch. And these libraries are updated regularly to keep up with the ever-evolving product standards - alternatives don’t come close!
- Advanced Flowcharting & User Flows - Most wireframing and prototyping software offer at least a flow chart element comparable to what you’d find in presentation and possibly even word processing software. However, many of them also generate sitemaps as you create new wireframes or let you visualize wireframes side-by-side so you can navigate through them.
- Advanced Interactions - Product interactions and animations change so rapidly that only dedicated wireframing and prototyping tools can really offer you the best option for this. Sure, you can reference other products in your documentation and say, “Copy that,” and you can get pretty far with presentation software for basic interactions, but there’s better ways to achieve that objective. Simply put, use a tool like UXPin, Axure, Just In Mind, InVision, or Flinto for advanced interactions and see how far you can get before trying something else.
- Collaboration - When thinking about collaboration, you should be looking for a few key features. The first aspect of collaboration is commenting and resolving comments as a pseudo-task management system. Secondly, you must have the ability to allow multiple people to login to the same wireframe or prototype and edit them simultaneously. Additionally, sharing links to projects also facilitates collaboration because you can pull collaborators into wireframes and prototypes instead of throwing it over the wall so-to-speak. Finally, revision history and cloud storage both make it easier to sort through the archives and find the right work. Many wireframing and prototyping tools provide some portion of these features. While UXPin and InVision are probably the most robust, Balsamiq, Hotgloo, Just In Mind, and a few others have some level of collaboration as well.
- Presentation - This can either mean exporting to PDF, or presentation software, having a built-in presentation mode, or exporting to a web or mobile app so you can see a real-world presentation (a prototype) of what the app should look and feel like. Most software allows you to export to PDF while only a few like Mockflow export to presentation apps, and only web-based versions have links to projects that you can share. And many wireframing and prototyping tools like UXPin, Hotgloo, Moqups and InVision have a presentation mode and/or let you export to a web or mobile app.
- Lack of Familiarity - Simply put, this may require a few days or weeks of training, but there are a handful of tools like UXPin that are known for usability and ease of learning.
- Limited Functionality - If you’re not happy with the element libraries, interactions, animations, colors, or level of collaboration and presentation, you may have to switch to a new wireframing tool that takes time to learn again. For this reason, Balsamiq has become one of the standards in the industry - until now, it has provided just enough to keep the broadest set of users happy. However, it is far from a complete solution today. Products like UXPin and InVision are quickly addressing the more of the expanding wireframing and prototyping landscape.
- Limited Fidelity - With the exception of tools like UXPin and Axure, most wireframing tools are low-fidelity. In fact, UXPin and Axure are the only tools to my knowledge that allow you to go from low- to high-fidelity wireframing within the same app. And it won’t be long before some advanced wireframing tools deeply integrate into graphic design tools like Photoshop and Illustrator to make this process more seamless. In most wireframing apps, however, if you want higher-fidelity, you have to create mockups in a graphic design tool then export them to prototyping products like InVision or Flinto.
Next Best Alternative
None! Kidding. I’d probably say presentation software for many of the reasons we mentioned above. This is personally how I got started wireframing - but I was in business school at the time, so that was a natural fit.
Now Choose Your Weapons
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!