Visualize Website Structure – Sitemap

This is a chapter 2 of Step-by-Step Creating a Website Guide. Which pages are linked? or which page is the most important etc. Organizing page priorities will help you when structure changes later on. I will share tips to make a sitemap and useful online tools!

Step-by-Step Creating a Website Guide: Chapter 2

  • Goal: Visualizing website structure clearly
  • Things you need: A piece of paper and a pen
  • Knowledge Requirement: Everyone is welcome

Table of Contents

  1. Planning a Perfect Website Content
  2. Visualize Website Structure – Sitemap ←We are here!
  3. How to Create a Website Wireframe
  4. Photoshop Website Design Tutorial
  5. Slicing Images for Your Website with Photoshop
  6. Guide to HTML Semantic Markup
  7. Basic Process to Apply CSS to Your Website
  8. Let’s Publish Your Website to the World!

Easily Understandable Sitemap

Easily Understandable Sitemap

Grouping Related Pages

You will pop up many ideas when you started to make a sitemap. At first, let’s write down pages that your website needs. You don’t have to care about category or hierarchy on this stage. Then grouping related pages.

Priorities of Pages

Which pages are important? Is that page really important? Put yourself on the position of your users and think about it. Sometime users don’t care of page that you think it’s important.

Don’t let users click many times

Your website is getting bigger… means users have to click many times to go to deep level of page. Let’s make your website around 2 – 3 level.

Online Tools for Creating a Sitemap




You can make a sitemap like this in a minute!


Gliffy ホームページ



Webサイト用構成図作成ツール Slickplan


Lovely Charts

Lovely ChartsでWebサイトのサイトマップを作成

Lovely Charts

Let’s think a simple and perfect structure!

» Next chapter: How to Create a Website Wireframe