{"id":15247,"date":"2024-02-15T12:04:28","date_gmt":"2024-02-15T20:04:28","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15247"},"modified":"2024-06-23T20:54:19","modified_gmt":"2024-06-24T03:54:19","slug":"website-prototyping-the-hands-on-guide","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/","title":{"rendered":"Website Prototyping: The Hands-on Guide"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2-1024x512.png\" alt=\"image2\" class=\"wp-image-52031\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>A perfect website isn\u2019t made in one smooth creation and launch effort. Seamless and fully functional sites are the result of careful prototyping. Prototypes allow early imperfections to be weeded out of websites and offer opportunities to maximize the effectiveness of your site.<\/p>\n\n\n\n<p>A business\u2019s website is, oftentimes, the first impression made on investors and customers. Understanding how to perfect your website through prototyping is crucial for early success, which is why this article covers website prototyping in depth.<\/p>\n\n\n\n<p>Create a website prototype that you can actually test with users. Build an interactive prototype in UXPin and design a UI that brings the whole team together. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What is a website prototype?<\/h2>\n\n\n\n<p>A website prototype is an early version of a site that serves as a starting point. The ability to prototype creates room for exploration, refinement, and perfection in an effective way. One of its best aspects is that it creates a space for development prior to publishing a website.<\/p>\n\n\n\n<p>A prototype can start out in a low-fidelity format and contain a simple outline of the site&#8217;s form and function. This outline can evolve into a high-fidelity prototype with all of the details and interactive design intended for the final product.<\/p>\n\n\n\n<p>The flexibility of website prototyping benefits all parties. Designers and developers have a space to perfect their products, while stakeholders can get a realistic idea of the interface early on. Even clients benefit from the flawless user interface that prototyping helps develop.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Benefits of website prototypes<\/h2>\n\n\n\n<p>Let\u2019s highlight the most notable impacts website prototyping offers, so you can visualize how your business will benefit.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Visualization<\/h3>\n\n\n\n<p>Visually appealing platforms are best created through a visually informed process, like prototyping. A powerful system allows multiple iterations, as the early image of a site develops into something fully functional.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/GVWRfSmcr_kfHenEbiu7_v5Ybul5Fgpz_qLbZHX-LospgeCoKqGSHTQa9mNKsEZcSBFz01h-mselcqLd7ZXFHr-hQxBXxj3-rl9HMIyC8EP5vAxoq4GTboeIz-h5IRJfkZZDSwEwm9Go\" alt=\"\"\/><\/figure>\n\n\n\n<p>The ability to visualize each step of a site\u2019s development in real time gives everyone involved a chance to be included and inspired. Designers and developers have the option to constantly tweak and interact with their work to find the perfect fit for a site. The ability to actively assess the direction of a project also benefits <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/stakeholder-analysis-for-product-teams\/\" target=\"_blank\" rel=\"noreferrer noopener\">stakeholders<\/a> who may not fully understand a team\u2019s progress and goal without interactive visuals.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Early feedback<\/h3>\n\n\n\n<p>Nothing is more time-consuming and fruitless than completing a project only to find that, at some point, things are headed in the wrong direction and need to be redone. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-a-prototype-a-guide-to-functional-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">Prototyping<\/a> is an effective strategy for avoiding these late-development pitfalls.<\/p>\n\n\n\n<p>When teams are able to interact with their design during all stages of construction, feedback is easily generated and implemented. With the ability to test and reorient the direction of a platform at any time, it is far less likely that the end product will miss its goals at completion.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">User experience testing<\/h3>\n\n\n\n<p>The final product is all about its users, so why not <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-testing-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">integrate user input<\/a> as early into the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-process-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">design process<\/a> as possible?<\/p>\n\n\n\n<p>Prior to a product\u2019s completion, the user interface and user design can be tested on real users with a prototype. This allows for a fully interactive experience, so users can test and provide feedback on all functions of a website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Risk reduction<\/h3>\n\n\n\n<p>Website design can be riddled with hidden pitfalls that only become blatantly apparent when the site is published. User interface issues like confusing navigation and inconsistent design styles can diminish your website&#8217;s impact.&nbsp;<\/p>\n\n\n\n<p>Interactive prototyping helps mitigate these risks by bringing issues with website form or function into plain view prior to publishing. What would have been a costly complication, is little more than a slight tweak with a prototype.<\/p>\n\n\n\n<p>You can even reduce risks beyond functionality by using a prototype to ensure the product <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-goals-vs-business-goals-finding-the-ux-tipping-point\/\" target=\"_blank\" rel=\"noreferrer noopener\">aligns with the visions of stakeholders<\/a>. An alignment with company goals is much easier to assess when the site can be easily reviewed during its creation by anyone in the company.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Clear communication<\/h3>\n\n\n\n<p>A cohesive and smoothly functioning platform is the result of a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-functional-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">well-connected team<\/a>. While there are plenty of ways to foster general teamwork, communication on a singular product is best accomplished with a shared source of information.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/H6jURC84ElarofQUJxYdjlpPJpPnwDM1Zzg7pSCg7nRwA8xAV0Xj1p8yKJ63wcCFfdcZoTW00noXp2WcO7x7JcYaPX_UwLvUjKlyvZIF6nT8bXf2DvXto8e18mslGb285Dala_qDwzdG\" alt=\"\"\/><\/figure>\n\n\n\n<p>A prototype is the perfect central point of information for a website design team to communicate through. Contributions from all members can be seen and interacted with in this format, allowing all members to be on the same page and discuss various points of improvement.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Efficient iteration<\/h3>\n\n\n\n<p>Editing a fully published website is a very complex process that can be avoided with the right tools. The ability to repeatedly create new iterations of a project with ease helps build the best product you can.<\/p>\n\n\n\n<p>An effective and efficient process for creating new iterations of a project encourages teams to make more edits prior to publishing and pursue more creative concepts. As a result, final sites are more likely to run smoothly and stand out from cookie-cutter competitors\u2019 sites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">User-centered design<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/14-articles-improve-user-research\/\" target=\"_blank\" rel=\"noreferrer noopener\">User research<\/a> can only go so far. This form of user integration may work for concept creation, but as platforms are developed, more specific user input is needed. Prototypes offer an opportunity to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototypes-improve-usability-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\">explore user interactions<\/a> in a way that is unique to your website.<\/p>\n\n\n\n<p>By granting test users access to interact with and review a prototype of a site, teams gain a better understanding of what improvements can be made. Issues that may have otherwise been missed by a busy design team can be highlighted by users, and this information can inspire impactful improvements.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Defining the scope<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-beginners-guide-to-capturing-ux-requirements\/\" target=\"_blank\" rel=\"noreferrer noopener\">Defining and maintaining scope<\/a> is an important part of any project, and websites are no exception. With multiple individuals involved in the creation of a website, a loose scope can result in projects taking up more time and resources for developments that are not necessary.<\/p>\n\n\n\n<p>Prototypes act like an outline, allowing teams to define the scope of their work early on. Specifying what features are needed creates a foundation for focus, where any additions that fall outside of the project\u2019s scope can be easily caught and redirected.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Stakeholder approval<\/h3>\n\n\n\n<p>Stakeholders may not have an in-depth understanding of website design, making it difficult to describe a product and receive approval. Prototypes provide an accurate visual reference that makes projects easy for stakeholders to perceive and approve.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cost savings<\/h3>\n\n\n\n<p>The later mistakes are caught, the larger and more costly they tend to be. Early resolution of design errors or flaws in a prototype can prevent mistakes from growing into a financial burden in the final version of a site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Design exploration<\/h3>\n\n\n\n<p>Exploration tends to be most inviting and effective when it is easy and without risk. Prototypes provide designers with a risk-free space to indulge in creative whims and the best prototyping systems allow easy access to a variety of design tools.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/-XkbWt0LhCb1yq5dhuMRlslhgNGDUlYEcn6fJ1HpNUEy92IVDteBkzhiwx4DUcSIAY6yyCWffGJ5vnAYo6IOZWrT3PZixDVConV4Ky8FrcEviO7NcMZxCv6l4Z8zSvSZsVgLcDcK0wHG\" alt=\"\"\/><\/figure>\n\n\n\n<p>This form of exploration opens up opportunities for new design styles that might help your website stand out and impress its audience.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to create a website prototype<\/h2>\n\n\n\n<p>If website prototyping sounds like it would benefit your business, that&#8217;s great! Here are a few important things to consider before getting started to maximize your prototype&#8217;s potential.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Run preliminary work<\/h3>\n\n\n\n<p>Well-executed ideas tend to have one thing in common, research. Understanding how, why, and for whom you plan to design a website should come before all else. Take time to identify your target audience with some preliminary user research studies. Understanding what users want and marrying those concepts with what your website is meant to do can set up a successful foundation.<\/p>\n\n\n\n<p>While you can\u2019t expect to have every answer at such an early phase, it is worth trying to answer every core question you can think of regarding your future website. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is the purpose of your site?<\/li>\n\n\n\n<li>How would you categorize your website; as a blog, a sales platform, or something else?<\/li>\n\n\n\n<li>Who is your intended audience?<\/li>\n\n\n\n<li>How will your audience interact with your website?<\/li>\n\n\n\n<li>What features will your site need to succeed?<\/li>\n\n\n\n<li>How will your website be similar to others in its category?<\/li>\n\n\n\n<li>How will it be different?<\/li>\n<\/ul>\n\n\n\n<p>The more preliminary work you do, the easier and more precise the following design steps will be. For more information on preliminary work, explore the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/digital-product-development-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">product development guide<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sketch out your first visuals<\/h3>\n\n\n\n<p>With all of your key elements and goals in mind, it&#8217;s time to create the precursor to your prototype. This original outline is often referred to as a wireframe and its goal is to outline your website&#8217;s key features.<\/p>\n\n\n\n<p>This rough draft should detail things like the site\u2019s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/organizing-information\/\" target=\"_blank\" rel=\"noreferrer noopener\">information architecture<\/a>, interactive elements, and basic design ideas. Details and precision are not the main goals during this phase, so wireframes can be generated with mockup tools or hand-drawn sketches. A little <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/paper-prototyping-the-practical-beginners-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">paper prototyping<\/a> know-how can go a long way in this stage.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create a prototype with UXPin<\/h3>\n\n\n\n<p>Now it&#8217;s time for the main event; a prototype that is flexible, interactive, and capable of representing a completed product. Your wireframe initiates this process, by directing focus towards the key aspects of your design. Meanwhile, the prototype allows for the addition of new details.<\/p>\n\n\n\n<p>The traditional prototyping process can be lengthy and complex, but advancements in technology have simplified prototyping. UXPin is one such tool, designed specifically to improve the efficiency and effectiveness of prototyping in website design.<\/p>\n\n\n\n<p>UXPin prototypes are designed for simplified<a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/preview-and-share\/\"> previewing<\/a> so your team can check for imperfections and get feedback with ease. Previews can be tested in multiple browsers or even viewed on mobile devices to ensure they meet your standards in all formats. With <a href=\"https:\/\/www.uxpin.com\/docs\/sharing\/uxpin-mirror\/\">UXPin Mirror<\/a>, you can even see the difference your updates make in real time on mobile devices.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/5HZdIQrgZJzi0tzcUT7SA71FhrARVJ_Uix8cW-MdTkVwo2u0Czf58zXeDX77PuqKuWNTCJWOsmNFCV-tpfQMXDOC5mpWQOpOnf8OjQ3X2OrTezQllx1HqclJGm5LD_oxiS7-5YlOOGS5\" alt=\"\"\/><\/figure>\n\n\n\n<p>A library of advanced features ensures that your UXPin prototype will accurately encapsulate every detail you intend to have in a completed website. Create various states for interactive components, design a drop-down menu that supports smooth navigation, or organize with tab menus, navigational drawers, and many other options.<\/p>\n\n\n\n<p>The opportunities for customization in the prototyping phase don\u2019t stop here. Variables can be added to personalize user experiences and expressions can be used to compute a variety of values, like those in a virtual shopping cart. You can even generate conditional interactions to have your site respond differently based on users&#8217; interactions.&nbsp;<\/p>\n\n\n\n<p>UXPin\u2019s professionally designed prototyping tool allows you to create all of the complex functions necessary for a professional website, through a simplified system that does not require you to learn how to code.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Validate your concept and refine your website prototype<\/h3>\n\n\n\n<p>Once you have generated a prototype that fits your goals, it&#8217;s time to test. An interactive and fully functioning prototype can be used to test how well users are able to navigate your website. Record how long it takes users to discover and use specific features, identify challenges, and observe how your design is received.<\/p>\n\n\n\n<p>With a flexible prototype, revisions can be easily implemented based on user response and then those revisions can be retested to refine your website into its final form.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Practical Example of a Website Prototype in UXPin<\/h2>\n\n\n\n<p>When designing for users, you need to know their end goals and actions along the way. The two are called content and user flows, respectively, and together they form the heart of any great website.<\/p>\n\n\n\n<p>But how do we go from an information outline to interactive design? In this post, we\u2019ll discuss how to turn a set of content into a prototype, rapidly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-assemble-a-content-inventory\">Step 1: Assemble a content inventory<\/h3>\n\n\n\n<p>What are we designing? Many designers start from the outside and work their way in, crafting the containers and framework before examining the information that users spend more time with.<\/p>\n\n\n\n<p>When you start designing from the inside out, you design with the user in mind. What they need to see immediately will gain prominence over what you want them to notice second. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/navigation-ui\/\">Navigation bars<\/a> deserve less attention than the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">call to action<\/a>, for example.<\/p>\n\n\n\n<p>As importantly, a content-first approach is also naturally a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">mobile-first approach<\/a>. Mobile devices have more limitations, screen size, and bandwidth to name a few, and so designing within these parameters force you to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-content-strategy\/\" target=\"_blank\" rel=\"noreferrer noopener\">prioritize content ruthlessly<\/a>.<\/p>\n\n\n\n<p>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/content-inventory\/\" target=\"_blank\" rel=\"noreferrer noopener\">content inventory<\/a>\u00a0is an organized list, spreadsheet, or equivalent document containing all the elements relevant to the end-user. A good inventory acts as a hierarchy of information divided into sections.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"662\" height=\"441\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/content-list.png\" alt=\"Content inventory\" class=\"wp-image-15248\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/content-list.png 662w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/content-list-450x300.png 450w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><\/figure>\n\n\n\n<p>Your completed content inventory lays out all the possibilities for your <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">user flows<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-plan-the-core-flow-with-informed-decisions\">Step 2: Plan the core flow with informed decisions<\/h3>\n\n\n\n<p>A complex project like a banking website will require many flows, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Changing a password<\/li>\n\n\n\n<li>Viewing investment options<\/li>\n\n\n\n<li>Reviewing 401k<\/li>\n\n\n\n<li>Ordering checks<\/li>\n\n\n\n<li>Opening a new account, or closing an old one<\/li>\n\n\n\n<li>Transferring funds to or from a different bank<\/li>\n\n\n\n<li>Paying the credit card balance<\/li>\n<\/ul>\n\n\n\n<p>Each flow requires a user to weave through multiple content pages. For the sake of this tutorial, we\u2019ll focus just on the credit card payment process, one of the most crucial flows. When you prototype, focus first on the riskiest or most fundamental user flows.<\/p>\n\n\n\n<p>Let\u2019s write it out this <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">user flow<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The user lands on the homepage.<\/li>\n\n\n\n<li>The user completes their login information and redirects to their dashboard.<\/li>\n\n\n\n<li>The user clicks into their credit card balance.<\/li>\n\n\n\n<li>The user chooses an account from which to pay the balance. Then submits the request and confirms their balance is paid off.<\/li>\n<\/ul>\n\n\n\n<p>That sounds like a lot of steps, but there are only three decisions involved: deciding whether or not to pay, choosing an account from which to do so, and choosing to confirm the transaction. Each step must be clear and effortless in our prototype.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-build-the-prototype\">Step 3: Build the prototype<\/h3>\n\n\n\n<p>In this case, we\u2019ll build a user flow that lets people pay off their credit card balance at a fictional bank.<\/p>\n\n\n\n<p>Given real content, our goal is to build a mid-fi. Unlike <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/high-fidelity-prototyping-low-fidelity-difference\/\" target=\"_blank\" rel=\"noreferrer noopener\">lo-fi prototypes<\/a>, which act like boxy wireframes, or hi-fis, which show branding in place, mid-fis demonstrate the flow of decisions users take to accomplish a task.<\/p>\n\n\n\n<p>If you\u2019re limited on <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-iteration-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">iterations<\/a>, mid-fi prototypes are the perfect choice since you don\u2019t waste time on visual design but still provide enough detail for user testing.<\/p>\n\n\n\n<p>In a mid-fi, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/functional-prototype\/\" target=\"_blank\" rel=\"noreferrer noopener\">functional prototype<\/a>, you\u2019ll want to show:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Correct layout of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">UI elements<\/a> (navigation, primary content, etc.)<\/li>\n\n\n\n<li>Basic <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/color-schemes-for-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">colors<\/a><\/li>\n\n\n\n<li>Basic interactions (no advanced animations or states yet)<\/li>\n\n\n\n<li>Correct <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">typography<\/a><\/li>\n\n\n\n<li>Images in the correct dimensions<\/li>\n<\/ul>\n\n\n\n<p>Here\u2019s how we\u2019d make it work for our bank website.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-login-page\">Login page<\/h4>\n\n\n\n<p>Logging in is easy: a simple form on the bank\u2019s home page lets users securely enter their account. But we don\u2019t neglect this obligatory step because it\u2019s the user\u2019s first interaction with the bank and its brand. Everything from the color scheme to the microcopy must fit with the friendly-yet-professional tone.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1390\" height=\"719\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/login.png\" alt=\"Bank login screen\" class=\"wp-image-15249\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/login.png 1390w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/login-580x300.png 580w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/login-768x397.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/login-1024x530.png 1024w\" sizes=\"auto, (max-width: 1390px) 100vw, 1390px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-account-overview\">Account overview<\/h3>\n\n\n\n<p>Upon entering their username and password, they see a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/prototype-dashboard\/\" target=\"_blank\" rel=\"noreferrer noopener\">dashboard<\/a> that includes their account information. The purpose of this screen is to give the person an overview of their accounts. There are no ads, no upsells, and secondary information is pushed to one side. It\u2019s all about their money.<\/p>\n\n\n\n<p>To help them decide if it\u2019s time to pay, we\u2019ll include their credit card balance on this screen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1389\" height=\"762\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/dashboard.png\" alt=\"Bank dashboard\" class=\"wp-image-15250\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/dashboard.png 1389w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/dashboard-547x300.png 547w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/dashboard-768x421.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/dashboard-1024x562.png 1024w\" sizes=\"auto, (max-width: 1389px) 100vw, 1389px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-payment-process\">Payment process<\/h4>\n\n\n\n<p>According to the user flow, we know that the person\u2019s next move is to choose to pay the card balance. That\u2019s an easy click \u2014 and presents a second decision. At this point, he or she must choose the account to withdraw money from.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1391\" height=\"584\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/pay-balance.png\" alt=\"Bank pay balance\" class=\"wp-image-15251\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/pay-balance.png 1391w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/pay-balance-700x294.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/pay-balance-768x322.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/pay-balance-1024x430.png 1024w\" sizes=\"auto, (max-width: 1391px) 100vw, 1391px\" \/><\/figure>\n\n\n\n<p>Decisions take time and cognitive power, so we should make choosing an account dead simple. Each account is listed with as little information as necessary (the account name and balance).<\/p>\n\n\n\n<p>Next, the person reaches their third decision: whether or not to commit the transaction. At this point, all they need to know is what the transaction\u2019s about. That means we can eliminate the previous decision\u2019s options.<\/p>\n\n\n\n<p>A new screen, or even a simple modal window, will present the information they need to make that decision. Specifically, the account name, the amount to pay, and the approve and disapprove buttons.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1391\" height=\"620\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/confirmation.png\" alt=\"Bank confirmation\" class=\"wp-image-15252\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/confirmation.png 1391w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/confirmation-673x300.png 673w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/confirmation-768x342.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/confirmation-1024x456.png 1024w\" sizes=\"auto, (max-width: 1391px) 100vw, 1391px\" \/><\/figure>\n\n\n\n<p>Success! Clicking the right button confirms that the balance is now cleared.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-getting-close-to-reality-makes-it-work\">Getting close to reality makes it work<\/h2>\n\n\n\n<p>Notice that each screen in this design uses both realistic colors, typography, and layout \u2014 in addition to real microcopy. It\u2019s not fully polished, but enough to start testing.<\/p>\n\n\n\n<p>At this point, we just need to add some basic interactions so people can click through the screens. Once that\u2019s finished, it\u2019s time to collect feedback, iterate as needed, and then test with our users.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"393\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/02\/process.gif\" alt=\"Bank process\" class=\"wp-image-15253\"\/><\/figure>\n\n\n\n<p>To complete your prototype, just repeat all the above steps with each user flow.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-build-your-own-prototype-in-uxpin\">Build your own prototype in UXPin<\/h2>\n\n\n\n<p>People visit an interactive website to accomplish a task, not use a widget or admire its graphics. That makes the flow along with real content as important as developing a prototype\u2019s UI.<\/p>\n\n\n\n<p>Content-centric design helps find their way along that path. If you\u2019d like to try what you learned in this guide, go ahead and start your free trial in <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A perfect website isn\u2019t made in one smooth creation and launch effort. Seamless and fully functional sites are the result of careful prototyping. Prototypes allow early imperfections to be weeded out of websites and offer opportunities to maximize the effectiveness of your site. A business\u2019s website is, oftentimes, the first impression made on investors and<\/p>\n","protected":false},"author":3,"featured_media":52031,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,8],"tags":[],"class_list":["post-15247","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-prototyping"],"yoast_title":"","yoast_metadesc":"What makes a user flow work? Here\u2019s a five-minute guide to rapid prototyping, full of examples and instructions.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Website Prototyping: The Hands-on Guide | UXPin<\/title>\n<meta name=\"description\" content=\"What makes a user flow work? Here\u2019s a five-minute guide to rapid prototyping, full of examples and instructions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Prototyping: The Hands-on Guide\" \/>\n<meta property=\"og:description\" content=\"What makes a user flow work? Here\u2019s a five-minute guide to rapid prototyping, full of examples and instructions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-15T20:04:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-24T03:54:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"44 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Website Prototyping: The Hands-on Guide\",\"datePublished\":\"2024-02-15T20:04:28+00:00\",\"dateModified\":\"2024-06-24T03:54:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/\"},\"wordCount\":2884,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/image2.png\",\"articleSection\":[\"Blog\",\"Process\",\"Prototyping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/\",\"name\":\"Website Prototyping: The Hands-on Guide | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/image2.png\",\"datePublished\":\"2024-02-15T20:04:28+00:00\",\"dateModified\":\"2024-06-24T03:54:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"What makes a user flow work? Here\u2019s a five-minute guide to rapid prototyping, full of examples and instructions.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/image2.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/02\\\/image2.png\",\"width\":1200,\"height\":600,\"caption\":\"image2\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/website-prototyping-the-hands-on-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Prototyping: The Hands-on Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Website Prototyping: The Hands-on Guide | UXPin","description":"What makes a user flow work? Here\u2019s a five-minute guide to rapid prototyping, full of examples and instructions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/","og_locale":"en_US","og_type":"article","og_title":"Website Prototyping: The Hands-on Guide","og_description":"What makes a user flow work? Here\u2019s a five-minute guide to rapid prototyping, full of examples and instructions.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/","og_site_name":"Studio by UXPin","article_published_time":"2024-02-15T20:04:28+00:00","article_modified_time":"2024-06-24T03:54:19+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"44 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Website Prototyping: The Hands-on Guide","datePublished":"2024-02-15T20:04:28+00:00","dateModified":"2024-06-24T03:54:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/"},"wordCount":2884,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2.png","articleSection":["Blog","Process","Prototyping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/","name":"Website Prototyping: The Hands-on Guide | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2.png","datePublished":"2024-02-15T20:04:28+00:00","dateModified":"2024-06-24T03:54:19+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"What makes a user flow work? Here\u2019s a five-minute guide to rapid prototyping, full of examples and instructions.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/02\/image2.png","width":1200,"height":600,"caption":"image2"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/website-prototyping-the-hands-on-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Website Prototyping: The Hands-on Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=15247"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15247\/revisions"}],"predecessor-version":[{"id":53609,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15247\/revisions\/53609"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/52031"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}