18362 2
How-to 12 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
Mockplus RP is a powerful web-based prototyping tool that allows you to create, test and share prototypes. You can create all levels of visual designs, from sketches, wireframes to interactive prototypes that work like real things. With Mockplus, also co-design with your team anytime and anywhere, create repsonsive prototypes and test them out on any real devices, and share them via a single link to collect first-hand feedback, all without code.

Mockplus RP comes with a Free plan offering 10 team seats and 3 active prototypes for free. It has premium plans for both individuals and teams:

  • Individual Annual plans at only $99

  • Individual Lifetime plans at only $399

  • Team plans start with only $10.95 per user/month
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.

Speed up your search marketing growth with Serpstat!

Keyword and backlink opportunities, competitors' online strategy, daily rankings and SEO-related issues.

A pack of tools for reducing your time on SEO tasks.

Get free 7-day trial

Rate the article on a five-point scale

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

Discover More SEO Tools

Tools for Keywords

Keywords Research Tools – uncover untapped potential in your niche

Serpstat Features

SERP SEO Tool – the ultimate solution for website optimization

Keyword Difficulty Tool

Stay ahead of the competition and dominate your niche with our keywords difficulty tool

Check Page for SEO

On-page SEO checker – identify technical issues, optimize and drive more traffic to your website

Share this article with your friends

Are you sure?

Introducing Serpstat

Find out about the main features of the service in a convenient way for you!

Please send a request, and our specialist will offer you education options: a personal demonstration, a trial period, or materials for self-study and increasing expertise — everything for a comfortable start to work with Serpstat.

Name

Email

Phone

We are glad of your comment
I agree to Serpstat`s Privacy Policy.

Thank you, we have saved your new mailing settings.

Report a bug

Cancel
Open support chat
mail pocket flipboard Messenger telegramm