Let’s talk about sitemaps and how we use sitemaps during our website design process. We use sitemaps as part of the strategy phase. I will focus on a visual sitemap instead of sitemaps XML files, which would happen later in the development process.
Visual sitemaps show the structure of the site contents. The structure is organized to best flow for user experience.
Visual sitemaps have many benefits:
- Sorting information
- Streamlining user experience
- Optimizing communication between design and development
Making a sitemap
We mainly create sitemaps for our clients’ new websites or if we’re redesigning website navigation.
The first step: We interview our clients to find their primary goals related to the website. Once we know what they want to highlight to their users, what actions they want their users to take, and what information they want to display, we are able to proceed.
After that, some sitemaps are very simple and straightforward (like the one above) and clients often have an idea that can help guide us. Other sitemaps are more complicated.
For complicated sitemaps we might collect content topics the client wants on their site and spend time categorizing them. Then they become pages. We tend to use a browser-based program, but I have also whipped out some sticky notes and a pen to organize topics into pages.
After we create the sitemap, we give it to the client to review. Clients, after all, are the experts in their field and would know best how their users would flow through the website. For example, perhaps the clients know that users would not gloss over pricing if it were nested underneath services.
Tools for Site Mapping
There are many ways to create a sitemap. You can keep it as simple as paper and pencil, but there are lots of great free programs out there. We recommend using whimsical.com. I like Whimsical because it has a free plan and is browser-based. Whimsical is easy to pick up, to collaborate with others, to share with clients, and to leave feedback. I mainly use their board feature for wireframing. They have great features that allow you to draw connections, add icons, create legends, and make comments.
Utilizing visual sitemaps impacts users and the website creation process. It outlines how the information will flow throughout the website and what are the primary pages and their sub-pages. They are great tools to make sure that the clients, your development team, and you are all on the same page.
