A Comprehensive Guide To Wireframing And Prototyping
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Check the frontend report!
Start with a free demo —
Sponsor OWD on GitHub
Click here to kickstart your project for free in a matter of minutes.
Take a break with a 3D game built on Netlify!
Build skills. Boost ROI.(This is a sponsored article.) With the big picture established and your user interface considered, it’s time to start building some prototypes. My sixth article in this series of ten articles dives into the prototyping process.
As I’ve stressed before in the earlier articles in this series, the best design follows an iterative process:
- You undertake research, working with users to identify the underlying user requirements that need to be addressed.
- With this research in hand, you define the problem you’re trying to solve and establish a hypothesis.
- With the problem defined you build a prototype.
- Using this prototype you test your assumptions, measuring against your hypothesis.
- Finally, you return to stage one, refining your thinking and iterate through the process again, working your way closer to a finished solution.
At each loop throughout the process, the fidelity of your prototypes increases. The earlier in the process you can identify and fix problems, the easier and the less expensive it is. The further into a process you get, as the fidelity of what you’re building increases, the more expensive it becomes to make changes. This is where prototyping comes in.
As designers working today, we’re fortunate to have a wealth of prototyping tools at our disposal. Tools like Adobe XD, in particular, enable us to build immersive clickable prototypes at relatively low cost.
These tools allow us to undertake a great deal of our testing before we get to the expensive part of the process, building fully working products in the medium they will be delivered in.
With the big picture of user flows established and some thought given to building a design system that ensures consistency, it’s time to put together some interactive prototypes.
This article, the third in this series within a series, explores the benefits of wireframing and prototyping, before covering the process from paper prototyping to lo-fi wireframing to hi-fi prototyping with mockups.
The Benefits Of Prototyping
We are fortunate as designers to have a wealth of prototyping tools at our disposal at a wide range of fidelities. At one end of the spectrum, we have lo-fi paper prototypes, while at the other end of the spectrum we have hi-fi digital prototypes.
Digital prototypes allow us to build realistic, clickable proof of concepts that allow users and stakeholders to get a feel for what we’re building. These prototypes enable us to test our assumptions and move progressively towards finished solutions.
Building a clickable prototype using a tool like Adobe XD is considerably quicker than diving deep into HTML, CSS, and JS to build a website or diving into the complex build of a mobile application.
Clickable prototypes also allow us to test our designs with users and other stakeholders, bringing them into the design process in a meaningful way and allowing us to test: information architecture, layout and visual hierarchy, and interactive elements.
There are numerous other benefits of prototyping, including:
- Saving time and money;
- Getting everyone involved and bought into the design process;
- Acting as a bridge between designers and developers.
Let’s dive a little deeper into these and make a case for prototyping — as a bridge between your original idea and your final build — as a core part of the design process.
Prototypes Save You Time And Money
The golden rule of prototyping — and developing any new idea — is to fail early and fail inexpensively. Prototyping enables misunderstandings to be identified and addressed as early in the design process as possible. The earlier in the process issues are addressed, the better, saving you time and money.
The deeper into a project you are, the more expensive it is to fix mistakes. Prototypes — whether lo-fi paper prototypes or digital hi-fi prototypes — are a cost-effective way of identifying changes that might need to be made before you embark upon a finished build, at which point changes become increasingly more expensive to implement.
Prototypes Help Get Everyone Involved In The Design Process
Even a modest project will typically encompass a number of different stakeholders. It’s important to engage with everyone involved in a project, bringing them on the journey from idea to finished product.
Prototypes are helpful for including the wide range of participants in a project: designers, developers, project managers, business analysts and everyday users. (This list — depending on the size and scope of the project — is potentially just the tip of the iceberg.)
Prototypes are a great way of getting everyone involved in the design process. They also keep the conversation going, so that designers don’t disappear for weeks on end building complicated solutions to problems that perhaps don’t exist.
Prototypes Act As A Bridge Between Designers And Developers
As our industry has become more and more complex, the idea of ‘unicorn designers’ — who have deep skills as both designers and developers — is one that’s thankfully being left behind. It is simply too complex now to be ‘a master of all trades.’ We are increasingly working in multi-disciplinary teams, drawing on the strengths of different specialists and in this context, prototypes act as the glue that holds everyone together.
When the design of a product or feature is finished, and it is being passed on to a more skilled developer to undertake the final build, a high fidelity, clickable prototype ensures that the developer has a clear understanding of what’s what.
This is particularly true when it comes to designing interactions. Rich, interactive prototypes are considerably more powerful — not to mention immersive — than a series of flat, visuals that lack interaction. They provide a very clear picture of not only how something looks, but also how it works.
So, with this in mind, let’s explore the process of building prototypes.
Paper Prototypes, Wireframes And Clickable Prototypes
With the benefits of prototyping defined, it’s time to dive deeper into the prototyping process. We can, of course, create product prototypes at a wide range of fidelities and using a wide range of tools. These include:
- rapid, sketched paper prototypes;
- lo-fi, monochromatic wireframes; and
- high-fidelity, clickable mockups.
As we move through the spectrum of prototypes, we can provide a more comprehensive view of our design, including color palettes, typographic choices, and other aspects including interactions and animations. In short, prototyping takes place across a spectrum of fidelity, from low detail to high detail.
As we work our way up the levels of fidelity, we’ll eventually build prototypes in the medium they’ll be delivered in. For example, the final prototypes for a website will ideally be built using HTML, CSS, and JavaScript so that we can tailor them to the medium.
The prototyping process is a journey, transitioning through levels of fidelity. There are many different types of prototypes — low- medium- and high-fidelity — and these are suited to different points on the design journey.
At the start of the journey it’s important to focus on low-fidelity approaches that are low cost and fast to implement. Paper is the perfect prototyping tool at this stage in the process. Once you’ve undertaken some initial testing with your paper prototypes, it’s time to move onto something at a higher level of fidelity.
With some feedback gathered, it helps to move to the next level of fidelity, using tools like Adobe XD to create clickable lo-fi prototypes with wireframes. These help your users and stakeholders get a much better picture of how everything works.
Again, with testing done it’s time to move on to high-fidelity prototypes. At this point in the process, we’re increasing fidelity, moving from wireframes to mockups. Creating clickable hi-fi prototypes with mockups provides users and stakeholders with a very clear picture of the end result.
Finally, we move towards the end medium for prototyping, for example using HTML, CSS, and JavaScript for a website. Building a native prototype ensures that what you are creating is as close as possible to the finished product.
Of course, every project is different and — at times — you might need to approach your prototyping in a different order. When building a complex web-based SaaS application, for example, you might need to start prototyping in HTML earlier in the process in order to implement and test web technologies. As always, the approach you choose will depend on the project in hand.
For this article, I’m exploring paper prototyping, lo-fi prototyping with wireframes, and hi-fi prototyping with mockups. If you’re looking for an in-depth and exhaustive — in a good way! — book that covers prototyping in detail, I’d recommend Ben Coleman and Dan Goodwin’s book, "Designing UX: Prototyping"." It has an excellent in-depth chapter covering HTML prototyping.
The Power Of Paper
Paper is an incredibly powerful tool for prototyping. As a very low-cost prototyping medium, it frees you up, reducing the ‘weight of expectation.’ The beauty of paper is that it’s also collaborative, allowing you to design as a team, collectively. As Khoi Vinh’s Design Tools Survey shows, paper is embraced by designers the world over with 64% of designers using paper as an integral part of their process.
Like anything, paper prototyping is a skill that gets better with practice and some time spent sketching interfaces will pay off. I recently attended a full day workshop on sketching interfaces with Eva-Lotta Lamm, and I left with lots of ideas to enhance my paper prototyping approach.
One simple technique that improved my sketches dramatically was being set the task to draw an interface (Twitter, YouTube, Kickstarter, and so on) in as short a time as possible, just a minute or two. Running through this process repeatedly forced you to focus and speeded up your sketching considerably.
The more you draw, the more you improve your thinking and communication skills. You don’t need to be in a workshop to do this, however. Simply set aside some time and practice, and your paper prototyping skills will improve immeasurably. Just as an athlete warms up before a race, so too, we can warm up our mental muscles — before embarking on a paper prototyping session — in a similar manner.
In workshops I run — whether it’s for students or professionals — I’ll always kick off with paper. It’s the perfect tool for generating and realizing ideas. We can think through paper and understanding that is incredibly liberating.
Paper is considerably faster than working on a computer. By working at an inherently lower level of fidelity, it forces you to think through the process, defining flows and mapping out interfaces. Lastly, a paper prototyping kit is incredibly inexpensive to build and is within reach of anyone regardless of budget. You could start with the following:
- Pens (at different thicknesses and fidelities)
- Paper
- Templates and other tools
When paper prototyping, I find it helps to have pens available in a range of thicknesses. Sharpies force you to think in low fidelity, because of their thick nibs. Muji Gel Pens, on the other hand, allow you to think in a higher fidelity because they’re thinner. The Tombow ABT N75 Dual Brush Pen in Cool Grey 3 is fantastic for creating shadows and giving your drawings a ‘lift.’ (If you buy one pen, buy the Tombow, it’s fantastic.)
With your paper prototypes developed, it’s time to move to the computer and create some lo-fi wireframes, which can be stitched together to create more immersive prototypes for the screen.
Lo-fi, Low Stress Wireframes
With the broad brushstrokes established at a low fidelity using paper prototypes, it’s time to start transitioning towards a slightly higher level of fidelity using wireframes. At this stage in the prototyping process, we’re moving from paper to screen and incrementally increasing the fidelity.
A wireframe is essentially a ‘skeleton’ for your design. As a lower fidelity design deliverable — which is focused on structure, as opposed to look and feel — wireframes help you to focus on functionality and not get lost in detail. Wireframes distill the interface down to simple, monochromatic shapes and are helpful for communicating high-level structure.
Wireframes offer a number of benefits:
- With the ‘visual grammar’ or ‘look and feel’ stripped out, they are faster to create, enabling you to focus on functionality.
- As lo-fi deliverables they can be rapidly updated during user testing.
- With their stripped-down design they put less pressure on users and stakeholders, allowing them to speak freely about design decisions without fear that they are criticising a ‘finished’ design.
- They are less ‘precious,’ allowing designers to take on board feedback without feeling too attached to them.
- Their unfinished look takes the pressure off; no one expects a wireframe will be in a fit state to ship the next day.
As I noted in my previous article, Adobe XD provides a number of pre-built UI Kits that save you from re-drawing commonly used user interface elements. These UI Kits provide you with a wealth of different elements you’re likely to need when building out a design, including those covering:
- Sign Up
- Activity Feeds
- Checkout Screens
- News Feeds
- Articles and Posts.
UI Kits can be used to transform a paper prototype into a lo-fi, clickable prototype relatively quickly and they’re a huge time saver. Even better, if you’re using Adobe XD, they’re free.
With their focus on information architecture, wireframes enable you to quickly map the journey through content. Wireframes are also useful for helping to establish the scope of a project, enabling you to identify all the different screens you might need to design.
You don’t need to wait until you have high-fidelity mockups to start to build interactive, clickable prototypes. Tools like Adobe XD enable you to create lo-fi clickable prototypes, and these can be incredibly useful to help move your thinking on and test your assumptions.
By providing users and other stakeholders with a ‘functioning’ prototype that enables them to click through a series of screens, lo-fi prototypes are extremely useful for driving design conversations, enabling you to edge your design forward through discussion.
With a lo-fi, clickable prototype developed and tested it’s time to create a more fully realized clickable mockup, helping you to paint a picture of what the finished product will look like in your stakeholders’ minds.
Hi-fi, Clickable Prototypes
Once you’ve used your lo-fi clickable prototypes to iron out any issues, it’s time to build a higher fidelity prototype to provide a more realistic experience.
At this point in the journey you’re fusing your functional wireframes with the elements you created when you designed your element collages. This results in a high-fidelity, clickable prototype that is more powerful and engaging for everyone involved.
This is the final stage of the prototyping process before you start to build prototypes using the medium you’re designing for, for example, HTML, CSS and JavaScript, if you’re building a website or a language like Swift, if you’re building an app for a mobile context.
Tools like Adobe XD — which has been created by designers for designers – reimagine how user experience designers take their ideas from paper prototype to wireframe to interactive prototype. By allowing you to take separate screens and link them together using ‘hotlinks’ they enable you to build standalone clickable mockups.
These rich visual mockups provide a number of benefits:
- By allowing you to publish prototypes on the web and providing a link for stakeholders to view or comment on your prototypes, they allow you to gather feedback from everyone involved in the project.
- They can be viewed remotely, so you can talk a client through a prototype without having to be in the same room as them.
- They can be used to share specifications with developers, enabling them to inspect your designs for colors, typographic styles, and various measurements.
Tools like Adobe XD also allow you to gather feedback directly within your prototype, enabling everyone involved in the process to leave comments. This is useful not just for the feedback it allows, but for the documentation it provides of the design process.
High-fidelity prototypes are useful for bringing a design to life, helping everyone to get a feel for both the visual design and the interaction design. By including real content in your prototype, your users can experience how a website or an application functions and flows and provide helpful feedback.
Prototypes at this level of fidelity — rather than in the finished medium — are also considerably quicker to build, helping you to:
- Validate your assumptions, testing your ideas;
- Communicate your thinking, enabling others to provide feedback; and
- Pitch ideas, when you’re proposing a new feature, for example.
As our industry has evolved, so too has its tools. As designers, we’re fortunate to have easy to use prototyping tools like Adobe XD at our disposal now. Access to these tools enables us to create, update and maintain prototypes in a way that just a few years ago would have been impossible to imagine.
Collaboration And Feedback
As I’ve noted in this article, and in the previous articles in this series, design is an iterative process that includes multiple stakeholders. The more you can keep the lines of communication open throughout that process the better.
By embracing an iterative approach towards your prototyping you can draw on the wisdom of everyone involved in the process. To create truly memorable user experiences, it’s critical to ensure that users are involved in the design process at every step of the journey.
In the past — before the advent of tools like Adobe XD and other tools that allow you to publish prototypes to the web — there was an inherent delay at every step of the process, as you brought various stakeholders in to the studio, or visited them on site.
The web has changed that, allowing you to maintain the flow of information throughout a project, streamlining the process considerably. With shareable prototypes that allow for users to leave comments you cannot only gather feedback, but you can also pinpoint clear, trackable design documentation.
Thanks to the use of commenting tools, it’s easy to see who said what about a design and when, allowing you to collaborate with others and respond to feedback easily. Design is at heart about people and communication, and commenting tools ease this communication.
The ability to have everything available in one package — from design through to commenting — has considerably eased the design process. The result is a workflow that is not only faster, but one that encompasses everyone involved in a project.
In Closing
Tools like Adobe XD now occupy a central place in the user experience designers’ toolbox. By acting as a bridge between the ideas captured at the paper prototyping stage and the finished build, they have transformed how we work as user experience designers.
As we work our way through the design process, it’s important to embrace the right tool for the job at hand. Different tools have different strengths and lend themselves to different tasks.
When you’re mapping out ideas at an early phase in the design process, paper is the perfect tool. It is both cheap and efficient and — because of this — it takes the pressure off you. Paper is also perfect for collaboration, allowing multiple designers to prototype collectively.
Wireframes are perfect when you’re focused on testing functionality and getting your high-level structure in place. Stitching wireframes together to create lo-fi prototypes enables you to map out user flows without getting lost in the details.
Finally, high-fidelity prototypes created using more detailed mockups allow your stakeholders to get a feel for how a design looks and feels. At this point in the prototyping process, the details matter: color palettes, typographic choices, and other aspects including interactions and animations.
Regardless of the end outcome — be it desktop or mobile, web or native — a considered prototyping process, one that is iterative in nature, will deliver the required outcomes, ensuring that what’s designed meets our users’ needs. Pick the right tool for the job, and you’ll be all set to go.
Suggested Reading
There are many great publications, both offline and online, that will help you on your adventure. I’ve included a few below to start you on your journey.
If you’re looking for a comprehensive overview of the prototyping process, Ben Coleman and Dan Goodwin’s book, "Designing UX: Prototyping is excellent. As they put it, “A prototype is worth a thousand words,” and their book takes you through every step of the prototyping process, from low- to high-fidelity. I’d strongly recommend it.
If your budget will stretch to some training, I’d highly recommend Eva-Lotta Lamm’s "Sketching Interfaces" workshop, it’s worth every penny. Lamm is also working on a book that explores sketching interfaces in depth, which I will certainly be buying when it’s published. You might like to keep an eye Lamm’s Twitter and Instagram accounts to be notified the moment it’s published.
If you’re interested in a complementary perspective on wireframing and prototyping, Nick Babich’s lengthy article for the Adobe Blog, "Everything You Need To Know About Wireframes And Prototypes" is comprehensive reading, providing lots of useful insight.
Lastly, there are a wealth of templates that you can use to speed up your paper prototyping process. 3flab inc.’s Printable PDFs cover every platform imaginable and are excellent. I use them in my workshops and encourage participants to download them.
This article is part of the UX design series sponsored by Adobe. Adobe XD is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype, and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.
Further Reading
- How Accessibility Standards Can Empower Better Chart Visual Design
- From Idea To Development: How To Write Mobile Application Requirements That Work
- How To Succeed In Wireframe Design
- Getting Started With Neon Branching
(ra, yk, il, mrn)
