--- title: Prototyping Best Practices url: "https://b13.com/knowledge/b13s-best-practices-for-prototyping" description: Prototypes are the best way to take your clients through user journeys. Here are b13’s best practices for communicating flows through interactive prototypes. image: "https://b13.com/fileadmin/_processed_/d/6/csm_prototyping_191-1_4c57983ffb.png" date: 2022-07-14 modified: 2026-08-19 lastUpdated: 2026-08-19 --- # Prototyping Best Practices [ UX/UI-Design ](https://b13.com/knowledge/uxui-design) b13’s best practices for prototyping ====================================== ![](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_9492752ded.jpg)Stefanie Kreuzer 12 July 2022 [ RSS Feed ](https://b13.com/rss.xml) ![Three wireframe designs for mobile applications are displayed, showcasing different layouts and content structures. Lines connect the screens, indicating a flow or relationship between them. The background features abstract orange and yellow shapes.](https://b13.com/fileadmin/_processed_/c/1/csm_prototyping_8cfac488ce.webp) **Prototypes showcase the user interactions and functional patterns behind a digital project. Here’s how we think about them.** Prototypes are a tool for communicating a future state in a design project—like a website relaunch or a newsletter redesign. They show how web content will be laid out and how users might flow from page to page. We create prototypes only once we’ve established our clients‘ paint points, what information needs to be displayed, and types of user flows . And having created prototypes for a variety of different projects, we’ve developed a set of best practices for prototyping at b13! Connect with us to learn more about our design services --------------------------------------------------------- [ Let’s connect ](https://b13.com/lets-connect) What’s the difference between a wireframe and an interactive prototype? ------------------------------------------------------------------------- There’s a lot of overlap between wireframing and prototyping—in fact, you can think of wireframing as a kind of low-fidelity prototype. A basic wireframe is like a blueprint. It has static screens and contains information on website function, structure, and flow, but doesn’t include actual content or styling. For more on wireframing, read our recent blog post, [Wireframing (best practices)](https://b13.com/knowledge/wireframing-best-practices). Interactive high-fidelity prototypes, on the other hand, are clickable and high-fidelity. They help our clients visualize every critical step of a user flow, like logging in and out during an authentication process. We usually create interactive prototypes to showcase usability for more complex projects—single-page updates usually don’t require interactive prototypes. ![Wireframe for TYPO3 demo project](https://b13.com/fileadmin/_processed_/d/1/csm_Wireframe_demoproject_630e215b80.webp) Wireframe for TYPO3 demo project ![Prototyp for TYPO3 demo project](https://b13.com/fileadmin/_processed_/e/e/csm_Prototyp_demoproject_89a1199fc9.webp) Prototyp for TYPO3 demo project Categorize prototypes by specific user journeys ------------------------------------------------- Prototypes help clients experience the user flow and functionality behind specific content types like forms or buttons. It allows them to test navigation throughout the sitemap and visualize the information architecture. We often break down prototypes into discrete user flows, like: - a shopping cart checkout process - newsletter subscription - a new visitor entering on a specific landing page (To name a few!) In a high-fidelity prototype, we take our clients through each journey, so they can see all the different steps and pages visited in each case, without switching processes midway through. Prototypes should also highlight what happens if the journey proves incomplete—for example, what happens when a user changes their mind about buying something or enters the wrong password. Communicate what’s missing ---------------------------- Prototypes are not the same thing as a polished website. They exist for communication and iteration—so they shouldn’t behave or look exactly like the final project! But sometimes clients get confused when they see a placeholder stock image or the company color scheme missing, or “links” that all lead to the same outline of a blog post contentpage. By letting our clients know exactly what prototypes are—and aren’t—supposed to do, we set expectations for a productive conversation. Visual design should always come last --------------------------------------- Whether a button has round edges or sharp corners, is orange or pink, doesn’t affect whether someone can sign up for your mailing list. Everything should work before your webpage looks visually appealing, so no matter what, make the visual design your last step in prototyping. Once a prototype is ready for visual touches, you can apply your design scheme to the entire prototype—so a “small button” design with sizing, color, and shape can be applied to all components labeled “small button.” Pressure test your responsive design -------------------------------------- Interactive design and prototyping tools let you preview how a page, menu, or newsletter looks at different breakpoints—like mobile, tablet, and desktop. They can also show animations, and content element states (i.e. what a button looks like in “hover” or “active” state). Spend time trying out all the different states and breakpoints to see how your screen will look to a user from any device. We can’t predict how your users will come to your website, so we want to make sure the experience is positive for every kind of channel, screen size, and operating system. Does your project need a prototype? ------------------------------------- Once a prototype has been approved and development is underway, we repackage the design into a visual design system. Developers get the right CSS attributes, and clients get a corporate design scheme, translated for the web. At that point, the heavy lifting for prototyping is over! We can help you visualize your user journeys before you begin development. ---------------------------------------------------------------------------- [ Let’s connect ](https://b13.com/lets-connect) ### Written by: ![Bild von Stefanie Kreuzer](https://b13.com/fileadmin/_processed_/1/a/csm_stefanie_5a7d55f637.webp) UX and interface designer, Stefanie, has a special quality we call “seeing the work.” She instantly understands what needs to be done for any given project, and gets on with it. Her essential tool: Maultaschen Stefanie Kreuzer UX Design [ more from Stefanie Kreuzer ](https://b13.com/team/stefanie-kreuzer) Related Articles ------------------ - ![A robotic hand holds a paintbrush, creating a purple swirl against a light blue background with circular patterns.](https://b13.com/fileadmin/_processed_/b/d/csm_DesignAndKI_Headerbild_bd966b1d32.webp) ### Designing Responsibly in the Age of AI: What We’re Learning as We Go 17 July 2026 | Laura Heine Laura Heine shares what she learned at the Design Leadership Meetup about responsibility, documentation, and treating AI fairly as a team. [ Read more: Designing Responsibly in the Age of AI: What We’re Learning as We Go ](https://b13.com/knowledge/designing-responsibly-in-the-age-of-ai-what-were-learning-as-we-go) - ![Several colorful web page mockups stacked together, showcasing different layouts and design elements against a purple background.](https://b13.com/fileadmin/_processed_/e/3/csm_CaminoTheme_Headerbild_d082598009.webp) ### Camino—The Need for a Default Theme in TYPO3 Is Real 27 January 2026 | Benni Mack With TYPO3 v14, Camino introduces a default theme that removes friction from first installs. Why this matters—and how TYPO3 laid the groundwork. [ Read more: Camino—The Need for a Default Theme in TYPO3 Is Real ](https://b13.com/core-insights/blog/camino-the-need-for-a-default-theme-in-typo3-is-real) - ![User interface design featuring a dark sidebar with navigation options and a central content area with placeholder text.](https://b13.com/fileadmin/_processed_/6/6/csm_V14BackendUX_Headerbild_6dcecb335f.webp) ### Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation 12 January 2026 | Laura Heine b13 is redesigning TYPO3’s backend for version 14 to feel modern, work faster, maintain user context, and create an expandable foundation that can evolve for years to come. [ Read more: Designing TYPO3 14’s Backend: Our Vision for a Modern, Expandable Foundation ](https://b13.com/knowledge/designing-typo3-14s-backend-our-vision-for-a-modern-expandable-foundation) - ![User interface elements including text fields, checkboxes, and buttons, connected by arrows on a purple background.](https://b13.com/fileadmin/_processed_/f/7/csm_EffectiveWebForms_Headerbild_2c906e6176.webp) ### Best Practices for Effective Web Forms 18 August 2025 | David Steeb Effective web form design is a critical component of user engagement and conversion. By focusing on clarity, simplicity, and user experience, businesses can create web forms that… [ Read more: Best Practices for Effective Web Forms ](https://b13.com/knowledge/creating-effective-web-forms) - ![A purple folder is centrally placed, surrounded by red and blue rectangular elements connected by lines on a grid background.](https://b13.com/fileadmin/_processed_/1/5/csm_EffectiveInformationArchitecture_Headerbild_c5bbf51bfe.webp) ### Designing an Effective Information Architecture: Best Practices 30 July 2025 | David Steeb Dive into our latest article exploring the world of information architecture and its profound impact on user experience. Learn key strategies and best practices for designing… [ Read more: Designing an Effective Information Architecture: Best Practices ](https://b13.com/knowledge/designing-an-effective-information-architecture-best-practices) - ![Two robotic arms are positioned around a magnifying glass, focusing on the letter "g" in a stylized font. The background features a grid pattern with repeated "Ag" symbols.](https://b13.com/fileadmin/_processed_/1/8/csm_FontGuidelines_Headerbild_6f3f5a0baa.webp) ### Designing with Type: A Guide to UI Font Size Guidelines 03 June 2025 | David Steeb Discover the importance of UI font size guidelines for creating accessible and visually appealing UI designs. Learn the best practices for typography in UI, including consistency,… [ Read more: Designing with Type: A Guide to UI Font Size Guidelines ](https://b13.com/knowledge/designing-with-type-a-guide-to-ui-font-size-guidelines) - ![A graduation cap is centrally placed among various flowchart elements, including rectangles and circles, set against a gradient background. The design suggests themes of education and decision-making processes.](https://b13.com/fileadmin/_processed_/2/e/csm_MasteringWebFlow_Headerbild_1558d4dcea.webp) ### Mastering Website Flowcharts 21 May 2024 | Stefanie Kreuzer An optimal user flow is crucial for successful websites. Learn how to use flowcharts to achieve clarity early in the UX design process. [ Read more: Mastering Website Flowcharts ](https://b13.com/knowledge/mastering-web-flow-charts) - ![Wireframing Best Practices](https://b13.com/fileadmin/_processed_/1/e/csm_Wireframing_4b24c64a42.webp) ### Mastering the Art of Wireframing: Essential Tips and Technique 31 August 2023 | Stefanie Kreuzer Wireframing is the first step in designing the structure of a website, and it serves many purposes; to describe how information is presented on a page, to determine a website’s… [ Read more: Mastering the Art of Wireframing: Essential Tips and Technique ](https://b13.com/knowledge/wireframing-best-practices) - ![A pathway leads through stylized clouds, flanked by a magnifying glass and gears, with icons representing text and documents in the background, suggesting themes of exploration and technology.](https://b13.com/fileadmin/_processed_/8/0/csm_accessibility-guide_0acd1932f3.webp) ### A Guide to Accessibility Considerations in UX Design 12 April 2024 | Franzi Töpler People with disabilities constitute one of the most significant segments of online users, but it is an often-overlooked population in the digital world. Increasing accessibility to… [ Read more: A Guide to Accessibility Considerations in UX Design ](https://b13.com/knowledge/a-guide-to-accessibility-considerations-in-ux-design) - ![A hand is placing a red shape into a flowchart composed of various geometric figures, including rectangles and circles, with directional arrows indicating connections between them. The background features a grid pattern.](https://b13.com/fileadmin/_processed_/c/3/csm_UserFlowGuide_Headerbild_54abda2aa4.webp) ### Excelling in User Flow Design 03 April 2024 | Stefanie Kreuzer User flow design visualizes the path that the user follows to achieve a specific goal. In digital terms, the path is what the user sees and clicks on when interacting with a… [ Read more: Excelling in User Flow Design ](https://b13.com/knowledge/excelling-in-user-flow-design)