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

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




TSpell 4.07.17 в 16:03




TSpell 4.07.17 в 16:08


In this chapter, I going in-depth on the analog tools and medium used to create wireframes, their strengths and weaknesses, and how they relate to wireframing and prototyping software. I’ll detail wireframing and prototyping software in the next chapter, 4 Digital Wireframing Weapons.


Beyond Wireframing Software


По той бік програмного забезпечення для Wireframe

TSpell 4.07.17 в 16:11

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 many 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 pa- radigms of paper wireframing and prototyping remain, leading designers, product managers, and engineers alike to further con ate the terms used daily.


Роками я чув терміни "скетчі", "мокапи", і навіть "прототипи" які вживалися як синонім до "вайрфрейми". Спочатку, інструментами wireframe були лише паперові із, як багато хто зараз розглядає (не всеосяжними) макетами.

TSpell 4.07.17 в 16:16

Fifteen years since the rst wireframing and prototyping software applications were built, the UXPin team sees lines between product stages – and corresponding termi- nology – blurring as product iteration cycles shorten, team composition and process varies more widely, and team members have more in uence over communication and style preferences, and development is much more customer-centric which va- ries 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 exibility to ac- commodate myriad ways of getting the job done.


Below, I’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 wirefra- me, I’m calling it a wireframe. No matter what anyone tells you, you can achieve the majority of your wireframing objectives – de ning product structure, content, in- formation hierarchy, functionality, and behavior – through any of these. What were once concretely “prototypes”, “sketches”, or “mockups” may now be variations of “wireframes.”


I’m 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!


(image) Photo credit: „Mobile wireframes”. Benoit Meunier. Creative Commons 2.0




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 ri e through les, which all interrupt your thought process. As documentation of the product matures (ex: existing wirefra- mes, 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 pro- duct design stages. While traditional wireframing apps like Balsamiq intentionally constrain the user, newer wireframing software like UXPin is blurring the lines between sketching, wireframing, owcharting, and prototyping to o er more exibility 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 di erent 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 nalized sketch, you can’t export that work to another application to pick up where you left o . All of your hard design work has to be transcribed somewhere else, whether a graphic editing, presentation, wireframing, or other tool. Unfor- tunately, there’s still some level of duplication between wireframing and graphic editing for a host of reasons, but products like UXPin, Axure,, and Just In Mind provide signi cant 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 di cult to visually show interactions or animations than the digital tools
I described below. Depending on the tools you’re using for sketching, you may also nd limitations in providing color delity. I covered these types of high- de- lity 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 interac- tions – there are far better ways to convey this information. Amongst wirefra- ming and protoyping software, UXPin, Balsamiq, Axure, and 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 ip 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 rst 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 o , or sizing completely o which could impact a lot of in- formation 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 & Whiteboarding


Similar to sketching with a few minor but important di erences, 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 I wanted to mention them. As for whiteboarding, you can either pay a lot of money for o cial 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 whiteboar- ding functionality or something similar to it. For example, InVision now o ers a whi- teboarding options to better incorporate this into the full product design process, while UXPin provides real-time collaboration so di erent team members can work on the same wireframes together, no matter how simple or complex.


(image) Photo credit: „IA & IxD”. Danny Hope. Creative Commons 2.0




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 di erent 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 al- though the view is ultimately limited by your screen size.


Prominence – Most o ces I’ve seen are decked out with whiteboards or glass walls in the halls and in every room, with notes and diagrams scattered eve- rywhere. 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 extre- mely popular wireframing tool for product managers.




Similar to sketching (see above)


Fixed Orientation – Being mounted to a wall can make it more di cult to ske- tch, and may be a dealbreaker 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 whi- teboard 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 (i.e. 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.


(image) Photo credit: „Paper based prototyping”. Samuel Mann. Creative Commons 2.0




Fidelity – Because you can use digital wireframing tools or sketching to create
the initial elements, you get to choose the level of delity 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 standard- ized.


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. Ad- ding some basic interactivity to your sketched or digital wireframes can be really e ective 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 rst 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 o ers similar delity exibility, standardization,
and interactivity without as many of the drawbacks.


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