Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Information Architecture!
You have completed Information Architecture!
Preview
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
Tools
Further Reading:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up