Visualize your website before you build it

In layman’s terms website map is a tool for planning and designing web sites. Visualizing your website using a sitemap (also known as site architecture map) is a decisive step because it helps in creating coherent navigation paths for users to follow through the website. With this framework in place you can think logically understand and consider how your users will navigate through the site, then tailor content to them.

How do I get the Sitemap framework in place?

  • Sketch your sitemap

Use a sitemap drawing tool or plain pen and paper to sketch your sitemap out. Using standard sheets of paper may not be enough to accommodate all your design thoughts and ideas, so you have to preferably use more paper or to keep it simple, just use a sitemap tool to get this job done. And keep the design layouts organized in folders online or your local disk instead of wasting time looking around for papers you know you have somewhere.

  • Use a clean layout

What is the best layout to illustrate your website’s structure? Start by drawing a page icon in the middle, this will represent the homepage. From there, more page icons will branch out horizontally to indicate other pages within the website. Within minutes, you will have the horizontal diagrammatic representation of the structure of your website in the top-down structure.

You can present sitemaps in a slightly different layout too. Simply start by creating a page icon from the left and keep adding more and more page icons from left to right. You’ll soon have a vertical sitemap architecture in front of you.

  • Colour to create a visual treat

Colour up the shapes on your sitemap structure to produce unmatched levels of aesthetics delivering a unique visual treat and bringing the entire sitemap to life. You can give the homepage once colour and each of the subsequent sections can be shaded differently to show the hierarchy of pages.

  • Style all the navigation links

Each Web page in the sitemap is represented as a page icon. Navigation links (connectors) are used to connect the page icons to illustrate the relationships that exist between the pages. These connectors can be either straight, curved or sharp-angled. See the image below to understand how each of this connector style affects the overall look of the sitemap.

  • Suggest URLs for each page

The importance of a web page’s URL structure is always a debated topic. SEO experts consider placing keywords in the URLs important. Thus, suggesting URLs in the page icons will help clients understand the intended URL structure as a part of the interface.

  • Create links to test your framework

You are definitely happy that the framework is ready to be sent for review. But it’s always best to test the framework by linking the individual page icon to the respective wireframes of mockups to show the client a clear view of the overall web design project. This will save a lot of time and effort and also help your clients evaluate the functionality and consistency of the existing sitemap structure.

Image from :

Learn How Creately Diagrams works

Learn How Creately Diagrams works