
{"id":5211,"date":"2021-02-02T12:00:00","date_gmt":"2021-02-02T11:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/design-thinking-stage-four-prototyping\/"},"modified":"2021-12-29T14:47:17","modified_gmt":"2021-12-29T13:47:17","slug":"design-thinking-stage-four-prototyping","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/design-thinking-stage-four-prototyping\/","title":{"rendered":"A Complete Introduction to Prototyping (2025 Guide)"},"content":{"rendered":"<p>If you\u2019ve been following our series of <a href=\"\/en\/blog\/ux-design\/what-is-design-thinking-everything-you-need-to-know-to-get-started\/\" target=\"_blank\" rel=\"noopener\">design thinking<\/a> articles, you\u2019ll know that there are five key steps in this process.<\/p>\n<p>So far, we\u2019ve covered the <strong><a href=\"\/en\/blog\/ux-design\/what-is-empathy-in-design-thinking\/\" target=\"_blank\" rel=\"noopener\">empathize<\/a><\/strong> stage and the methods you can use to get to know your target audience; the <strong><a href=\"\/en\/blog\/ux-design\/stage-two-design-thinking-define-the-problem\/\" target=\"_blank\" rel=\"noopener\">define<\/a><\/strong> stage, looking at how to craft a meaningful problem statement; and the <strong><a href=\"\/en\/blog\/ux-design\/what-is-ideation-in-design-thinking\/\">ideate<\/a><\/strong> stage, exploring various techniques for generating new ideas.<\/p>\n<p>Now it\u2019s time to explore the fourth and penultimate stage: prototyping.<\/p>\n<p><strong>Here\u2019s why the prototyping stage is so important:<\/strong> Prototyping allows you to determine whether or not the design (or changes) work the way you intended them to\u2014before they\u2019re out in the world and in the hands of your users.<\/p>\n<p>Before releasing a product to market, you want to make sure that it works as intended. Does it solve the user\u2019s problem exactly as planned? Is it user-friendly and intuitive? Ideally, you\u2019ll find these things out before you spend time and money developing the final product.<\/p>\n<p>In this guide, we\u2019ll cover everything you need to know about prototyping, starting with a quick recap of <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/design-thinking-process\/\" target=\"_blank\" rel=\"noopener\">the design thinking process<\/a>. Here\u2019s an overview of what we\u2019ll cover:<\/p>\n<ol>\n<li><a href=\"#what-is-design-thinking-a-brief-recap\">What is design thinking? A brief recap<\/a><\/li>\n<li><a href=\"#what-is-a-prototype\">What is a prototype?<\/a><\/li>\n<li><a href=\"#why-use-prototypes\">Why create prototypes?<\/a><\/li>\n<li><a href=\"#different-kinds-of-prototype\">Different kinds of prototype<\/a><\/li>\n<li><a href=\"#how-to-create-a-prototype-tips-and-best-practices\">Prototyping best practices<\/a><\/li>\n<li><a href=\"#what-next\">What next?<\/a><\/li>\n<\/ol>\n<p>Ready? Let\u2019s jump in.<\/p>\n<h2 id=\"what-is-design-thinking-a-brief-recap\">1. What is design thinking? A brief recap<\/h2>\n<h2 id=\"five-circles-one-for-each-stage-of-the-design-thinking-process-empathize-define-ideate-prototype-and-test-with-arrows-demonstrating-that-the-process-is-not-linearenbloguploads5-steps-design-thinking-1jpg-prototyping-stage-4-of-the-design-thinking-process\"><img decoding=\"async\" title=\"Prototyping: Stage 4 of the Design Thinking Process\" src=\"\/en\/wp-content\/uploads\/old-blog-uploads\/5-steps-design-thinking-1.jpg\" alt=\"Five circles, one for each stage of the design thinking process (empathize, define, ideate, prototype, and test), with arrows demonstrating that the process is not linear.\" \/><\/h2>\n<p>Design thinking is both an ideology and a process used to solve complex problems in a user-centric way. Just like <a href=\"\/en\/blog\/ux-design\/what-is-user-experience-ux-design-everything-you-need-to-know-to-get-started\/\" target=\"_blank\" rel=\"noopener\">user experience (UX) design<\/a>, it places the user front and center, focusing heavily on empathy.<\/p>\n<p>What\u2019s special about design thinking is that it advocates a solution-based approach to problem-solving. Rather than fixating on obstacles and limitations, it encourages you to experiment, iterate, and think outside the box.<\/p>\n<p>As you may already know, the design thinking process can be divided into five phases: empathize, define, ideate, prototype, and test. While you might look at these steps and see a very logical sequence, it\u2019s important to bear in mind that the design thinking process is not linear. Each step brings new discoveries to light, so don\u2019t be surprised if you need to loop back to a previous step and redefine what you\u2019ve done in order to move forward.<\/p>\n<p>Prototyping is the fourth stage in the design thinking process. Your prototypes will be based on everything you\u2019ve done so far: interviewing your users, defining your problem statement, and coming up with potential solutions. But what is a prototype? We\u2019re glad you asked\u2026<\/p>\n<h2 id=\"what-is-a-prototype\">2. What is a prototype?<\/h2>\n<p><em>*Put simply, a prototype is a scaled-down version of your product; a simulation or sample version which enables you to test your ideas and designs *before<\/em> investing time and money into actually developing the product. **<\/p>\n<p>So, if you\u2019re designing an app, you might create a digital prototype and test it on real users before <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/how-to-orchestrate-a-seamless-handoff-from-design-to-development\/\">handing it off to the developers<\/a>.<\/p>\n<p>Prototypes come in all different shapes and sizes, ranging from simple paper models to fully functional, interactive digital prototypes. We\u2019ll look at some of the different types of prototype in section four. First, though, it\u2019s important to understand the value of prototyping\u2014which brings us to section three.<\/p>\n<h2 id=\"why-use-prototypes\">3. Why use prototypes?<\/h2>\n<p>Prototyping is an extremely valuable step in the design thinking process. Putting the user at the heart of the process requires you to test your designs on real users\u2014and prototypes make this possible without spending loads of time and money.<\/p>\n<p><strong>Prototypes can help you to:<\/strong><\/p>\n<ul>\n<li>Gain first-hand insights into how your users will interact with, and react to, the product you\u2019re designing. Seeing an early version of the product in action shows you if, and how, it\u2019ll work in the real world.<\/li>\n<li>Identify any <a href=\"\/en\/blog\/ux-design\/what-is-usability\/\" target=\"_blank\" rel=\"noopener\">usability issues<\/a> or design flaws before it\u2019s too late. If an idea or design is destined for failure, you\u2019d rather find out in the early stages. Prototypes enable you to fail early and cheaply; they\u2019ll expose a weak or unsuitable approach before you\u2019ve invested too much time or money.<\/li>\n<li>Make informed design decisions. Can\u2019t decide where a certain button should go on your app home screen? Torn between two different layouts for your website? Test a few versions in the form of prototypes and see which works best.<\/li>\n<\/ul>\n<p>No matter how thorough your <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/the-importance-of-user-research-and-how-to-do-it\/\" target=\"_blank\" rel=\"noopener\">UX research<\/a> is, many people find it difficult to truly conceptualize a product until they have it in front of them. Prototypes allow you to iterate, refine, rework, and make improvements until you have a market-ready product.<\/p>\n<h2 id=\"different-kinds-of-prototypes\">4. Different kinds of prototypes<\/h2>\n<p>Now let\u2019s take a look at some of the different kinds of prototypes you might use. Prototypes can vary in terms of their form, fidelity, interactivity, and lifecycle:<\/p>\n<ul>\n<li><strong>Form:<\/strong> Is it a hand-drawn prototype, or a digital one? Is it for mobile or desktop?<\/li>\n<li><strong>Fidelity:<\/strong> How detailed and polished is the prototype? You\u2019ll often hear the terms high-fidelity and low-fidelity in relation to prototypes.<\/li>\n<li><strong>Interactivity:<\/strong> How functional is the prototype? Can the user click on it or interact with it, or is it view-only?<\/li>\n<li><strong>Lifecycle:<\/strong> Is the prototype a quick, disposable version that will be replaced with a new and improved version? Or is it a more enduring creation that can be built and improved upon, potentially ending up as the final product?<\/li>\n<\/ul>\n<p>Generally, prototypes can be divided into low-fidelity and high-fidelity. Fidelity simply describes how similar to the final product the prototype is; whether it\u2019s an accurate representation of the final product, or more of a basic, early-stage model. Here\u2019s an example of how a prototype for one screen would look from low to high fideltity:<\/p>\n<p><img decoding=\"async\" title=\"Kinds of Prototypes: Low to High Fidelity\" src=\"\/en\/wp-content\/uploads\/old-blog-uploads\/low-high-fidelity-prototype.jpg\" alt=\"A set of five prototypes for one screen, ranging from a low-fidelity hand drawn sketch, to high fidelity, similar to the final product\" \/><br \/>\nImage credit: <a href=\"https:\/\/www.anamichandesign.com\/\" target=\"_blank\" rel=\"noopener\">Anami Chan<\/a><\/p>\n<p>So how do you know whether to use a low, mid, or high-fidelity prototype? It all depends on what you want to achieve with your prototype, as well as how complete your design is.<\/p>\n<h3 id=\"low--to-mid-fidelity-prototypes\">Low- to mid-fidelity prototypes<\/h3>\n<p><strong>Low-fidelity prototypes<\/strong> are ideal if you want to rapidly test broad concepts. They\u2019re quick, cheap, and highly collaborative; they don\u2019t require advanced design skills, so different people from different teams can easily be involved.<\/p>\n<p>As a rule, low-fidelity prototypes keep content and visuals to a minimum, presenting only the key elements as basic shapes in order to <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/what-is-visual-hierarchy\/\" target=\"_blank\" rel=\"noopener\">convey visual hierarchy<\/a>. Their simplicity can lead to uncertainty during testing; it\u2019s not always easy for users to identify what and how the prototype is supposed to work.<\/p>\n<p>Low-fi prototypes are also limited in terms of interactivity, so it\u2019s not possible to convey animations or transitions.<\/p>\n<p><strong>Mid-fidelity prototypes\u00a0<\/strong>can also be inexpensive to create (depending on the tools you choose), and don\u2019t require much design knowledge or experience. These are great if you want to test broad functional features, such as the <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/user-flows-vs-wireframes\/\">user flow<\/a> for one particular use case (i.e., the user taps this button, which leads them here, then here then here). This is a great approach to take if you\u2019re short on time and\/or just need to get an overview across screens to be sure that the solutions youve designed actually work and don\u2019t overlook any key considerations.<\/p>\n<p><strong>Some of the most common low- and mid-fidelity prototyping techniques include paper prototyping and clickable wireframes.<\/strong> These methods are particularly useful for iterating on initial design ideas, and getting the designers and stakeholders aligned on basic design elements. Let\u2019s explore each of these techniques in more detail.<\/p>\n<h4 id=\"paper-prototyping\"><strong>Paper prototyping<\/strong><\/h4>\n<p>Believe it or not, you can create prototypes using nothing more than pen and paper. Paper prototypes are usually low-fidelity. You simply draw different screens of a digital product interface onto sheets of paper\u2014no fancy software needed. You can even simulate interactivity during testing by moving the screens (or sheets of paper) around based on how the user navigates the paper prototype. Check out how\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=JMjozqJS44M\" target=\"_blank\" rel=\"noopener\">Google does paper prototyping<\/a>.<\/p>\n<p><img decoding=\"async\" title=\"Prototyping: Stage 4 of the Design Thinking Process\" src=\"\/en\/wp-content\/uploads\/old-blog-uploads\/paper-prototype.jpg\" alt=\"Close up of a UX designer's hands. They are cutting out elements for a paper prototype\" \/><br \/>\nPhoto by <a href=\"https:\/\/unsplash.com\/@amayli?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">Am\u00e9lie Mourichon<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/prototyping?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\" target=\"_blank\" rel=\"noopener\">Unsplash<\/a><\/p>\n<p>Paper prototyping does have its advantages\u2014it\u2019s quick and affordable, and can be used to document the evolution of your design, giving you tangible artefacts to refer back to. However, paper prototypes can be limited; you won\u2019t be able to convey visually complex interfaces, nor high levels of interactivity. They are best kept to the very early stages of the design process when you need to quickly explore a variety of broader ideas or concepts.<\/p>\n<h4 id=\"clickable-wireframes\"><strong>Clickable wireframes<\/strong><\/h4>\n<p>Clickable <a href=\"\/en\/blog\/ux-design\/how-to-create-your-first-wireframe\/\" target=\"_blank\" rel=\"noopener\">wireframes<\/a> can also be used as low-fidelity prototypes. A clickable wireframe not only represents the visual layout of a digital interface, but also offers a certain degree of interactivity. You can simulate the journey a user might go through by including hyperlinked buttons which lead to another wireframe.<\/p>\n<p>Clickable wireframes are still very much a bare-bones representation of the finished product, including things like image and text placeholders together with buttons and navigational elements. They can be created using special wireframing software, or even with a presentation tool like PowerPoint or Keynote.<\/p>\n<p>The great thing about clickable wireframes is that they can be quickly and easily modified. Unlike a paper prototype where you\u2019ll need to redraw the entire screen if you want to make changes, you can make minor edits without starting from scratch. Still, low-fidelity wireframes are best suited for prototyping in the early stages of the project.<\/p>\n<h3 id=\"high-fidelity-prototypes\">High-fidelity prototypes<\/h3>\n<p><strong>Then there are high-fidelity prototypes: the more detailed, realistic prototypes that look and operate much like the final product.<\/strong> You\u2019ll move onto hi-fi prototypes once you have a good idea of what you\u2019re going to build. They\u2019ll help you to fine-tune the design and get it ready for market.<\/p>\n<p>Here\u2019s a comparison of a mid- and high-fidelity prototype from <a href=\"https:\/\/www.jamalnichols.com\/\" target=\"_blank\" rel=\"noopener\">Jamal Nichols<\/a>:<\/p>\n<p><img decoding=\"async\" src=\"\/en\/wp-content\/uploads\/old-blog-uploads\/kyte-compare.jpg\" alt=\"\" title=\"\"><\/p>\n<p>High-fidelity prototypes tend to include all the visual components, interactive elements, and content that will be featured on the final product. In fact, they look just like a real app or website\u2014which is hugely beneficial when it comes to user testing. The user feels like they\u2019re interacting with a live product, so you can expect them to behave naturally and provide meaningful feedback.<\/p>\n<p>Of course, high-fidelity prototypes are more expensive and time-consuming to produce than their low-fidelity equivalents. However, they are the most useful option when it comes to testing your designs. With a high-fidelity prototype, you can test pretty much every single element of your product before sending it off for development. Not only that: hi-fi prototypes enable you to show your colleagues and stakeholders from other departments exactly how the final product should look.<\/p>\n<p>When it comes to high-fidelity prototypes, you\u2019ll most likely create digital prototypes using specialist software. Some of the most popular prototyping tools on the market include Sketch, InVision, and Flinto. You can find a <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/prototyping-tools\/\" target=\"_blank\" rel=\"noopener\">comprehensive list of prototyping tools here<\/a>.<\/p>\n<h2 id=\"how-to-create-a-prototype-tips-and-best-practices\">5. How to create a prototype: Tips and best practices<\/h2>\n<p>Now we know exactly what prototyping is, why it\u2019s so valuable, and what kinds of prototypes we might use throughout the design process. There\u2019s only one thing left to do: create your own!<\/p>\n<p>Here are some pointers that will help you along the way:<\/p>\n<h3 id=\"choose-the-right-kind-of-prototype\"><strong>Choose the right kind of prototype<\/strong><\/h3>\n<p>Before you create a prototype, consider what stage you\u2019re at in the design process, as well as the time and resources available. Low-fidelity prototypes make sense in the early stages, but you\u2019ll want to move on to hi-fi prototypes as you get closer to shipping your product.<\/p>\n<h3 id=\"set-concrete-goals\"><strong>Set concrete goals<\/strong><\/h3>\n<p>Have a clear idea of what you want your prototype to achieve. In other words, what do you want to find out when you test your prototype? Remember to focus on user needs, keeping your problem statement in mind at all times!<\/p>\n<h3 id=\"use-the-right-tools\"><strong>Use the right tools<\/strong><\/h3>\n<p>If you\u2019re new to digital prototyping, spend some time playing around with a few of the most popular industry tools. Find the tool that meets your needs in terms of features and functionality, and familiarize yourself with the interface before you start prototyping. When the time comes, this will make the prototyping process much easier!<\/p>\n<h3 id=\"take-action\"><strong>Take action!<\/strong><\/h3>\n<p>Design Thinking is all about generating ideas and testing them, so prototype as and when you need to. Remember, the Design Thinking process isn\u2019t strictly linear, so you can whip up a prototype at any time.<\/p>\n<h2 id=\"what-next\">6. What next?<\/h2>\n<p>Prototyping and testing go hand in hand, so once you\u2019ve created a prototype, you\u2019ll need to put it in front of real users. You\u2019ll observe how they interact with the product in its current state, and ask for feedback on how the experience feels. You can <a href=\"\/en\/blog\/ux-design\/user-testing-design-thinking\/\" target=\"_blank\" rel=\"noopener\">learn more about how to test your prototypes in this guide<\/a>. Through continuous prototyping, you\u2019ll make informed design decisions\u2014iterating your way to an intuitive, user-friendly product that your users will love.<\/p>\n<p>If you\u2019d like to learn more about prototyping in UX design, check out these articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/rapid-prototyping-guide\/\">What is rapid prototyping?<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/prototyping-tools\/\" target=\"_blank\" rel=\"noopener\">The best prototyping tools for UX designers<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/difference-between-wireframes-prototypes-mockups\/\" target=\"_blank\" rel=\"noopener\">What\u2019s the difference between a wireframe, a prototype, and a mockup?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step four in the Design Thinking process is all about creating prototypes to test your ideas. Learn how and why in this introductory guide.<\/p>\n","protected":false},"author":5,"featured_media":72,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-5211","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-design"],"acf":{"homepage_category_featured":false,"cards_inner_programs_lists_left":"","cards_inner_programs_lists_right":"","related_plan_cards":""},"modified_by":"Rash SEO","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5211","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=5211"}],"version-history":[{"count":4,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5211\/revisions"}],"predecessor-version":[{"id":40703,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/5211\/revisions\/40703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/72"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=5211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=5211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=5211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}