{"id":7111,"date":"2022-07-21T09:17:26","date_gmt":"2022-07-21T09:17:26","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7111"},"modified":"2024-01-16T12:04:48","modified_gmt":"2024-01-16T12:04:48","slug":"prototyping-guide","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/prototyping-guide\/","title":{"rendered":"A complete guide to prototyping"},"content":{"rendered":"

In a world where technology is constantly changing and rapid iteration to grow products is the norm, knowing how to prototype as a UX designer is more important than ever. Prototyping<\/a> is a vital part of the process of creating successful user experiences.<\/p>\n

In this guide, you\u2019ll learn what prototyping is, what is not a prototype, why they\u2019re important, how interactive a prototype should be and four ways prototypes are created.<\/p>\n

\n\t
\n\t\t
\n\t\t\t
\n \n

[GET CERTIFIED IN UX]<\/p>\n Take our Professional Diploma in UX Design course<\/span>\n <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n

What is prototyping?<\/h2>\n

Prototyping is the act of creating a prototype. Prototyping usually happens during the research and development phase of a product\u2019s lifecycle. It often occurs before developers<\/a> begin coding as well as the final phase of product development before the final rollout.<\/p>\n

What is a prototype?<\/h4>\n

A prototype is a preliminary model of something from which later iterations are developed or copied. It\u2019s essentially a way to show design intent.<\/p>\n

In UX design, a prototype is usually some sort of simulation that shows developers, stakeholders and other team members how users will interact with the final product. This could be a UX design plan for an entire app or only a singular interaction.<\/p>\n

What isn\u2019t a prototype?<\/h4>\n

A prototype is not wireframes<\/a> or mockups. In UX Design, prototypes are expected to have some level of interactivity. Mockups and wireframes are considered static, non-interactive design assets. Sometimes sketches are acceptable versions of a prototype, as long as multiple sketches are laying out an experience.<\/p>\n

What is the purpose of prototyping?<\/h2>\n

It\u2019s nearly impossible to design a great product without testing. Prototyping allows for testing before development for maximum efficiency throughout the building process. Effective testing during the research phase will save the product\u2019s reputation. Plus, it\u2019ll make the time and money spent on developing the product much more efficient.<\/p>\n

Prototyping<\/a> allows designers to make sure their concept will work as they intended. UX research<\/a> and testing will also help maximise usability. Iteration based on the feedback gathered from real-life user testing is incredibly important to finding and resolving issues before a product is launched.<\/p>\n

What is fidelity?<\/h2>\n

Fidelity refers to how precisely a prototype lines up with the final product. The fidelity of a prototype might vary in its functionality, visual design or content.<\/p>\n

Lo-fi prototypes<\/h4>\n

A product that is not autonomously interactive, has an incomplete visual design or lacks content would be considered a low-fidelity or lo-fi prototype. Lo-fi prototypes are an easy method to communicate a high-level design concept tangibly.<\/p>\n

Lo-fi prototypes are generally used for testing functionality rather than visual design. During testing, the designer will simulate how a user will interact with the product through a prototyping kit or by manually shifting through sketches or wireframes.<\/p>\n

Lo-fi prototypes are affordable, speedy and helpful for team collaboration. They\u2019re especially handy when a designer needs to clarify an idea to a stakeholder or developer. While they\u2019re helpful internally, lo-fi prototypes can confuse users during testing. They can require a good deal of imagination to get the gist with their limited design and dynamics.<\/p>\n

Hi-fi prototypes<\/h4>\n

High-fidelity or hi-fi prototypes are essentially functional prototypes. They look and act as closely as possible to the final product. A hi-fi prototype is realistic, detailed, dynamic and functional. They look like a real app or website, have the same content that will appear in the final design and are interactive.<\/p>\n

Once a team has tested, iterated and clarified their designs, they create a hi-fi prototype. Hi-fi prototypes are typically used for \u2013 you guessed it \u2013 more testing. They can also be presented to stakeholders for approval in the final stages.<\/p>\n

Generally, hi-fi prototypes are more expensive because they take more time and work to develop. They\u2019re great for usability testing with real users. They allow designers to test very specific aspects of their design choices like animated transitions, stages of the user\u2019s journey and micro-interactions.<\/p>\n

How are prototypes made?<\/h2>\n

Prototypes can be made analog \u2013 on paper \u2013 or digitally. Digital prototypes are typically made using wireframe software and prototyping tools like Figma<\/a>, Sketch, Framer or Adobe XD.<\/p>\n

Paper prototype<\/h4>\n

Paper prototyping is when a digital product or interface is sketched out on paper. This is a low-fidelity form of prototyping. Usually, designers create hand drawings of the different screens they want to explore. One designer will act as the \u201ccomputer\u201d by switching out different buttons, drawings or \u201cscreens\u201d based on a user\u2019s action.<\/p>\n

Linked wireframe prototype<\/h4>\n

To create a linked wireframe prototype, designers create digital mockups of each part of an app or website and link them together. When users click on something, they will be taken to another corresponding wireframe, mimicking how the final product will work. Clickable wireframes can be created with wireframe software. Linked wireframes are generally considered to be lo-fi prototypes.<\/p>\n

Digital prototype<\/h4>\n

Digital prototypes are high-fidelity mockups of an entire app. They can be created with prototyping software. Digital prototypes allow designers to optimise the responsiveness of their design choices and perform accurate user testing.<\/p>\n

Coded prototype<\/h4>\n

Coded prototypes are typically a hi-fi mockup of the proposed final product. They are the closest thing you can get to the ready-to-launch design. Coded prototypes will provide the groundwork for future versions of the product. Often, coded prototypes are only used in later stages or by designers who know how to code.<\/p>\n

How interactive should a prototype be?<\/h2>\n

All prototypes in user experience design should have some interactivity. The level of interactivity your prototype has will depend on why you\u2019re building the prototype, what stage of design you\u2019re in and how much time you have to create the prototype.<\/p>\n

If you\u2019re developing a prototype to show the user\u2019s journey or start designing a specific feature, a lo-fi prototype might be enough to work through your challenges. However, if you\u2019re creating a prototype for user testing, hi-fi prototypes will get you more accurate data.<\/p>\n

Prototyping is meant to help designers test their intentions. In the long run, prototyping also helps teams save money and time. If creating a hi-fi prototype won\u2019t help you save time, money or allow you to test it effectively, then a lo-fi prototype might be enough for this phase of design.<\/p>\n

The takeaway<\/h2>\n

Whether you\u2019re attempting to present your final design idea to stakeholders or attempting to communicate with another designer, prototyping is the way to do it. It\u2019s an essential skill for any designer.<\/p>\n

As a designer, you\u2019ll likely create prototypes throughout each product development phase on every project throughout your career. It\u2019s useful to learn the lingo, the process and the expectations of prototypes.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this guide, you\u2019ll learn what prototyping is, what is not a prototype, why they\u2019re important, how interactive a prototype should be and four ways prototypes are created.<\/p>\n","protected":false},"author":24,"featured_media":7112,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278],"tags":[],"class_list":["post-7111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7111"}],"version-history":[{"count":4,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7111\/revisions"}],"predecessor-version":[{"id":9711,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7111\/revisions\/9711"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7112"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}