{"id":11594,"date":"2016-01-21T16:47:27","date_gmt":"2016-01-22T00:47:27","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=11594"},"modified":"2024-08-19T07:25:30","modified_gmt":"2024-08-19T14:25:30","slug":"what-is-a-wireframe-designing-your-ux-backbone","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/ui-design\/what-is-a-wireframe-designing-your-ux-backbone\/","title":{"rendered":"Wireframes: What They Are & How They Support UX"},"content":{"rendered":"

\"Wireframes\"<\/h2>\n

What Is A Wireframe? The Backbone of UX & Design<\/b><\/h2>\n

The logical place to start any design process is with a rough wireframe to begin laying the foundation of visual design, user interface and user experience.\u00a0<\/span><\/p>\n

This basic documentation is simple enough to start from scratch but complex enough to act as a solid foundation going forward. The wireframe creates the structure\u2014the backbone\u2014of your entire project layout, making it easier to later build individual parts.<\/span><\/p>\n

UX designers seem to have mixed opinions about wireframing, with some calling them <\/span>a waste of time<\/span><\/a>. But now that new technology enables designers to add interactivity within seconds, letting them quickly create low-fidelity prototypes, static wireframes are no longer dead-end deliverables.<\/span><\/p>\n

What Is a Wireframe?<\/h2>\n

A wireframe is a low-fidelity, simplified outline<\/b> of your product. You can usually recognize them by their distinctive block layouts, use of lines to represent text, and \u201c\u2715\u201d squares indicating placeholders for future images.\"\"<\/p>\n

This barebones style makes wireframes a great tool early on, giving you time to cement your content architecture before diving into the details. Moreover, their simplicity is forgiving of mistakes and allows you to experiment, which takes some of the hassle out of designing the overall structure.<\/p>\n

Wireframes Compared to Other Design Documents<\/h2>\n

The terminology used in design documentation often gets used interchangeably, so let\u2019s clarify the differences.<\/p>\n

Think of wireframes<\/b> as the skeleton. They loosely shape the final product, giving you a reliable idea of where everything will eventually go. The content is the muscle (and can be as meaty or trim as you want).<\/p>\n

Wireframes vs. Mockups<\/h3>\n

Next comes the mockup <\/b>\u2014 the skin. Mockups are strictly visual. This is the documentation where you solidify your visual decisions, experiment with variations, and (optionally) create pixel-perfect drafts. With things like UI kits<\/a>, you can speed up user interface design so much that the mockup is built within minutes.<\/p>\n

Wireframes vs. Prototypes<\/b><\/h3>\n

With the prototype<\/b>, you breathe life into your creation. Prototypes test your interface ideas and generate the feedback necessary to keep the design headed in the right direction. Prototypes can (and should) be used during every stage of the design process, and can be in any fidelity. As we\u2019ll discuss below, you can even make a lo-fi prototype by adding interactivity to a wireframe.<\/p>\n

\"\"<\/p>\n

Remember that wireframes are only a means to a prototype<\/b>. In other words, prototypes are the most functional, useful documentation you can create. Wireframes just help you focus the placement of content for your prototype.<\/p>\n

Types of Wireframes<\/h3>\n

Most designers start by sketching wireframes on paper. Paper is faster and easier, but makes sharing with teams more difficult. And if you need to reference them often, the process inevitably takes longer.<\/p>\n

\"\"<\/p>\n

Since wireframes are stepping stones to prototypes, you will eventually throw away your paper wireframes. One way to keep them useful is converting them into paper prototypes for usability testing: one person plays the role of the human computer, while the other person takes notes. This form of prototyping works well if you want to explore experimental concepts quickly and with minimal risk.<\/p>\n

Some digital tools actually allow you to convert paper wireframes and prototypes into a collaborative digital tool.<\/p>\n

The advantages of digital wireframes are clear: they can be shared instantaneously and convert into digital prototypes easier. As shown above, you can also add interactions directly by using simple and easy drag-and-drop, turning your wireframe into a lo-fi prototype in a matter of minutes. This lets you use (and test) the same document throughout the entire design process.<\/p>\n

Join the world’s best designers who use UXPin.<\/b><\/h2>\n

Sign up for a free trial. <\/span>Try it for free!<\/span><\/a><\/p>\n

Join the world's best designers who use UXPin.<\/h2>Sign up for a free trial.<\/span>Try it for free!<\/a><\/section><\/h2>\n

When Should You Wireframe?<\/h2>\n

Wireframing is most useful at the beginning, when much of the product\u2019s structure is still up in the air.<\/p>\n

The benefit lies in visualizing the structure of a concept, but at a step above sketching. For example, you can sketch five different layouts for a product page, compare them side-by-side, and then narrow them down to three based on the visual flow for a wireframe.<\/p>\n

In later stages, the details have already been hammered out, so this kind of experimental structuring isn\u2019t as useful.<\/p>\n

Design Processes That Incorporate Wireframes\u00a0<\/b><\/h2>\n

Sketch To Code Process<\/b><\/h3>\n
    \n
  1. Sketch<\/li>\n
  2. Wireframe<\/li>\n
  3. \u00a0Lo-Fi Prototype<\/li>\n
  4. Hi-Fi Mockup<\/li>\n
  5. Hi-Fi Prototype (Rapid)<\/li>\n
  6. Code<\/li>\n<\/ol>\n

    The standard (and safest) design process doesn\u2019t cut any corners.<\/p>\n

    Initial sketching eliminates some of the less promising ideas prior to wireframing. The wireframe then sets the stage, suggesting the best proposals for content structure. Next, a lo-fi prototype is created from the wireframe itself by adding interactivity; this is tested for valuable early-stage feedback that can be incorporated before fine-detailing takes place.<\/p>\n

    A high-fidelity mockup would then finalize the visuals that are incorporated into a new prototype. A series of rapid prototyping (multiple quick prototypes that integrate feedback with each iteration) prepares the product for its final stages in coded development.<\/p>\n

    Wireframe to Code Process<\/h3>\n
      \n
    1. Wireframe<\/li>\n
    2. Lo-Fi Prototype<\/li>\n
    3. Hi-Fi Mockup<\/li>\n
    4. Code<\/li>\n<\/ol>\n

      While the scenario above is a more complete process, some teams don\u2019t have the necessary resources. Here is the leanest possible design process we\u2019d recommend.<\/p>\n

      First, all concepts are illustrated in the wireframe instead of sketching. From there, we transform the wireframe concepts into a lo-fi prototype so we can test the interaction design as early as possible. You want to test these user flows first to ensure that your design actually functions properly.<\/p>\n

      The project moves directly into finalizing the visuals with a mockup, then moving straight to production code. At this point, the designer and developer can continue testing and iterating in code.<\/p>\n

      \"\"<\/p>\n

      Source:<\/i> UXPin<\/i><\/a><\/p>\n

      Sketch To Code Cleanup Process<\/h3>\n
        \n
      1. Sketch<\/li>\n
      2. Wireframe<\/li>\n
      3. Coded Lo-Fi Prototype<\/li>\n
      4. Coded Hi-Fi Prototype<\/li>\n
      5. Code Cleanup<\/li>\n<\/ol>\n

        If you\u2019re a designer with coding chops, you can start building your product\u2019s technical foundation right from the beginning stages.<\/p>\n

        As before, initial concepts are honed through sketching and wireframing, but this time, the wireframe is then built as a coded, lo-fi prototype. The prototype is successively tested and reiterated into coded, hi-fi prototypes.<\/p>\n

        Toward the end, all residual dead weight code from the iterations is cleaned up.<\/p>\n

        Wireframe To Code Cleanup<\/h3>\n
          \n
        1. Wireframe<\/li>\n
        2. Lo-Fi Prototype<\/li>\n
        3. Coded Hi-Fi Prototype<\/li>\n
        4. Code Cleanup<\/li>\n<\/ol>\n

          For designers who are comfortable coding high-fidelity elements, this process allows them to bypass Photoshop and Sketch. The wireframe is turned into a lo-fi prototype and tested repeatedly until core usability issues are resolved.<\/p>\n

          Once that happens, a hi-fi prototype is created in code and again tested until a satisfactory version is reached. The code is again cleaned up.<\/p>\n

          No Hi-fi Wireframes<\/h3>\n

          No matter which process you choose, one thing remains the same: Wireframes should always be low fidelity. That\u2019s because hi-fi wireframes would be a waste of time\u2014it\u2019s not their role to pin down fine details.<\/p>\n

          All processes follow the same basic progression:<\/p>\n

          information structure => user flows\/interaction design => visual fidelity.<\/p>\n

          In other words, the benefit of wireframes runs out by the time you tackle visuals.<\/p>\n

          \"image04\"<\/p>\n

          Source:<\/i> UXPin<\/i><\/a> based on JFarny<\/i><\/p>\n

          Website Wireframes for Responsive Design<\/h2>\n

          Responsive design places more emphasis on a website\u2019s structure and layout, making wireframes especially useful, even necessary. Wireframing for each device keeps an otherwise chaotic process in order and ensures the final product turns out the way you want.<\/p>\n

          For responsive websites, we recommend the process Professor Tom Green describes in our free ebook, The Guide to Interactive Wireframing<\/a>:<\/p>\n

            \n
          1. Create a Content Inventory \u2014 <\/b>List all the elements for each page, then organize them by priority so you know what should be seen prominently on each page.<\/li>\n<\/ol>\n
              \n
            1. Start with Mobile-first \u2014<\/b> Beginning with your smallest screen helps create a consistent experience across devices\u2014better to add things progressively than figure out what to take away.<\/li>\n<\/ol>\n

              \"\"<\/p>\n

                \n
              1. Place Content Blocks \u2014 <\/b>Before diving into details, divide the screen into large, vague blocks for content. This helps maintain consistency across devices.<\/li>\n<\/ol>\n
                  \n
                1. Detail the Blocks \u2014<\/b> Once the blocks are finalized, add details like links, placeholders for images, sizes, numbers of rows, etc.<\/li>\n<\/ol>\n

                  Throughout the process, keep thinking about the final prototype you\u2019re working toward. Each of these wireframes can be tested and fine-tuned for better accuracy.<\/p>\n

                  Refining Your Wireframing Process<\/b><\/h2>\n

                  This article is more than just a summary of the what, why, and how of wireframes\u2014we\u2019ve also filled it with resources if you\u2019d like to learn more.<\/p>\n

                  Our free ebook The Guide to Wireframing<\/a> includes 150+ pages of advice on lo-fi static wireframing. If you\u2019re interested in creating fast clickable prototypes, download the free ebook The Guide to Interactive Wireframing<\/a>, as mentioned above. There\u2019s also I \u2665 wireframes<\/a>, a tumblr blog dedicated to wireframing news.<\/p>\n

                  For more on the other aspects of the design process, check out these additional free ebooks:<\/p>\n