Complete Guide of How to Design a Prototype for Your App or Website

June 7, 2021
Estimated reading time: 9 minutes
Prototyping — from designing simple templates to testing ready-to-use layouts — is one of the most effective and in-demand skills any designer can master. In fact, this is one of the most crucial stages in the whole design process. To create an effective product, you need to think through every detail before developing. Finding a suitable form of prototyping is the only way to bring practical and viable ideas and concepts to life.

Prototyping can either improve or break your final product. It's not enough just to create a mockup; you need to have a deep understanding of the process involved with designing a product's initial sketches. And to reap the full benefits, you need to do it right.

In this article, we will cover everything a designer needs to know and to do. We will define what a prototype is and what it is for, reveal main types, their pros and cons, explore the process of prototyping, and find out how to design a UX prototype for websites, web services, and applications.

This post will act as a full-fledged guide to prototype design.

Designing a Prototype: Features & Types

A prototype is a model that helps to visualize the placement of elements, the layout of graphics, as well as to show functionality, to demonstrate how the future site or app will look like.

It is not just a beta test similar to the final release; it is an exact copy of the end product. The key goal of the prototype is to test products before spending time and money on the release. It includes most of the final UI design and interactions that the end product will have. This is an effective way to design any digital product because it lets us experiment and test out hypotheses.

And here's why the prototyping phase is vital: this process allows you to determine if everything works as intended and if the product solves user problems as expected — before release and before the final product reaches the end users. A UX design prototype is a powerful tool that saves time, money and betters the interactions between a customer and a developer.

So, why do you need to prototype a website? Problems that prototyping solves:
Absence of a page structure
Ill-conceived user path through the site
Low search positions due to poorly thought out site navigation
Usability problems
Unreasonable design decisions
Non-working calls to action
The need to visualize and illustrate all ideas
Amending, making edits, finalizing the vision with minimal effort and expense
A more accurate estimate of the time & cost of the entire work scope
A website without a prototype is a design experiment for your money. Prototypes, in turn, take into account all errors in experiments. The prototype is the layout of the implementation of the interface concept. It's not just about design. This is an analysis of customer behavior and the path to purchase.

Prototypes differ in appearance, level of visualization, and interactivity. From a drawing on a piece of paper to a clickable multi-page structure, all prototypes accomplish one task — to match the customer's and the performer's ideas about how the final result should look like.

Paper Prototyping

To start working on a site prototype, it is not necessary to use complex applications and special software. It is enough to have just a sheet of paper and a pencil to make the first steps and create an interface outline. Paper prototyping is a method of freehand drawing of user interfaces for their quick design, simulation, and testing. It is great for the initial stages of the project, mainly for ideas generation and testing.

Basic application practices:
The exchange of ideas between stakeholders throughout the early stages of the user-oriented design process.
Documenting the evolution of your design: gives you material artifacts to revert to.
Information architecture: using paper prototypes, you can test the information architecture of a web service, application, or website.
Note: the further you deepen into the design process, the greater the difference between paper prototypes and the final product. Therefore, this method is not suitable for complex multi-page sites with advanced functionality. You may not fully realize the functionality or consider some valuable details. In this case, you need to use a professional site layout.

Digital Prototyping

Digital prototype is the most popular prototyping method: it is easy enough to use and realistic enough to accurately test most interface elements. Depending on the goals and objectives, designers choose the type that suits the most: wireframe or interactive prototype, design layout, or demo layout for presentation (proof of concept).
Wireframe
This is a schematic display of the main blocks of the future site, web service, or application. As a rule, wireframes are created to realize how it is better to place objects to achieve the user's goal. They are often made in black and white in order not to distract attention from the functional. The wireframe is a project "skeleton", which represents every part of the final product.

In terms of content, it can be low and highly detailed. The wireframe should clearly show and answer the following questions: main content group (what?), information structure (where?), description, and basic interaction visualization between the interface and the user (how?).
Interactive prototype
This is a clickable version of the wireframe that may be black and white or monochrome. If you click, the required function or action will be performed, as on the real site. Due to the prototype, it is convenient to coordinate with the customer the location of blocks and buttons and carry out user-testing. Sometimes, depending on the project's specifics, you can go straight to the stage of building the prototype that is more understandable for customers. Like wireframes, it can be low-fidelity and high-fidelity.
Design layout
This is a ready-made product for transfer to development. It is already colored and with a full UI. Ideally, this is the next stage of the evolution of the project from the concept to the product.

How does it work? Designers take the draft versions of the project, prepare them for layout and development, describe the behavior of the elements, explore their display on different screens, prescribe all possible content types, make the UI kit and design system (if necessary).
Demo layout for presentation (proof of concept)
This is a design layout intended especially for presentation (designers present it to the customer, or the customer presents it, for example, to investors). In practice, it is not intended to be transferred to development. For a demo layout for a presentation, a designer must select a minimum of functionality and assemble a concept to illustrate the idea.
Have an amazing idea?
Just drop us a line
We will be happy to develop that idea into something special!

What is the Process of Prototyping?

You already know what prototyping is, why it is indispensable, and what prototypes can be used in the design process. The only thing left is to build your own.

So, how to create a prototype? How to prototype an app, web service, or website?

1. Defining requirements

The first step is to set your goals — why do you need a prototype? What tasks do you want to solve? Remember to focus on user needs and problems.

2. Building an idea

Once you've decided on your goals, move on to developing prototyping ideas. The more, the better. Do not give up even those that, at first glance, seem strange and unreasonable. Searching for ideas is always a process that can help you find a non-standard, creative, and extraordinary solution.

Pay attention to industry trends, conduct competitor analysis, study the patterns they use, create a portrait of your target audience, explore the product/service area. And the idea will come to you!

3. Prototyping

Now design an actual prototype — this will be a small working model of your requirements. Use the right tools — try the most popular ones and find which matches you best in terms of features and functionality.

How to design a prototype?
Draw a sketch on paper considering the user flows, information elements, first drafts, sketch a rudimentary structure.
Move to Digital (lo-fi to hi-fi prototypes). In digitization, the fidelity is determined by interactions and transitions, visual design, and content. If necessary and relevant to the project goals and the conditions of cooperation with the customer, you can go further and design an interactive prototype as well.
Add advanced UI design: color, typography, refined spacing and positioning, real pictures, real text.

4. User testing

UX/UI prototyping process and testing go hand in hand. After you have created a prototype, you will need to present it to users. Watch how they interact with the product, ask for a review on the experience, and build a way to an intuitive and user-friendly product.

5. Refining

Based on user feedback and suggestions, work to improve your prototype. This phase will not be completed until all the requirements specified at the beginning are met and the users are satisfied with the results. Has the desired goal been achieved? If not, draft a new version.

Website Design Prototype

The website and web service prototyping process has several important features that differentiate it from prototype app design. Let's take a look at the essential factors that must be considered.

Responsive design

Your site must be responsive because of the discrepancy in screen resolutions. Make sure that your prototype is adaptive and can be viewed and tested equally well on mobile phones, laptops, PCs. There are different ways to build a responsive design. One of them is the liquid layout. Define liquid containers to allow elements on a page to adapt to various screen sizes, orientations, or aspect ratios.

Interactions

Another thing to consider when creating the web service or website design prototype is how users interact with it. The deal is that on the desktop, they will use mouseover to click, and gestures will be limited. So, the site can be made more interactive by including micro interactions that improve UX and boost usability and intuitiveness.

Clickability

Elements should look clickable on the site: links should stand out from the rest of the text, buttons should be contrasting and look like buttons, and the call to action should attract attention.

How to Prototype an App

When prototyping an application for a mobile gadget, first, make sure that you have developed it following the design features of IOS or/and Android.
Native features
For a great user experience, you should use the native features of each platform. For example, make sure that you include a native menu to demonstrate how the user can navigate the app when you are prototyping an Android app. There is no such menu for iOS, so you have to create in-app navigation.
Device size and screen resolution
Readability and visuality are crucial, as well as a clearly defined content hierarchy. You are dealing with a small screen size, which means make sure that everything is displayed correctly: the text is legible, paragraphs fit the screen, leaving free space on the sides, less important options are hidden, and the buttons are big enough.
Features of touch interfaces
Designing an application interface with responsive mobile technologies basically requires representation of touch gestures with annotations. Touchscreens actually put data in the user's hands, and it is the designer's task to implement and interpret this interaction.

How to Design a Prototype With Aspirity

Designing a UX prototype is one of the key specializations of Aspirity — a UX/UI design studio and web development company. Our team has solid expertise in this area and offers advanced prototyping services. We have achieved great results in creating prototypes of all types for apps, web services, and websites. And our experience and work results are supported by successfully released cases.

One of them is project management software for real-estate development ARCTIC, UX/UI design, and development of the internal web service for the company's project managers and a separate portal for board members. We have taken into account all the provided data, including the project's feature list, and have chosen a clickable UX prototype to visualize how the final product will look. And this is what this UX prototype looks like.
Another case — platform for a real estate service. The idea of the project is the optimization of real estate business processes by turning a real estate website into a peer-to-peer platform. And to achieve this, we have started the design process by developing an interactive prototype of the future website. Here you can click it and interact.

Summary

Prototyping is one of the most important stages in developing any product, giving all members of this process an answer to the question "How does it work?" A good prototype lets you save time, money and create a better web service; that's why this stage has long become the standard in professional web development. And therefore, you need to entrust it to professionals.

Bring your idea to life with Aspirity.
Building custom software or have existing one?

Aspirity is a NodeJs + ReactJs development agency from Siberia. We specialize in management, admin and dashboard software.

If you have a custom software project — contact us for a confidential consultation or just read more from our blog.

If the article seemed interesting to you, share it with your friends
Be the first who knows our news!
Once a month you will learn about our latest features and hottest news. And no spam of course.

Want to know more? Read our other articles