How to Create a Prototype for Your Design Project?

User experience (UX) design is increasingly important. And prototyping plays a vital role in the process of creating successful UX. At the same time prototyping is still one of the most confusing terms of the UX design process.

Why? A prototype can be almost anything, from a series of paper sketches to a fully-functional, pixel-perfect app.

Many product companies use prototypes as their major (if not only) testing instrument. Keep reading the post and you will:

  • learn a bit more about prototypes in design and software development;
  • differentiate three major forms of prototyping;
  • know how to create a prototype (by using some great tools).

What is a Prototype?

If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.

The idea expressed by the founders of IDEO design company - Tom and David Kelley - proves the fact that prototypes not only prevent you from possible design mistakes but also:

  1. Save time thanks to the previously thought-out structure and blocks arrangement;
  2. Simplify the work for developers. Following a strict scheme, they will have all the needed info (e.g. the values of image size, distance, etc).
  3. Facilitate interaction. A prototype works somewhat as a technical task and is guided by all team members, including developers, marketing specialists, etc.
  4. Increase sales. Correct placement of CTA elements, navigation elements, promo banners, and product cards is super important in terms of sales strategy.

Forms of Prototypes

Prototypes can come in a variety of forms. They might differ in the level of visualization (low fidelity, high-fidelity), and interactivity (graphic or static, dynamic).

Overall, prototypes fall into three main categories: paper, digital, and HTML.

Type #1: Paper Prototype

Although being the oldest form of prototyping (and the only one before the advent of computers), paper drafts are still very common at a certain stage of development.

Product companies use paper prototyping mainly for testing product ideas (the earliest development stage) for overly abstract “raw” concepts.

Pros:

  • Speed. A simple paper prototype takes a few minutes to draw - perfect for testing ideas directly during the meeting;
  • Accessibility. The only instruments you need to draw a prototype are paper and a pen/pencil. Both are super affordable and accessible everywhere you can be;
  • Team building. Creating paper prototypes is a fun activity that brings people together and builds team spirit;
  • Documentation. Unlike digital prototypes, paper prototypes can be stored as documents, quickly annotated, and instantly modified.

Cons:

  • “Not so real”. Regardless of the skill of the designer, paper prototypes are a poor substitute for digital systems and difficult in gauging usability;
  • Bias. Some people might focus their attention on evaluating the not-so-perfectly-drawn prototype itself rather than the idea behind it;
  • Lack of intuitive response. Paper prototypes deeply rely on the user's imagination; that creates a hindrance between stimulus and response.

Type #2: Digital Prototype

Digital prototyping stands in between the easiest performance of paper drafts and the advanced HTML presentation. The digital form is realistic enough to effectively test the main interface elements but easier to create than the HTML one.

Developing digital prototypes requires utilizing special apps and software. While the simplest digital prototypes can be done in PowerPoint, it’s common to use one of such tools like Sketch, Figma, Axure Pro, Adobe Photoshop, and many more (we’ll mention a few more below).

Pros:

  • Realistic interaction. More advanced forms of digital prototyping give you an idea of how well users interact with the product’s interface;
  • Flexibility. You may start from a low-fidelity prototype and end up with more a high-fidelity one while improving your draft in the process.
  • Speed. It’s unfair to compare paper drafts with digital prototyping in terms of speed (the first one is faster but very primitive). But comparing digital prototypes with their HTML counterparts, the advantage is clear.

Cons:

  • Requires skills. Although most of the commonly-used apps have a smooth learning curve, understanding the software takes a bit of time.
  • Transition to coding. Depending on the chosen software, transforming your design into code can be difficult. Some items may be lost and you’ll need to recreate them from scratch.

How to Create a Prototype Using Advanced Design Tools?

Stage 1: Preparatory

Before drawing a prototype of any form and kind, a bit of preparatory work needs to be done. Ultimately, you end up with answers to such questions as:

  • Who is the target audience of the particular product (app, landing page, website)?
  • What factors make the strongest influence on users as they make a purchase?
  • ...and many others.

Stage 2: First Concept Sketch

Based on the answers you got from stage 1, you may already have some ideas regarding the prototype visualization. It’s okay if those ideas are vague or abstract; those are just a starting point to the entire product development.

it’s highly advisable to draw your first sketches on paper. The reason is simple: as tons of ideas are rapidly running through your mind, a paper sketch is the fastest way to get them fixed.

Stage 3: High-Fidelity Prototype

In most cases, paper sketches are not enough. Complex projects depend on a high-fidelity prototype, namely, a computer-based interactive clone of the final product in terms of details and functionality.

After approval of your paper-drawn ideas and negotiating details with the clients and other team specialists, it’s time to create a high-fidelity prototype.

As always, you have a few options to go for:

  1. Addressing to a professional development company, which takes over the entire development process;
  2. Creating a digital prototype using handy software.

Let’s start with the end, and choose one of the best

5 Best Prototyping Tools in 2021

Prototyping web services have obvious benefits: they are easy to use and require no special skills to understand how they work.

Such tools are super convenient to work with them in a distributed team, and with the client itself.

Some services also provide ready-made templates for blocks and interactive functions, which somewhat resembles the principle of the online website builder.

Here is a quick roundup of the most popular prototyping tools.

Axure RP

Axure RP is so far the largest and most famous software for creating prototypes and mock-ups of both websites and apps. It allows you to insert elements while changing their size and format in a drag and drop manner.

Also, Axure is convenient for drawing diagrams, annotations, specifications. While working on a project, HTML, Javascript, CSS files are generated.

InVision

Unlike Axure, InVision offers a less complicated drag-n-drop interface allowing you to download pre-drawn screens and locate the needed links. That is why InVision is often used in conjunction with Adobe Illustrator. The service features an intuitive modern design, the ability to easily build animated screen transitions of screens.

Marvel

Marvel is the heavyweight of online prototyping tools. Being more professionally-oriented, Marvel features a large functionality regarding prototype designs, whether it’s a website, an app, or anything else.

Similar to InVision, Marvel allows you to export layouts from Photoshop or Sketch, although the entire design can be built from scratch. With the ready-made layout, you may add animations and transitions to add dynamics to your app or web page.

Just in mind

Just in mind is a free versatile tool allowing you to create both primitive sketches as well as colorful and fully functional prototypes with clickable elements. Although the software is designed to develop prototypes "from scratch", a few ready-made templates are available to your choice.

iPlotz

One more super simple and intuitive online wireframing & mockup prototyping service is iPlotz. You can create layouts both "from scratch" and based on many ready-made templates.

Despite the rather old-fashioned looking interface, iPlotz is quite convenient for creating simple layouts. The instrument offers some interactivity options for your product along with such non-standard elements as round buttons, etc.

Build Prototypes Effortlessly With Fulcrum.Rocks

Drag-and-drop design tools might be the most popular solution, yet, not the easiest one. Unless you are a professional designer with a certain set of skills, creating a high-fidelity prototype will take a lot of your efforts and time. Moreover, it requires not only minimal knowledge of design but also an understanding of SEO and online marketing in general.

Prototyping a site is a super responsible work stage with the entire marketing foundation standing behind. And that is why, instead of taking over the process on their own, many companies/startups/services cooperate with specialists.

The Fulcrum.Rock team is ready to take over this daunting task! We will cover all stages of app development, and a part of our initial Discovery Phase would be designing a high-fidelity prototype.

Discovery Phase of Software Development: Succeed Quickly
Discovery Phase is the scoping phase. Its main goal is to research and plan the project.

Why Fulcrum.Rock?

  • Developing complex IOS & Android apps
  • Released 15+ successful projects (with 100k+ monthly users)
  • Top-rated on Upwork, Clutch, and Goodfirms
  • Clients from all over the world: from Boston to Singapore

Curious to view the prototype example designed by Fulcrum.Rock? Click the link to see the one.

Wireframe VS Prototype Difference

Before jumping on to conclusions, we’d like to clarify the subtle differences between the prototype and such terms as wireframe and proof of concept.

A wireframe is a visual guideline that displays the page structure and hierarchy along with the basic page elements. In order words, one represents a low-detailed design piece that you may informally call a “sketch” or an “illustration”.

For such a reason, a wireframe looks very simple and is most likely to have a black-gray-white color palette (with blue “links”). If there is no time to load or draw images, they are often replaced with stubs - crossed out rectangles with a corresponding description.

A well-thought-out wireframe sets the direction for the entire team.

While the goal of a wireframe is to outline the architecture base, prototypes are focused on the high-fidelity representation of the final product. The purpose of a prototype is to test an almost completed product (or product idea) before making any resource investments.

The prototype indeed gives an idea of ​​how the user will interact with the product. Users can rate the interaction of content and basic forms with the interface of the final product.

Proof of Concept VS Prototype Difference

Some users may also mix the ideas of a prototype with the POC (proof of concept). It’s important to know their basic differences.

Proof of concept (POC) is a small project designed to find out if the idea is technically feasible before the start of development. Depending on the initial research, proof of concept allows you to assess the technical performance of your product. Ultimately, you will be able to identify possible issues before the initial stage of its development.

The purpose of prototypes is to showcase the key design elements and define user flows. Instead of focusing on the product’s technical aspects, prototypes define its design and interactivity level.

Final Thoughts

  1. Prototyping gives an almost-full vision of your project endpoint.
  2. A good prototype saves you time, money and most importantly, ends you up with a better website/app/project.
  3. To create a website prototype, you can use a variety of tools, from a piece of paper to complex tools like Axure, Marvel, Invision, and many more.
  4. Most of such prototyping services have similar functionality and interfaces. If you can’t make the final choice, pay attention to such details as the possibility to import sketches/layouts from other software and a number of formats available for export
  5. Not always is it necessary to create an almost full-fledged high-fidelity prototype. This prototyping form will be relevant for complex long-term projects with multiple specialists involved. If the project is less scalable (e.g. one-page landings)and involves just a couple of people, a schematic sketch might be enough.
  6. Prototyping should start with calculating the user's path to the target action. Only after developing the possible scenarios of how users may interact with the product, a specialist (whether a client, designer, or a team lead) makes the first sketch.

FAQ: How to Create a Prototype

📍How to get a prototype made?

After calculating the user's path to the target action in your product and its interaction channels with future users, you can move to the prototype development.

First of all, define the prototype type. Basic prototype categories are based on

  1. the level of visualization (low fidelity, high-fidelity)
  2. interactivity (graphic or static, dynamic)
  3. a form (paper, digital, and HTML)

It's worth noting that more than one prototype may be utilized in the process. Paper prototypes work well for generating the raw concept of the product. Based on the chosen sketched ideas, you end up with a beautiful high-fidelity digital model.

While modeling a computer-based prototype, you should choose between writing the entire prototype code on your own (requires coding skills), or drag-and-drop prototyping software (e.g. Sketch, Figma, Axure Pro, Adobe Photoshop, and more). Both professional designers and non-pro users utilize such tools to easily build interactive prototypes.

📍How to create an app prototype?

Here are six steps you will take to create a high-quality app prototype:

  • First of all, explore your future product from A to Z (explore the chat functions, search bar, social media clickable links, etc);
  • Think of user experience (try to choose the best UX for the target audience of your future app);
  • Make the first "raw" sketch of a prototype (it might even be paper-based). You may come with multiple different sketches (all of them can be used later as inspiration);
  • Start building the prototype. You can do it online with drag-and-drop tools or manually by writing the code on your own (requires programming skills).
  • Connect pages and elements. Make sure everything works smoothly. For example, connecting certain images and buttons to their drop-down menus, functions, landing pages, and more.
  • Submit your idea. Be ready to make changes in the prototype after client's revision.

📍How to create a website prototype?

Here are six steps you will take to create a high-quality website prototype:

  • Research and analysis of the visitor's journey;
  • Defining the sales funnel (for target clients);
  • Creating the basic archetypes of users (who know and do not know your brand);
  • Design the prototype sketch (it should be a fully-clickable, responsive prototype with real products, which imitates the full experience of basic user archetypes);
  • Testing;
  • Post-launch optimization (identifying critical customer journey points, fixing the issues, and tracking the results)