The Guide to Wireframing / Основи вайрфреймування: 5. 4 DIGITAL WIREFRAMING WEAPONS

Оригінал англійською Переклад українською





In the previous chapter, I covered analog tools and medium to create wireframes. Below, I’m going in-depth on the digital tools used to create wireframes, their strengths and weaknesses, and how tools like UXPin are evolving to address the evolution and diversi cation of product design.


Word Processing Software


Everyone (yes, everyone) has used some form of word processing software in the- ir lives – Google Docs, Microsoft Word, Apple Pages, and so on. Because this is a much less common tool, it was very di cult to nd 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 o er the very basic elements of wireframes – sha- pes, colors and text – you can theoretically use them for this purpose. It’s de ni- tely 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) Adobe Photoshop CC 2014, Photo credit:




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 work ow 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 de- sires, 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 sen- se, 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 o er 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 ow). 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 o er 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 life- cycle.


Presentation Software


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.




(image) Photo credit:


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 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 o er 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, 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 ow 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 o er 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 are great – these are not to be confused with prototyping-only tools like InVision or Flinto which do not o er most of the wireframing functionality I’ve been discussing. There are also myriad free, but very limited wireframing applications.




Built for Wireframing – This is self-explanatory, especially for more advanced wireframing tools that also provide prototyping functionality like UXPin and Axure.


(image) Photo credit:


Наступна сторінка →