Prototyping is a significant stage in web development, which allows you to identify and form the DNA of a project in its early stages. In recent years, the number of online services and prototyping tools has grown significantly. This review presents 10 services for creating visual sitemaps.

Before proceeding to the description of the tools, it will not be superfluous to understand the terminology.



A sitemap is a page structure of a site presented in a hierarchical model. Such a scheme helps to evaluate the volume of pages that form a site, as well as understand the logic of their relationship. Sometimes these are schemes that are primitive in organization and structure. And sometimes very complex with multi-level nesting cards. Sites help plan content distribution and navigation mechanics for a future site.







Consider three types of sitemaps:



Visual sitemaps are used as an auxiliary element in project planning, analysis and prototyping. Today it’s hard to imagine the start of work on a project without prior planning. The site map will help to better understand the mechanics of future navigation, to evaluate the amount of necessary content. The visual site map is an important element in building communication within the development team. Thanks to the visual structure of the site, the discussion, assessment and allocation of resources is greatly simplified.



HTML website templates are designed to help you navigate your site. The tradition of creating a separate page with a sitemap is considered obsolete, but nevertheless, this approach will not be superfluous if the project has a complex structure and multi-level nesting.



XML sitemasks are hidden from users, but important. By describing the structure of the site and the relationship of the pages, XML sitepamps facilitate search engines analyzing the site. Therefore, a positive effect on the ranking. In XML sites, the clarity of the structure description and the syntax used are important, because the crawlers of the search engines do not tolerate inconsistency and slackness of the code. The sitemap XML replaced the older “direct download to search engines” method on a dedicated separate page. Now the sitemap is loading directly, or the developers just wait until the search engine finds the file on its own. By updating the site map file with a new structure, you provide faster indexing of pages compared to the standard automatic search engine procedure.

Why do we need visual sitemaps?

Website planning and prototyping has long been the industry standard. Most often, the project’s mind map is built first. This is done to determine the main and secondary elements of the future site, as well as the tasks that the site or service will solve.



At the next stage, a detailed hierarchy of pages, their structure is planned. This stage requires reflection and discussion. Therefore, such a prototype should be clear to all participants in the process (programmers, designers, developers, content managers). The formalized structure of the site (sitemap) becomes the starting point.

Octopus.do

A service with a minimalistic and fresh approach to interface design, launched in 2019. Without unnecessary details and add-ons, Octopus works quickly, and a clean visual language makes it work.



The main idea for designing sitemaps in Octopus is to form pages from blocks. Such designs are clear and designed to give a detailed idea of ​​the structure of the future page.



Test Octopus.do without registration. You will only need to register a profile when the project is saved.







The intuitive interface is not overloaded with elements and animation. Although the individual icons may seem a bit small. Creating and adding blocks is quick and easy with obvious mechanics.







There is a more convenient way to add a block - just press Enter, and a new block will appear at the bottom of the page. This method allows you to quickly fill in the content using only one keyboard. Drag'n'drop runs predictably and quickly.



Blocks can be assigned colors from a given color palette:







Octopus.do paid subscription users can export export sitemaps in PNG and PDF. With a free subscription, you can share a direct link to the project. At the same time, external users will be able to make changes to the site map, which simplifies teamwork.







The organization of information layers and sections of the service opens in neat pop-ups. Thanks to this, it seems that the user does not leave the workspace of a minimalistic editor.



The function of adding a text description to the blocks will be useful for planning content in the project. Pop-up is called by clicking on the document icon in the right part of the block:







In the process of content assembly, it is often necessary to quickly assess the location of visual materials (photographs, illustrations). The function of adding images will help to cope with this task:







By the way, by adding pictures to the structure, you can insert full-fledged page design layouts as they are ready.



A distinctive feature of Octopus is the presence of the Estimate function. The interface is implemented in the form of a traveling panel, which contains a calculator table for estimating the cost of work. And with a known hourly rate for a specific examination, you can estimate the time costs and budget of the project.







Users have the option of duplicating pages in a hierarchy and creating a copy of the project. Control over sitemap design: customizable page border styles and styling for smartphone frames, as well as an improved teamwork mechanism.



Summary



A rational set of tools and an intelligent interface design that meets the spirit of the times. Regular updates and functional improvements from the Octopus team make the service attractive and, of course, useful.



Cost, subscription : a free plan includes 1 active project. Paid subscriptions from $ 8 per month.

Ease of use: for beginners and intermediate users

Design : ★★★★ ☆

Teamwork : ✓

Export : link, PDF and PNG (paid users only)

Gloomaps

No need to register is an advantage of Gloompas service. The user immediately finds himself in a working environment with a minimalistic design. The interface is intuitive and helps you get involved in the process quite quickly. Adding and removing sitemap blocks occurs with understandable and predictable mechanics.







The ability to customize the color of each individual block, to set the font size is a convenient feature that helps to create accents in the site map.







Separately, it is worth noting the view settings: Map View, Matrix View and Outline. Depending on the structure and scale of the project, you can choose how to display the site map.







In projects with a cumbersome structure and multi-level nesting, it will be convenient to collapse and expand a group of pages. Gloomaps is a free service, but not without limitations. The link to the project is stored for 14 days, and each new visit to the project page extends the availability of the link for the next 14 days. As far as is known, private projects cannot be created. Functionality for automatic generation of sitemaps is not provided.







For those who will use the service regularly, it is useful to use shortcuts, which are described in the leaving menu bar. And export functions in various formats expand the ability to share the created site map.



Summary

A free service with an optimal set of functions and wide possibilities for exporting a finished project.



Cost, subscription : free

Ease of use : suitable for beginners

Design : ★★★ ☆☆

Teamwork : ✓

Export : link, PNG, PDF, XML

Flowmapp

Intuitive and rich in templates, Flowmapp helps to create both visual sitemaps and plan user flows.



You must first register. The project can:

• start from scratch
• import from xml file
• expand existing template

There are three types of projects in the prepared templates: e-Commerce, corporate project and news portal.







In the process of getting to know the service, useful recommendations and tips regarding tools and features of the work environment will regularly appear in the lower right corner.



Animations and reactions of interface elements help to get involved in the process and learn basic manipulations. Conveniently implemented group allocation of pages to delete or change the label.







One of the main advantages is the visual page templates. The template library covers most of the possible information patterns - an indispensable and clear feature in the preparation and planning of content for the future site.







And for those who are primarily interested in the structure, you can switch to a compact view with only headers.







As for navigation, a rather convenient mechanics, Project Map, has been added to the standard feature set. Project Map combines both visual and mechanical value - moving around the structure of large projects is simplified.







To each of the pages of the project, you can add an extended description and attach individual files. This feature is useful in the process of filling the site with content.



Wide export options in SVG and PNG formats allow you to choose the best option and even set the image resolution at the output.



Summary

Service with a well-thought-out set of functions and a nice interface. In a free subscription, features are available in a wide range. Suitable for effective and high-quality presentation of sitemap projects.



Cost, subscription : the free plan provides for 1 active project and 100 MB of space, without restriction on collaborators. Paid subscriptions from $ 8 per month for annual payment.

Ease of use : for beginners and intermediate users

Design : ★★★★★

Teamwork : ✓

Export : link, PNG, SVG, PDF, DOCX

Writemaps

Relatively simple in organization Writemaps helps design sitemaps and plan project content. In order to test the service, you have to register.



From the point of view of design, the interface can be described as “folk” or plain. A free plan provides access to part of the function: 3 active sitemaps with 50 pages. The remaining features are available to paid users.







Part of the paid functionality includes the ability to highlight project pages in color, combine and add content to them, create sections, share a project and export a site map to PDF. Although for free plans, export to CSV and XML is provided.







It is worth noting that switching between the site map and the content is implemented conveniently and clearly. A list of shortcuts will help speed up the work.











Summary

“Only the most necessary” is exactly how one can characterize the approach to the functionality of the free version. A paid subscription is suitable for users who plan to distribute content, in addition to the general structure of the site.



Cost, subscription : the free plan includes 3 active projects with a limit of 50 pages. Paid subscriptions from $ 14.99 per month.

Ease of use : for beginners and intermediate users

Design : ★★ ☆☆☆

Teamwork : ✓

Export : CSV, XML, PDF and link (paid users only)

Raarchy

The beta version of the project has a modest set of features. The site map is built both from scratch and in a generative order using the link to the site.







At the time of publication of the review, the mechanics of adding pages are arranged as follows - you need to call the context menu by clicking on the page blocks.







No additional block display settings are provided. However, drag'n'drop works understandably. And the display formats of the scheme allow you to switch the project into a biomorphic scheme. Perhaps this view seems clear and appropriate.







At the time of publication, export only to a CSV file is available. You cannot share a direct link.



Cost, subscription : free

Ease of use : for beginners

Design : ★★ ☆☆☆

Teamwork :

Export : CSV

Visual sitemaps

In the Visual Sitemaps service, sitemaps are built on the basis of already launched projects automatically. The tool crawls the site structure and takes full-size screenshots of pages. In this case, the user determines the number of screenshots and the depth of crawling in the levels. Users of free subscriptions have a depth of no more than 2 levels.







The crawling process is relatively fast. But if the project is voluminous, it will be wise to start the process and get distracted by other tasks, and the service will notify by email about the readiness of the site map automatically. The project is exported to PDF.







At the time of publication, there are not so many additional functions, but comments on screenshots of pages, the ability to reorganize the project structure and protect projects with a password have been announced.



Summary

Visual Sitemaps will be convenient for preliminary analysis of the project. Especially if there is a need to look and evaluate the layout of the pages.



Cost, subscription : a free plan provides for the registration of one user and 50 screenshots with a limitation of the depth of the crawl to two levels. Paid subscriptions from $ 29 per month.

Ease of use : for beginners and intermediate users

Design : ★★★★ ☆

Teamwork : ✓

Export : link, PDF

Slickplan

The multifunctional service Slickplan includes a site map designer, a tool for creating diagrams and flows. A wide range of content planning tools and design templates.







The environment is logical, the work area is clearly separated from the navigation elements. And the navigation bar inherits the logic of classic desktop applications. You can build a site map from scratch or import it: it is possible to use XML and text files, as well as a built-in crawler.



The mechanics of block manipulation are intuitive. Adding new pages is quick, and drag'n'drop objects allow you to change the order and hierarchy. Settings for each element (page, block) of the site map include:

• Adding content (text and multimedia)
• Add notes
• Page Type Selection
• Distribution Design Template
• Charts
• Add link

In Slickplan, you can stylize a site map not only with the help of prepared color schemes, but also individually. Settings can be found in the Styles tab of the top toolbar.







Teamwork is implemented in detail. In addition to users with editor rights, you can connect users whose rights are limited to viewing the project. A section with comments will help to conduct discussions on the project online.







The service provides for the connection of Google Analytics. This is a distinctive and useful feature of Slickplan. A integration with third-party services (Basecamp, Slack and others) allows you to share the project in a convenient format. The project can be password protected.







Of course, with this feature set you should not expect free subscriptions. A 30-day trial period will lead to the selection of a suitable plan from $ 9.99 per month.



Summary

Rich feature set and smart interface. A huge set of features and export settings.



Cost, subscription : 30-day trial period. Paid subscriptions from $ 9.99 per month.

Ease of use : for intermediate and advanced users

Design : ★★★★ ☆

Teamwork : ✓

Export : Link, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML

Dynomapper

To look around in Dynomapper you will have to create an account. A 14-day trial period is available. Acquaintance with the service will begin with a visual video explorer.



As in the advanced visual site-mapping services, the user is invited to start the project from scratch or use the export. Crowling, by the way, is there too.



It is worth noting that the design of the environment is restrained and conservative. And the process of creating a sitemap is more like a classic interaction with Explorer (Win) or Finder (Mac). The structure of the site, in contrast to the services described earlier, is displayed in a form resembling a tree of files.







Compact and will appeal to those who are used to such an interaction. Although the Preview mode is already displayed in the form of a flowchart, and provides 4 additional types of display.







The settings for the properties and functions of elements are conveniently located in the right pane of the tabs:

• Page (Extended Page Information)
• Content (Planning (adding) text and multimedia content)
• Analytics
• Comment

Private project will be available only to users connected to the account.



Flexible export options to PDF allow you to choose the format (size) before saving. Additionally, the user defines and limits the number of nesting levels for export.







Separate manipulations and actions require a more detailed study of the help section.



Summary

The tool makes a thorough impression and most likely implies a deeper study of projects and work with content.



Cost, subscription : 14-day trial period. Paid subscriptions from $ 49 per month.

Ease of use: for intermediate and advanced users

Design : ★★ ☆☆☆

Teamwork : ✓

Export : link, PDF, CSV

Visual site mapper

Free crawler, generates a sitemap of an existing site automatically. The result of crawling is a diagram of the links of the site’s pages. And in some cases, the result may be large-scale.











The creators of the service posted the source code on Github ( https://github.com/alentum ). The crawler carefully stores the history of requests.



Cost, subscription : free

Ease of use : for beginners

Design : ★★ ☆☆☆

Creatly

Creatly carefully created a demo environment to test the service without registration. Creating sitemaps is only part of the tool’s functionality. Creatly is designed to visualize various information structures.



A demo project has already been created in the test environment for creating sitemaps. An example is designed to help understand basic mechanics, and copes with this task.







Drag'n'drop is visual: dragging and dropping elements is accompanied by visual links between pages and objects. Editing pages, deleting objects and connecting lines works like in a familiar vector editor. Therefore, for designers, the mechanics will be understandable and close.







The expandable right panel contains style settings and additional information. The grid and binding to it is a convenient feature. It is possible to select fonts, determine the alignment of text in a block, etc. A richly styled palette will help set accents on the site map.







The size of the document in pixels is a curious feature. The user is always aware of the resolution of the picture before exporting.







Summary

Creately on the mechanics of work is the closest to graphic editors. The functions of the service allow you to create not only sitemaps, but also many other diagrams and flowcharts.



Cost, subscription : the free plan includes 5 public documents and the ability to add up to 3 collaborators. Paid subscriptions from $ 5 per month.

Ease of use: for intermediate and advanced users

Design : ★★★★ ☆

Teamwork : ✓

Export : link, PNG, JPG, SVG



*************************************



PS



To make it easier to choose, here is a comparison table for all services (at the very end) and a few more screenshots.