Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Site Maps

3:59 with Dan Gorgone

One of the helpful strategies used by designers and developers is the creation of a site map. This visual representation of your website or app can provide an easy way for everyone on your team to understand how information, pages, and sections relate to each other, and how to scale for the future.

New terms:

  • Sitemaps - visual diagrams of website pages and sections, arranged and connected so you can see the relationship between everything on your site

Website Examples:

Tools

Further Reading:

How to Do Website Competitive Analysis to Beat Your Competitors Online, by Sloane Moore
Top 50 Sitemap Generator Tools for Creating Visual Sitemaps

Dividing up information for a website or app is an essential task. 0:00
The structure of your site should make sense to you and your users. 0:04
But sometimes the amount of information we have to deal with makes it 0:08
difficult to truly grasp the full scope of the website project. 0:12
Retail sites that offer hundreds or thousands of products have to deal with 0:16
this, but you don't have to be Amazon or eBay to find yourself confused. 0:20
Any website can get a little muddled if its content isn't divided up properly. 0:26
So, another tool I want to mention to help with your IA 0:31
efforts is something called a site map. 0:34
Site maps are visual diagrams of website pages and sections arranged and 0:37
connected so you can see the relationship between everything on your site. 0:43
Site maps are really helpful for quickly grasping what a web project covers. 0:48
So not only can it help you as you build a site, but project managers and other team 0:53
members can also benefit from this visual reminder of where everything lives. 0:58
For example, here's a website for TW Walsh. 1:03
If you're a band or 1:07
artist, you can hire him to master your record before you release it. 1:08
Now, his website is very straight-forward. 1:12
He doesn't need to post more than what you see in the main menu, so the sitemap for 1:14
his website would look like this. 1:19
Now, not all sites are so simple. 1:21
But by looking at a sitemap you can quickly see at a glance 1:24
where everything is on a site. 1:28
Here's a site map for a different website. 1:31
And you can see it's a little more complex. 1:33
There are six main sections of content, and 1:36
some feature more categories of content than others. 1:38
In fact, the news and events section has three categories of content, and 1:41
one of those has its own subcategories as well. 1:46
With larger sites, site maps can get pretty complex, but 1:50
you could also create a site map for each section. 1:54
This way you focus on one area at a time without needing to create a site map 1:57
that's too crammed. 2:02
By mapping everything out you'll also know if you've covered a topic or not. 2:03
And when it comes time to add a new section or 2:08
category you can see where it should go. 2:11
It's a helpful way to keep a development or design team on the same page. 2:14
So there are plenty of benefits to mapping out your site. 2:18
That being said, let's talk about how to create one. 2:23
Earlier, I showed you a site map for TW Walsh's website and for that, 2:27
I used an online tool called Glue Maps and made it myself. 2:31
You can create a site map there, export it, and 2:36
share it with other people on your team. 2:38
It's pretty simple. 2:41
Professional developers might use a tool like Visio to create flowcharts for 2:43
their complex site maps, but another option is, again, Trello. 2:47
This tool is so flexible you could create a series of lists for 2:52
each category or section. 2:56
Add cards to represent your pages, 2:58
move them around, have teammates suggest changes. 3:00
There's a lot you could do. 3:03
So you have your pick of online tools or 3:05
you could keep it low tech and use sticky notes. 3:08
Get yourself a white board and start laying out your pages, one page per note, 3:13
and arrange them how they are or how you want to build a site. 3:17
Sometimes these low tech solutions are easier to work with. 3:22
Just remember to snap a picture of this before the stickies lose their stick. 3:25
So, in the end, site maps can be helpful tools for 3:30
organizing not just information, but your ideas about how to divide up a site and 3:34
give everything smart, intuitive labels. 3:40
You can look at a structure and see if it makes sense, or 3:42
the pages within a section and figure out what doesn't belong. 3:46
Just be sure to choose a site map solution that's easy to use and understand so 3:49
your team can get right to work creating the best experience possible 3:54

You need to sign up for Treehouse in order to download course files.

Sign up