Asking ‘What’s the best way to build a website prototype?’ is like asking ‘What’s the best way to make a website?’ There is no single ‘best’ way. Each individual prototype, like each individual website, has its own styles, objectives, and strategies.

In this article we’ll explore most common website prototyping methods.They are presentation software (mostly for beginners), coded prototypes (intermediate to advanced).

01. Prototyping with presentation software

For starters, there’s the traditional PowerPoint, a reliable business staple that has been used for presentations for over two decades.

Let’s take a look at the pros and cons so you can make an educated decision.

Pros of prototyping with presentation programs

• Familiarity: You know the basics, and it’s not that hard to learn more advanced features. Features are like animations, slide transitions, and linking slides for interactions
• Basic element libraries: Thanks to simple wire framing libraries, you can quickly create low-fidelity wireframes and then link them together for a clickable prototype
• Natural linear flow: The slideshow nature of these tools takes you through a sequential user flow, which forces you to think about the experience aside from visuals. For more advanced users, you can link slides in complex ways that go outside the linear progression

Cons of prototyping with presentation programs

• Limited scope: ebook The Ultimate Guide to Prototyping, once you start playing around with advanced user flows and interactions, you’ve basically hit the limit of presentation software
• Limited collaboration: Most presentation software doesn’t offer any collaboration (except for Google Presentation). The trade-off is that collaborative presentation software lacks interactivity, graphics manipulation, shapes, text, and colour options that make them worthwhile for prototyping. If you want to collaborate without compromise, stick to a prototyping tool
• Limited flow charting: Although it is possible to communicate advanced user flows, it’s not easy to do and sitemaps aren’t linked to the website prototype as they are in dedicated prototyping software
• Limited interactivity: Resourceful users can get pretty far if they use all the features or PowerPoint, but if you’re going to go to all that effort, it might be easier and more effective to switch over to something specialized

02. Coded (HTML) prototyping

One of the biggest questions designers have about creating a website prototype is whether or not to use code. This uncertainty stems from some designers’ lack of comfort with coding: they either don’t know how to do it, or don’t like doing it. When compared with the more fun and intuitive method of using a prototyping tool or even sketching by hand, writing code can feel tedious.

Today there are more reasons than ever to start coding early. The ‘I design it, you build it’ waterfall mentality taken by designers in the past has become outdated as technology advances in large strides and collaboration becomes mandatory.

There are a few distinct advantages of prototyping in code. Mostly owing to the fact that you’re starting the design in something that resembles the final form.

Pros of coded prototyping

• Platform-agnostic: HTML prototypes work on any operating system, and nobody needs outside software to use it
• Modular: HTML is component-based, which can help with productivity
• Low cost: There are many free HTML text editors. But you’ll need to spend some time learning the language before it’s helpful
• Technical foundation: Provided you’re creating production-ready code (and not just throwaway for the sake of a quick prototype). You can end up saving time in development

There are variety ways to built a coded website prototype. But HTML is perhaps the most popular.  The real consideration in deciding whether or not to use code in your website prototype is your skill level. Not all designers have the ability to code, so don’t overextend yourself unless you’re technically confident.

Furthermore, diving straight into code may inhibit creativity. Ask yourself how many interactions and page flows you can create with 30 minutes in a prototyping tool versus a code like HTML or JavaScript.