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
Here's one solution to the sitemap challenge. See how it differed from your own and hear the thought process behind the structure.
.png){kind=link}
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
How did it go?
0:00
Were you able to tackle
the sitemap challenge?
0:01
I'll walk you through the process I went
through to create my sitemap diagram.
0:04
It will probably be different than yours,
and that's okay.
0:08
First, I researched a few elementary
school websites to see what features and
0:12
pages they had in common,
while keeping our persona thandy in mind.
0:18
I listed them out in
this doc to keep track.
0:23
I thought things like the calendar,
staff list, student handbook,
0:26
and more, would all be necessary for
Northeast Elementary's website.
0:31
Next, I added any additional features or
0:37
pages I thought the audience might
want on this website to my list,
0:40
like photos and videos and donations.
0:46
Now with everything listed out,
I'm going to organize the pages and
0:49
features into logical groupings
to create my site map.
0:54
There are many great tools out there
to create a sitemap diagram, so
0:57
feel free to use a diagramming tool of
your choice, or even a design tool.
1:02
I'll add a link to draw.io,
1:07
which is the one I am using
in the teachers notes below.
1:09
First, I'm going to add
each item to its own box.
1:13
Then I'm going to organize them
into groups that makes sense.
1:18
Side note, a great way to do this is
to have users do the card sort to
1:22
see the organization that
makes the most sense to them.
1:27
But you can also do it yourself and
then test it with users afterward too.
1:31
Let's get to organizing.
1:37
The first group I am
seeing is an about group,
1:39
where users would find out
information about the school.
1:42
I'm grouping the mission statement,
1:50
Staff list, News,
1:55
Contact information, And
directions to this group.
2:03
The second group I'm
going to call families.
2:19
This is the information parents and
guardians will want to access
2:22
Here, I placed the school calendar,
2:38
Lunch schedule, Lunch fees,
2:43
Volunteering, PTA,
the Parent Teacher Association,
2:50
Donations, And the student handbook.
3:00
The third group is the academics group.
3:08
Programs vary from school to school, so
3:11
I just grouped an item called
programs here as a place holder,
3:14
and I also added photos and videos.
3:20
I think users would like to see
the programs and not just read about them.
3:23
The final group is called activities.
3:27
I added sports and clubs here, and
3:32
I also added photos and videos again.
3:37
Seeing all the different activities
available would be great for adults and
3:41
for the students.
3:46
Let's put these together into a sitemap.
3:47
And here's the final diagram.
3:51
Having the layout for the overall
site now lets me focus on designing
3:53
individual pages and common features.
3:58
This will also help the team or
4:01
client better understand
the scope of the project.
4:03
Nice job designers.
4:07
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