- Through presentation software (e.g., draw in PowerPoint).
- Coded prototypes (intermediate to advanced).
- Through specialized prototyping applications (for all skill levels).
These three methods are different, and there are obvious leaders and obvious outsiders, depending on who you are, what you are good at, and what you want.
Prototype in a presentation program
This is the most obvious and oldest method for non-specialists of any kind: transfer the prototype pages of a site from your head "to paper" in a non-specialized application - from Word and Paint to PowerPoint. It is the presentation programs - PP, Keynote, Google Slides - that are most popular in this niche.
Advantages of prototyping with presentation program
Familiarity: these are usually used by people who are already familiar with them and use them consistently for other work tasks - they already know the basics, and it's not so difficult for them to learn more advanced features such as animations, transitions between slides, and linking slides for interaction.
Basic element libraries: thanks to simple framework libraries like Keynotopia (opens in a new tab), you can quickly create low-fidelity frameworks and then link them together for an interactive prototype.
Process linearity: the slideshow nature of these tools takes you through a consistent user flow that makes you think about the experience beyond the visuals. More advanced users can link slides in complex ways that go beyond a linear sequence.
Minuses of prototyping with presentation program
Limited functionality: Once you start using the advanced features of presentation software, you will quickly reach the limits of its capabilities.
Limited collaboration: Most presentation software does not offer collaborative capabilities (with the exception of Google Slides). The trade-off is that collaborative presentation software lacks the interactivity, graphic manipulation, shapes, text, and color options that make them useful for prototyping. If you want to collaborate without compromise, use a prototyping tool.
Limited block diagrams: although it is possible to report extended user flows, it is not easy to do, and site maps are not linked to prototypes as in dedicated prototyping software.
Limited interactivity: resourceful users can get pretty far if they use all the features of Keynote or Powerpoint, but if you're willing to put in the time and effort, it's more effective to put it toward learning specialized prototyping solutions.
In general, the main problem with using non-specialized prototyping software will be the huge difference between a prototype and a website implementation.
Coded (HTML) prototyping
One of the biggest questions designers have when prototyping a Web site is whether to use code. This uncertainty stems from the fact that some designers don't know how to code: they either don't know how to do it or don't like doing it. Compared to the more exciting and intuitive method of using a prototyping tool or even drawing by hand, writing code can seem tedious. Today there are more reasons than ever to master programming.
Advantages of coded prototyping
Platform independence: HTML prototypes work in any operating system, and no one needs third-party software to use them.
Modularity: HTML is component-based, which can improve performance.
Low cost: there are many free HTML text editors, but you need to spend some time learning the language before you can use it (or use this HTML cheat sheet).
Technical basics: as long as you create ready-to-use code (rather than just throwing it away for a quick prototype), you can save time on development.
Coded prototypes can be created in a variety of ways, but HTML is probably the most popular.
The main advantage of prototyping in code is that you start your project in a format that immediately gives you an idea of what the result will look like.
The main disadvantage is that starting directly with code can interfere with the creative and conceptual aspects of creating a site. It's not for nothing that design engineers, say, in the automotive industry, come after designers: if cars were started with their technical part, the external result would be virtually devoid of personality. That's not necessarily a bad thing - for some tasks it's perfect. There are successful services that are created entirely by the efforts of only programmers, where there is no "design" in the conventional sense - the bare functionality, and it suits them perfectly. As a rule, these services are for the same professionals.
For most consumer services, it's the wrapper that counts, so it's a shame to start with the code and ignore the decorative part of the design.
Also, when deciding whether or not to use code in your prototype depends on your skill level.
Finally, it's a matter of timing. Starting to code right away can be a false optimization in terms of saving time: ask yourself how many pages you can code in HTML or JavaScript in two hours compared to developing in a prototyping program.
Using software and applications for prototyping
The advantage of prototyping software and applications is that they are specifically designed for this purpose, so they strike the perfect balance between functionality, learning time, and ease of use.
Beginners and experienced designers alike use specialized tools like the ones below: beginners because of their ease of use, and more experienced ones because of the controls tailored to their specific needs.
Gloomaps
Free service with an optimal set of functions and a wide range of export options of the finished project.
- Cost, subscription: free of charge
- Ease of use: suitable for beginners
- Teamwork
- Export: link, PNG, PDF, XML
Flowmapp
A service with a well-thought-out set of functions and a pleasant interface. In the free subscription features are available in a wide range. Suitable for effective and high-quality presentation of sitemaps projects.
- The free plan provides 1 active project and 100 MB of space, with no limit on collaborators. Paid subscriptions from $8 per month at annual payment.
- Easy to use: for beginners and intermediate users
- Teamwork.
- Export: link, PNG, SVG, PDF, DOCX
WebMaster
Service with the most advanced crawler among analogues. What is a crawler? It is a tool for reverse-prototyping the structure of any given site. Simply put, you can take any existing competitor's site or just a suitable reference resource, and automatically turn it into a prototype - the basis for your resource.
The user uploads any site address, the Webmaster algorithm cleans the link from excess elements, scans the site for structure files (sitemap, robots.txt), parses the structure of all links and headers, including the SEO parameters of headers (H1, H2, etc.).
In the output, the crawler visualizes the structure of the site in a form ready for finalizing prototyping. From this point on, using Webmaster is comparable with using other services for prototyping in the review.
Lifehack - Webmaster's free tariff is enough for crawling sites up to 100 pages. For most small businesses and projects, that should be enough.
- Ease of use: for beginners and intermediate users
- Teamwork
- Export: link, PNG, PDF, DOC.
Octopus.do
A rational set of tools and an intelligent interface design that meets the spirit of the times. Regular updates and functionality improvements by Octopus team make the service attractive and surely useful.
- Free plan provides 1 active project. Paid subscriptions start from $8 per month.
- Ease of use: for beginners and intermediate users
- Teamwork.
- Export: link, PDF and PNG (for paid users only)
Writemaps
"Only the essentials" is how you could describe the approach to the functionality of the free version. The paid subscription is suitable for users who plan to distribute content beyond the general structure of the site.
- Free plan provides 3 active projects with a limit of 50 pages. Paid subscriptions start at $14.99 per month.
- Easy to use: for beginners and intermediate users
- Teamwork
- Export: CSV, XML, PDF and link (for paid users only)
Rarchy
One of the youngest projects in the review, which in the couple of years since its release has already grown into a full-featured site-building tool.
- Cost, subscription: from $15
- Ease of use: for beginners
- Teamwork
- Export: CSV
Visual Sitemaps
Visual Sitemaps will be handy for preliminary analysis of a project. Especially if there is a need to see and evaluate the structure of pages.
- The free plan provides registration of one user and 50 screenshots with a limit of two levels of crawl depth. Paid subscriptions from $ 29 per month.
- Easy to use: for beginners and intermediate users
- Teamwork
- Export: link, PDF
Slickplan
Rich feature set and smart interface. Huge set of features and export settings.
- 30-day trial period. Paid subscriptions starting at $9.99 per month.
- Ease of use: for intermediate and advanced users
- Teamwork
- Export: Link, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML
Dynomapper
The tool makes a solid impression and most likely implies more in-depth design and content work.
- 14-day trial period. Paid subscriptions from $49 per month.
- Easy to use: for intermediate and advanced users
- Teamwork
- Export: link, PDF, CSV
Visual Site Mapper
Free crawler, generates state maps of the existing site automatically. The result of the crawling is a scheme of links between pages of the site. And in some cases the result can be large-scale. The creators of the service posted the source code on Github (last update was in 2016). Crawler carefully saves the history of requests.
- Free
- Ease of use: for beginners
Creately
Creately is the closest to graphical editors in terms of mechanics. The functions of the service allow you to create not only sitemaps, but also many other diagrams and flowcharts.
- The free plan provides 5 public documents and the ability to add up to 3 collaborators. Paid subscriptions from $5 per month.
- Easy to use: for intermediate and advanced users
- Teamwork
- Export: link, PNG, JPG, SVG
In 2022, for most commercial and amateur projects, the best option is to understand and master any of the prototyping tools above. For commercial projects, it is preferable to choose a service with a crawler, for reasons that are clear to any entrepreneur: the most reliable business idea is a business idea that has already been implemented.
