This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
79
How-to 11 min read November 15, 2019

How to Create a Website Prototype and Why You Need It

Автор статьи о продвинутых инструментах Serpstat
Yaroslava Nevmerzhytskaya
SEO Expert at
Weblium
The development of a website usually begins with creating a prototype – its detailed structure. The simplest way to do it is to sketch on paper. But the more complex the project is, and the more demanding the client is, the higher are the expectations towards the mockup. You would need something more than just a paper sketch.
There are numerous apps and online services for prototyping, and the latter are growing increasingly in popularity due to their simplicity and convenience.

In this article, we will go through the benefits that both customer and contractor gain with a high-quality prototype, as well as review the most popular prototyping tools of 2019.

What is a website prototype

A prototype is a general website model visualizing the layout of all elements and features. A prototype helps illustrate all the concepts conclusively and enables making the adjustments with minimum cost and effort. From a paper sketch to a multi-page interactive structure, all the prototypes serve one purpose — syncing the vision of the client and the developer about what the result should look like.
How does website prototype look like

Why client needs a website prototype

Here's a partial list of tasks and issues that a prototype helps to resolve:

  • Visualizing the look and feel of a future website early in the project lifecycle.
  • The ability to change and finalize project vision at minimal cost.
  • The ability to evaluate timeframe and expenses for the scope of work more accurately.
  • Understanding further development and prospectives of the website, as well as discussing early stage hypotheses.

It's not uncommon for a client to lack a clear vision of their future website on an initial stage. Besides, sometimes a team can't reach a consensus, with each of the members having their own opinion. Prototyping allows you to visualize all the ideas and find a compromise while avoiding the need to redesign the already completed website.

Financial reasons play not the last role in decision making regarding a future website. By prototyping, you can mock up various sets of website features to choose those of them that you really need. This way, you will gain the ability to estimate website development budget more precisely and cut the payback period.

What tasks the development team solves with a website prototype

A prototype is of great help in identifying and outlining client requirements, which in itself makes it worth the time. But there are other benefits it brings to development:

  • concept validation (for instance, a departure from traditional website structure) or testing the layouts;
  • creating use cases – scenarios of using a website that demonstrate the stakeholders how exactly it will be functioning.

"You may be right a hundred times, but how does it matter when the requirements weren't written down," website developers joke.

Indeed, contradictive and ever-changing client requirements can extend the development indefinitely, provoke conflicts, and even cause the failure of the project. A prototype approved by the client allows avoiding this in a professional manner.

How to build a website prototype

Let's walk through the various ways of prototyping. Some are simple, others are complicated, some are pricey, others are cheap, but all of them are widely used today.

Paper or whiteboard prototyping

Even professionals often start prototyping with a draft on paper or an office whiteboard — and for a good reason. Drawing a rough sketch helps shape the overall vision before you start working on a clean copy. This method is fast and doesn't require any additional skills or tools.

However, such an approach has its drawbacks: it's a limited method that lacks interactivity and does not provide the ability to leave comments or edit a prototype. You have to redraw the whole prototype from scratch every time you need to make some changes, or else it will quickly become a mess. This is why such quick prototypes are perfect for brainstorming and discussing the ideas, but functional prototype development calls for a more advanced tool.
Whiteboard website prototyping

Prototyping with professional apps

You can choose from dozens of specialized apps for full-scale website design – Sketch, Axure Pro, Microsoft Visio, Adobe InDesign, Adobe Photoshop. A prototype made with one of these tools not only looks more professional and esthetic but also allows you to visualize all your ideas and interface elements. With some apps, you can also add clickable elements to the prototype.

This approach has its disadvantages as well. Firstly, professional apps are pricey and complicated, and they require a certain level of experience to use them. Then, it's practically impossible for several team members to work on the same prototype together – only the designers can revise a project. Thus, prototype versions will be sent back and forth via email, get lost, and mixed up.

Besides, editing a prototype takes more time in such apps, and the longer a designer works on the project, the harder it is for him to give up the ideas that weren't approved. Overall, the approach has its time and place, but it's quite ponderous and resource-consuming.
Prototype of the website in Photoshop

Prototyping with online tools

Web services for site prototyping have a number of obvious advantages. First of all, most of them are easy to use and don't require any experience – which means that not only a designer but a client themselves can represent their ideas and make all the adjustments.

Secondly, such services can come in handy for a distributed team, allowing access to the project website from any location across the globe. Thirdly, there's no need to email yet another file to build a new version of a prototype.

Besides, some services offer ready-made templates of content blocks and features that can be assembled in a constructor manner, saving a lot of time.

Let's take a look at several tools for creating prototypes that gained the most popularity in 2019.
Tools for website prototype creation

Best prototyping tools in 2019

With Draftium, you can create a website prototype based on more than 600 pre-built layouts and thousands of blocks. By tweaking, dragging, and combining the blocks, you can build even the most complex prototype of a large website in just a few hours.

If 50 templates and three prototypes are enough for your project, you can stick to a free version. A full version will cost you $99 per year — you get access to over 300 templates, unlimited prototypes, and priority tech support.

Once the final version of a prototype is approved, you can export it from Draftium to Weblium — a constructor for creating full-featured websites with a free version available as well. Basically, these two tools are enough for building and launching a full-fledged professionally-looking landing page, portfolio, or web portal.
Website prototype builder Draftium
#2

Marvel is a heavy weapon of online prototyping tools. Being more complex compared to Draftium, it will rather suit for professional usage. Marvel does have rich functionality that allows putting together interactive prototypes of virtually anything. Although, you need at least basic design experience to use this service.

Marvel offers four plans — a free plan and paid options costing from $12 to $84 per month. Paid plans differ by the number of users, priority support, and some pro functions.
Site prototyping online tool Marvel
An online prototyping tool with an emphasis on simplicity and minimalism. It will take you a few minutes to get familiar with the functionality. Basically, all you have to do here is draw simple shapes with your mouse, add colors and text.

As one should have expected, this service doesn't provide any templates, icons, or interactive elements. It is rather a virtual alternative to a good old sheet of paper.

Wireframe pricing is similar to the Marvel's one — a strongly limited free version and three paid options. The only difference between the paid plans by the price of $16-$99 is the number of users that can work on a prototype simultaneously.
Prototype creating tool Wireframe
An all-purpose app that's available for Windows and Mac users. Here you can create both rough drafts and full-featured colorful prototypes with clickable elements.

The service is primarily intended for prototyping from scratch, but there are also several ready-made templates that can serve as a starting point for building a prototype. The interface is more complicated compared to Draftium and Wireframe, although with the help of the built-in tips, even a beginner can create a draft template to visualize a general concept.

Besides a free version, Just in Mind offers three paid plans focused on integration with other services rather than a number of users — e.g., the Enterprise plan provides integration with Jira. The two standard packages cost $19 and $39 per month, and the server on-premise price is calculated individually.
How to create a prototype in Just in mind
#5

Another simple and easy-to-use online service for prototyping. You can either create prototypes from scratch or using numerous pre-built templates. Despite having a dated interface, the tool is quite handy for building simple layouts. It allows adding some interactivity and even non-standard UI elements like round buttons.

Subscription pricing starts from $99 per year for a single user to $495 for ten users, plus $75 for a desktop version. A free version is available as well but limited to one project.
Online prototyping tool iPlotz

Conclusion

A good prototype saves time and money and helps create a website of a higher quality. This is why prototyping has been standard practice in professional web development for a long time.

There are different ways and tools for creating a website prototype, from a sheet of paper to sophisticated Adobe Photoshop or Sketch level apps.

Online tools are a whole different niche, combining the maximum features convenience- and functionality-wise. At the same time, many of them offer a free version.

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 1 people on average 5 out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits