Warning: file_get_contents(http://www.linkedin.com/countserv/count/share?url=http://freshpractices.com/sitemaps/&format=json): failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /home/freshid8/public_html/freshpractices.com/wp-content/plugins/tk-social-share/tk-social-counter.php on line 145
I have a ton of sitemaps – this is usually how I structure my information architecture thinking, whether for a software product or a website. Some of my sitemaps start to veer toward wireframes and some are color coded to signify important things – I just do what I think is needed in that moment, depending on factors like who needs to see it/approve the direction, and how much information they need (like a client vs developer.) Here are a wide variety of samples for ideas or consideration.
A. This site map was for a multi-course website, which I did as a contractor for another firm.
B. This is an example of how you can use a sitemap to help organize the content you have, vs. what needs to be written. This was for a plastics manufacturer and given the red light colors, I really really wanted the content. 🙂
C. These sketched and digital sitemaps were for the SKC Membership app, built on WordPress/BuddyPress with a ton of custom coding. In the second image you can see my sitemap sketch, with colored symbols to represent what features we had pre-built in the WordPress platforms, vs what had to be custom-coded, plus what features “earned points” which had a lot of system ramifications and on multiple devices (individual desktop, mobile and tablet apps.)
D. This is one of those semi-wireframe sitemaps, of a very data-heavy scientific legal documents app I designed many, many moons ago.
E. This site was giant, and the content needed to be reorganized into several different sites, so this is a text-based sitemap.
F. This color-coded sitemap was for the City of Katy, Texas redesign I did. The site still features my design, years later, which probably means it’s not responsive but that is still sweet. 🙂
G. This color-coded sitemap represents the product section colors for a web application redesign that I did.
H. This is a prototype sitemap for a jobs-related site a developer and I were considering making that we never put into production.
I. A prototype sitemap for one of the many Sigmaflow products I designed.
J. This is some sort of hybrid ecommerce sketch – is it a wireframe or a sitemap? Who knows. I do what is needed to communicate in the moment!