Illustration by Avirup Basu
Website design starts long before the pen hits paper to put together the look and feel. Sitemaps and information architecture are important to put together before visual design kicks off. Sitemaps and information architecture are ways of mapping out the organization of information in a website, or digital product.
Sitemaps are a way of mapping out the structure and organization of pages, and content in your website. There are two main types of sitemaps, visual, and XML. The latter being used by search engines to crawl through the website and index it for search. Visual sitemaps are often used early on in the process to map out what content will be included, what templates need to be designed, and where the gaps are.
Need inspiration to get your own sitemap started? Explore these visual sitemap examples to kickstart your sitemap design project.
Visual sitemap examples
Apple visual sitemap
Apple.com publishes a text sitemap on their website showcasing the various sections of the website. Below is a visual representation of one section of that sitemap. In this case the services section of the website is highlighted.
Visual representation of a sitemap. Image credit Apple.com.Using this sitemap style, created with the Whiteboard plugin for Adobe XD, you can easily see how the pages within services are broken down, and where they fall relative to other sections of the website.
Online bookstore visual sitemap
In this simple online bookstore sitemap template, pages are laid out as folders, mirroring the organizational structure used on the website’s server. It also carries with it color coding by level making it visually scannable when reviewing with key stakeholders in the website design process.
Displaying content in a clear and easy-to-understand way makes it easier to spot gaps in content and page structure. Building flow diagrams like this inside the same website design tool you’re already using can help to expedite your process transitions.
Library visual sitemap
Creating the visual sitemap for design and planning purposes is great, but creating a visual sitemap for users to navigate with can be an extra step in creating a navigable experience for your customers.
That is just what this small Canadian library did with their sitemap page on their website. Leveraging color and clickable links, library visitors can quickly navigate the website by looking at the map.
Remember that a sitemap is not a user-journey, though it is beneficial to align your sitemap to the user journey so that it follows a logical, user-centered approach. The sitemap is intended to show hierarchy and groupings of pages or content like it has in the library example above.
Task management app sitemap
Sitemaps span beyond just static web pages, and should handle authentication scenarios too. When a user is logged in, or authenticated, they’re often shown different content than if they were not logged in. Though this may not change the technical makeup of the sitemap, representing it visually can help generate discussion around the user experience, and where to place the authentication portals within the site structure.
A visual sitemap for Taskly. Image credit Behance.In this sitemap made by Markus Fischer, he breaks down authentication scenarios for his task management application Taskly. This sitemap goes the extra mile and defines where the links to these pages live, whether they’re in the top level navigation, or the footer.
Website sitemap with wireframes
Going one step further you can begin to combine your visual sitemap with simple visual templates for each page. This not only provides the viewer with a clear visual structure of the content, but also provides a peak into the format that each page will take. In this sitemap example, Angie added illustrations of what each page layout might look like, not only improving the aesthetics of the sitemap document, but also adding some valuable discussion and review elements.
A visual sitemap for envirolux.net uses a flow diagram. Image credit Angie Herrara.Sitemaps can mold and shape to fit your project needs, whether you need to show simple boxes, or more intricate illustrations to represent the content. Understand your audience and why you’re generating a visual sitemap, and that will inform the approach that you take.
Learn more about building sitemaps
There are many great resources and tools for learning about information architecture and developing sitemaps: