{"id":5643,"date":"2011-06-02T03:39:40","date_gmt":"2011-06-01T16:39:40","guid":{"rendered":"https:\/\/stage.creately.com\/blog\/?p=5643"},"modified":"2011-06-02T16:41:43","modified_gmt":"2011-06-02T05:41:43","slug":"choosing-the-key-ingredients-for-the-perfect-sitemap","status":"publish","type":"post","link":"https:\/\/stage.creately.com\/blog\/diagrams\/choosing-the-key-ingredients-for-the-perfect-sitemap\/","title":{"rendered":"Choosing the Key Ingredients for the Perfect Sitemap"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div><p>Putting together a <a href=\"https:\/\/stage.creately.com\/diagram-type\/sitemaps\">sitemap <\/a>is akin to cooking up a perfect dish. We mentioned sometime back how a sitemap is more to do with the thinking behind a website, whereas a <a href=\"https:\/\/stage.creately.com\/examples\/mockups-wireframes\">wireframe <\/a>and mockup is all about \u201cdressing up\u201d your site in frills and lace. But this does not mean that drawing up a sitemap should be a boring affair with a minimum level of effort being put in. To be honest, there are some best practices that you should adhere to when drawing any sitemap. Check them out below.<\/p>\n<h3>1. Brainstorm on Paper<\/h3>\n<p>Yeah, we know, paper is such an old-fashioned concept. You can just\u00a0see\u00a0how old-fashioned books are since they are being replaced by the whole &#8220;Amazon ebooks &amp; Kindle&#8221; factor. But we still do have a penchant for pen and paper, especially when it comes to noting down that quick-as-a-flash idea that usually crops out of nowhere. Want to do up a sitemap? Doodle it out. If paper won&#8217;t work, try <a href=\"https:\/\/stage.creately.com\/Create-Mindmaps-Online\">mindmapping software<\/a> or anything else that you fancy. Ask yourself &#8211; What\u2019s my product (or service)? What are the basic pages I need? How can I stand out? Do I need Flash? Do I want my site to be content rich? What about video clips? Keep at it, until you get a clear picture of what your basic sitemap should \u00a0look like.<\/p>\n<p><a href=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Brainstorm-on-Paper.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5653\" title=\"Brainstorm on Paper\" src=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Brainstorm-on-Paper.jpg\" alt=\"\" width=\"550\" height=\"239\" srcset=\"https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Brainstorm-on-Paper.jpg 550w, https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Brainstorm-on-Paper-300x130.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p><em>Image reference: <a href=\"http:\/\/taniamilinkovich.blogspot.com\/2008_06_01_archive.html\">http:\/\/taniamilinkovich.blogspot.com\/2008_06_01_archive.html<\/a><\/em><\/p>\n<h3>2. Know thy Shapes<\/h3>\n<p>Lucky for you, we\u2019ve got an excellent repository of information on sitemaps that will rid you of any doubts. We do urge you to read through<a href=\"https:\/\/stage.creately.com\/Easy-Online-Sitemaps-Website-Flows\"> this page<\/a> at your earliest. When drawing any type of a diagram you do need to ensure that you know what all the basic shapes stand for. To make it simple for you, we\u2019ve illustrated the three basic shapes associated with sitemaps below. A page is basically used to represent general content, like About Us, Contact Us and Products etc. The Future Page represents a page that you would draw in the future. Finally, a Page Cluster shows you a number of pages of the same kind. We\u2019ve just shown you 3 shapes here, find out about the<a href=\"https:\/\/stage.creately.com\/diagram-type\/objects\/sitemaps\"> remaining 4 here<\/a>.<\/p>\n<p><a href=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Know-thy-Shapes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5645\" title=\"Know thy Shapes\" src=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Know-thy-Shapes.png\" alt=\"\" width=\"550\" height=\"198\" srcset=\"https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Know-thy-Shapes.png 550w, https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Know-thy-Shapes-300x107.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<h3>3. Even Spacing<\/h3>\n<p>Spacing could be regarded as being part and parcel of diagramming aesthetics. With sitemaps it really is no different. You could probably place spacing under the wider banner of \u201cAttention-to-detail\u201d, which is certainly an important part of diagramming as a whole. Sure, you may have your own idea on how you want to have your spacing sorted out. What we recommend is that you do not crowd your sitemap or vice versa. Ensure it is pleasing to the eye and devoid of clutter.<\/p>\n<p><a href=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Even-Spacing.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5646\" title=\"Even Spacing\" src=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Even-Spacing.png\" alt=\"\" width=\"550\" height=\"248\" srcset=\"https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Even-Spacing.png 550w, https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Even-Spacing-300x135.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<h3>4. Color `em up<\/h3>\n<p>Color is mandatory for beautiful diagrams. What\u2019s more, choosing the right colors for your website could very well lead to an increase or decrease in customers. But when it comes to using colors in a sitemap, the reasons may be quite different. You can use colors for basically anything. One example of using colors would be to indicate the various stages of completeness.<\/p>\n<p><a href=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Color-em-up2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5662\" title=\"Color em up\" src=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Color-em-up2.png\" alt=\"\" width=\"550\" height=\"323\" srcset=\"https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Color-em-up2.png 550w, https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Color-em-up2-300x176.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<h3>5. Link it through to Wireframes<\/h3>\n<p>Finally, having a sitemap on one side and a <a href=\"https:\/\/stage.creately.com\/Online-UI-Mockups-and-Wireframes\">wireframe<\/a> on the other would give you an excellent perspective on what the end result would look like. The conventional way of doing things is to do up a sitemap then move onto a <a href=\"https:\/\/stage.creately.com\/diagram-type\/article\/case-for-annotating-wireframes\">wireframe <\/a>and a <a href=\"https:\/\/stage.creately.com\/help\/UI-Mockups\">mockup<\/a>. Having two different interpretations of the same piece of information would help you ascertain whether you are on the right track. Other benefits would be saving time, since you can finish off discussing the Homepage and its design before moving onto subsequent pages.<\/p>\n<p><a href=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Link-it-through-to-Wireframes.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-5650\" title=\"Link it through to Wireframes\" src=\"https:\/\/stage.creately.com\/blog\/wp-content\/uploads\/2011\/06\/Link-it-through-to-Wireframes.png\" alt=\"\" width=\"550\" height=\"289\" srcset=\"https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Link-it-through-to-Wireframes.png 550w, https:\/\/d3w3koqe3hizre.cloudfront.net\/uploads\/2011\/06\/Link-it-through-to-Wireframes-300x157.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>There you have it. Just 5 basic factors you can consider when it comes to getting your sitemap achieve that desired level of perfection. Got any queries, suggestions or comments? Do <a href=\"http:\/\/support.creately.com\/\">get in touch<\/a> with us, we\u2019re more than happy to help you out.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Putting together a sitemap is akin to cooking up a perfect dish. We mentioned sometime back how a sitemap is more to do with the thinking behind a website, whereas a wireframe and mockup is all about \u201cdressing up\u201d your&#8230;<span class=\"continue-reading\"> <a href=\"https:\/\/stage.creately.com\/blog\/diagrams\/choosing-the-key-ingredients-for-the-perfect-sitemap\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":5646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[40,681,84],"class_list":["post-5643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diagrams","tag-collaboration","tag-diagrams","tag-sitemap"],"_links":{"self":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts\/5643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/comments?post=5643"}],"version-history":[{"count":22,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts\/5643\/revisions"}],"predecessor-version":[{"id":5673,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/posts\/5643\/revisions\/5673"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/media\/5646"}],"wp:attachment":[{"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/media?parent=5643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/categories?post=5643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stage.creately.com\/blog\/wp-json\/wp\/v2\/tags?post=5643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}