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

skc-sketch-sitemap

skc-sitemap-v1

D. This is one of those semi-wireframe sitemaps, of a very data-heavy scientific legal documents app I designed many, many moons ago.

SITEMAP

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

NEW-katy-sitemap

G. This color-coded sitemap represents the product section colors for a web application redesign that I did.

sitemap2

H. This is a prototype sitemap for a jobs-related site a developer and I were considering making that we never put into production.

job-knocks-sitemap

I.prototype sitemap for one of the many Sigmaflow products I designed.

sigmaflow-product

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!

sitemap

 

 

 More Fresh Practices