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.
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