Chapter 5

Design Process for Pros — Wireframing | Comprehensive Guide 2023

Design Process: wireframing - Midjourney illustration

Introduction

In this section you will learn

  • The definition of wireframing and the things a client should understand.
  • What elements to include in a wireframe.
  • Best practices – DOs and DON’Ts of wireframing.

Stakeholders

  • Designer
  • Client
  • QA

As Product Designers, we should never skip the wireframing stage. The wireframing stage is the bridge between researching and designing visuals. It lets us test-drive ideas and iterate quickly from early on in the project. Not only does it save us a lot of time that would have otherwise been wasted on neverending adjustments, but it also makes our process more robust, our vision clearer and our rationale more valid. As a result, the final design becomes truly meaningful and valuable to the client. The outcome of this phase is usually a set of user flows and wireframes.

Benefits of wireframing for the client

  • Allows for fast prototyping.
  • Allows clients to test ideas early.
  • Allows us to eliminate errors and problems early.
  • The client will know their product, users’ needs and behavioral patterns better.

Benefits for the team

  • Wireframes will often help to discover new requirements and questions that may not have been considered by the project team.
  • Developers will know how the website/application will work before designers provide them with final designs.
  • Opportunity to gather feedback and test how the product will work before proceeding to the design phase.

What is a wireframe?

A wireframe is a basic visual interface guide that outlines the structure of an interface and the relationships between its pages. A wireframe serves as a blueprint that defines a project’s structure, content, and functionality. Wireframes are created before any visual design work starts so that the focus is on the information architecture without the distraction of color or visual elements.

What is included in the wireframing phase?

The wireframing phase can be divided into 2 subphases:

User Flow diagrams

User Flow diagrams (also known as flowcharts) are a visual representation of a desired user journey path through the designed product. They illustrate the steps, decisions, and funnels users frequently come across. Thoughtfully crafted User Flow Diagrams let you reveal the moments critical for user conversion and then apply adequate solutions to the obstacles you identify. For an example of a user flow diagram visit and to check out flowchart.

Single-page wireframes

Single-page wireframes (also known as page schematics or screen blueprints) are a visual guide to a page's structure, composition, and information hierarchy. Their purpose is to arrange the elements of a website’s content in an informed, user-friendly and business-effective manner. As their main focus lies in the functionality unobstructed by flashy visuals, they need to be stripped of all elements of visual language such as colors, infographics, effects, etc.

What elements should I include in a wireframe?

List of elements

Wireframes should include all the important elements of a product:

  • navigation,
  • the company's logo (if it exists),
  • content area sections + sample content (placeholder text),
  • calls to action,
  • widgets,
  • fields,
  • forms,
  • pop-ups,
  • hover states (if applicable).

What kind of software should I use for designing wireframes?

At Netguru, we use:

  • Sketch for wireframes.
  • InVision for quick prototyping.

Wireframing Best Practices

DOs and DON'Ts

The main purpose of wireframing is to create a visual representation of ideas to support conversations, iterations, and rapid ideation. Below is a list of best practices we truly believe in at Netguru:

1. Colors can be distracting. Ensure that your design remains focused on the experience you’re creating and not the visual design solutions to come.

DOs DON'Ts

  • Create your wireframes based on a muted color palette.

  • Use color only if it helps define the idea behind the design; even then – limit yourself to as few colors as possible.

  • Don’t use color in your wireframe designs unless it has a solid purpose.

  • Don’t use various tints of grey; using tinted grey is ok, but stick to one.

2. Be consistent: the best way to help the presented solutions is to be consistent in your wireframe designs.

DOs DON'Ts

  • Be consistent in the visual representation of UI elements. Ideally, present them by using reusable elements like Symbols in Sketch.

  • Be aware of font sizes and spacing.

  • Sketch your ideas before you start digitizing them – you’ll save a lot of time in the early iterations.

  • Don’t use different line weights for similar elements.

  • Don’t use too many fonts and font sizes.

3. Use real content: writing is a design skill, and it will help you understand the client and the story better.

DOs DON'Ts

  • If you don’t have real content: write it yourself based on what the competition does and your own research.

  • Use solid grey placeholder elements to represent photos, videos, and maps.

  • Design for real-life cases (that is, don’t assume that every surname is max. 10 characters long, for instance).

  • Don’t use placeholder text in crucial design elements, such as navigation or CTAs (i.e., Lorem Ipsum…).

  • If you need to show a series of data such as tables or tiles, be sure not to use the same copy for each of those elements.

4. Never wireframe alone. The main purpose of having this process is the conversational potential and a greater chance of discovering better solutions than if you were working on your own.

DOs DON'Ts

  • Be open to new ideas.

  • Before presenting your wireframes to the client, get a few opinions from within your project team – they understand the product and know the client.

  • Always get a second opinion on your solutions (at Netguru, we use a dedicated Slack channel).

  • Don’t work on the wireframes alone just to show the client the end result of the whole product. Instead, cooperate and exchange ideas.

5. Set clear expectations: be sure that the client understands the principles behind this process.

DOs DON'Ts

  • Tell the client about the desired outcome before you start designing.

  • Communicate clearly, early and often.

  • It’s a good idea to have a live conversation/meeting/call with the client when presenting your wireframes for the first time – this way you have the opportunity to answer all questions and avoid misunderstandings.

  • Don’t assume your client knows how to use collaboration tools or knows that wireframes are not final designs – always educate.

  • Don’t leave designs of complex processes without any comments.

6. Use the right tool for the job. At Netguru, we make wireframes mostly in Sketch (it’s flexible, easy to use, and there is no need to recreate layouts in a different app), but remember not to be constrained by the limitations of one tool.

DOs DON'Ts

  • Use whatever tool you see fit; for example, sketching and whiteboarding.

  • Don’t let the software be a barrier.

7. You are not your design.

DOs DON'Ts

  • Be prepared to pivot often and embrace rapid ideation.

  • Don’t get too attached to your wireframes but, at the same time, also remember to defend the ideas that are worth defending.

8. Be selective and keep it simple.

DOs DON'Ts

  • Be wary of ideas that will definitely not work, pick the best ones in the beginning.

  • Don’t overdo your wireframes; while thinking about the final stage of designing, try to create only the necessary parts.

9. Control the conversation.

DOs DON'Ts

  • Support your wireframes by controlling the conversation: if things get off track, bring the conversation back where you want it.

  • Don’t be afraid to interrupt politely and ask meaningful open-ended questions.

10. Wireframe with the final designs in mind.

DOs DON'Ts

  • You will save yourself a ton of work if you create your wireframes with the final designs in mind: reusable symbols, precise elements, and good fonts.

  • Talk to your devs about the technical efficiency of your design solutions.

  • Don’t forget the importance of the function by concentrating on the visual form of the wireframe.

  • Don’t be too pixel-perfect and don’t spend much time on things that could easily be changed in the later stage.

Questions your client may ask

Q: Can you explain the difference between wireframes and visual design?
A: Wireframes are a quick visual method of building the backbone of the product. At this stage, we define how our product/features should work. It also helps us to avoid UX problems and present to developers how the website/application will work before we provide them with the final designs. Visual design is the part of the design process that comes after wireframing. In the visual design phase, we focus on creating the visual image and style of the product based on wireframes. To sum up, we need wireframes to work out the backbone of the product, whereas visual design is there to design what the product will look like. By using both of them, we build products that are better adjusted to users’ needs.

Q: Are wireframes just static images? Let’s make them testable!
A: You’re probably thinking about a prototype, which is a very simple clickable thing that allows you to test interactions, scenarios, and stories at a very early stage. A prototype (or a clickable mockup) is a tool to study users’ behavior and the product’s functionality.

Q: What kind of benefits will I get from this?
A: Using wireframes will often help to bring to light new requirements and questions that may not have been considered by the project team. Wireframes often end up evolving into the requirements of the system. At this stage, we can also check if your product fulfills all needs that users can have. By creating wireframes, you will get a better product, which will be better adjusted to your target customer base.

Questions to ask yourself at this stage

  • Are user flows complete?
  • Are wireframes available on InVision?
  • Are wireframes clickable?
  • Do wireframes follow our best practices? -- Use of real content -- Focused on information architecture -- Wireframe is ready to be reused in the visual design phase
  • Has feedback been gathered?

Desired outcomes of this stage

  1. Clickable wireframe of low or high fidelity (preferably high-fidelity)
  2. User flows covering jobs to be done/user stories
  3. Usage of real content included
  4. Designed test scenarios for wireframes
  5. Wireframes tested and accepted by the client – ready to use in the visual design stage

Additional reading