Presentation is loading. Please wait.

Presentation is loading. Please wait.

Sitemap Design Cynthia Antonio, Yoon Hea Lee, Jason Mumford.

Similar presentations


Presentation on theme: "Sitemap Design Cynthia Antonio, Yoon Hea Lee, Jason Mumford."— Presentation transcript:

1 Sitemap Design Cynthia Antonio, Yoon Hea Lee, Jason Mumford

2 What is it?  A site map is a high-level architectural blueprint of the site, it maps out the organization and labeling of major areas of the site.

3 Why is this document important?  This step is important because it is the first thing you present a client with. This is your way of saying “this is the plan”. A client want to know that you know what you are doing, so by presenting this first document to them, it makes the designer look organized and professional.

4 When in the design process do you create this?  A site map is created in the beginning of the design process, as it is the blue print of the overall design. It is important to show the client this step so that they can have an idea of what they will expect from you and if they want to make some changes to it, it can be done before you start further along the design.

5

6 Resources for Creating a Sitemap  Powerpoint (SmartArt) –Available on most Desktops –Can use it to create the tree structure  Slickplan –http://slickplan.com/http://slickplan.com/ –Pay Site $6.99/month –Has a site crawler for automatic generation  SmartDraw –http://www.smartdraw.com/examples/?catid=.examples.smartdraw.softwar e_design.web_site_mapshttp://www.smartdraw.com/examples/?catid=.examples.smartdraw.softwar e_design.web_site_maps –Flowchart software – similar to Powerpoint –Free download. Pay later  Illustrator/Photoshop –More complex, not necessarily better –Powerpoint can use the same fonts and colors

7 Some Tips  A top down hierarchy is easier to read than left-right  A multi-column layout is easier to read  Keep it simple  Avoid using interactive elements  Main navigation should use labels A, B, C, etc  Sub links should use labels A.1, B.1, C.1, etc  Alternatively, you can use 2.0, 2.1, 2.2, etc for labeling  Use different shapes for each type of page - Ex: squares for regular pages, hexagon for PDF - Overlapping circles could represent multilink pages

8

9 Examples of Sitemap

10

11

12

13 The Two Other Kinds of Sitemaps: XML and HTML  HTML –Designed to help the user find content on the page –Don’t need to include each and every sub-page  XML –Tells the search engine about the pages in a site, their relative importance to each other, and how often they are updated –User doesn't need to see –Designed to help search engine bots find pages on the site –Some resources for XML Sitemaps http://www.sitemaps.org/ http://www.xml-sitemaps.com/

14 Some Great Articles & Resources  http://sixrevisions.com/usabilityaccessibility/information-architecture- 101-techniques-and-best-practices/ http://sixrevisions.com/usabilityaccessibility/information-architecture- 101-techniques-and-best-practices/  http://www.utexas.edu/learn/designprocess/structure.html http://www.utexas.edu/learn/designprocess/structure.html  Search “Site Map” in Google Images –https://www.google.com/search?q=site+map&rls=com.microsoft:en- US:IE- Address&tbm=isch&tbo=u&source=univ&sa=X&ei=TRQ2VLmDDM- L8gGp5wE&ved=0CD8QsAQ&biw=1198&bih=627#imgdii=_https://www.google.com/search?q=site+map&rls=com.microsoft:en- US:IE- Address&tbm=isch&tbo=u&source=univ&sa=X&ei=TRQ2VLmDDM- L8gGp5wE&ved=0CD8QsAQ&biw=1198&bih=627#imgdii=_  http://www.kenwilles.com/blog/entries/29 http://www.kenwilles.com/blog/entries/29


Download ppt "Sitemap Design Cynthia Antonio, Yoon Hea Lee, Jason Mumford."

Similar presentations


Ads by Google