A Collection of Inspiring Sitemaps and User Flow Maps

All websites should start with a good plan. Focussing on the design process first may be common for smaller sites. For larger sites, when user experience is paramount, creating an initial sitemap or user flow map is an effective way of working out how you want visitors to use and navigate around. UX is key to a successful site. And always remember the 5PS of planning a site – Proper Planning Prevents Poor Performance.

There are many different methods for creating a sitemap, but we don’t want to get into all of those today as they are typically not the best thing to look at from a design perspective.

So we’re going to take a look at some sitemaps that have taken design into consideration. Not the site design, but the actual design of the sitemap. So no post-its, no Sharpies, no whiteboards, no mind-mapping software, just a beautiful selection of carefully crafted sitemaps.

You might also like to take a look some inspirational UI style guides or even some examples of web design wireframe sketches.

Sitemap by Ed Moss
Sitemap by Ed Moss

Information Architecture by Kellyn Loehr
Information Architecture by Kellyn Loehr

User Flow'in by Bill S Kenney
User Flow'in by Bill S Kenney

User Flow by Eric Ressler
User Flow by Eric Ressler

Sitemap For Student Guide by Janna Hagan
Sitemap For Student Guide by Janna Hagan

Simplified Checkout Process by Michael Pons
Simplified Checkout Process by Michael Pons

Site Flow by Angie Herrera
Site Flow by Angie Herrera

User Flow by Mackenzie Child
User Flow by Mackenzie Child

Sitemap for IntelliMap by AveA
Sitemap for IntelliMap by AveA by John Menard

Flowchart by Eric Miller
Flowchart by Eric Miller

Website Flowcharts Stencil by Eric Miller
Website Flowcharts Stencil by Eric Miller

Website Flowcharts for Illustrator by Eric Miller
Website Flowcharts for Illustrator by Eric Miller

Sitemap/Flowchart for the Web by Jane Zhu
Sitemap/Flowchart for Web by Jane Zhu

Mobile Flowchart for Illustrator by Eric Miller
Mobile Flowchart for Illustrator by Eric Miller

Application User Journey by Michael Pons
Application User Journey by Michael Pons

Comments

  • Any recommendation on what to use to make something like this?

  • I’m interested to know the software that has been used in each of these. Is it possible to provide a list. I currently use @slickplan but some of these you mention seem very advanced.

  • Axure, Sketch, Omnigraffle, InDesign…

  • Samuel Latchman

    Most of those are actually from one library you can buy at uxkits.com. It comes in Illustrator, Omnigraffle and Sketch versions.

  • Jonas

    Nice roundup and I hate to be that guy but you wrote “UX is key to a successful site.” UX stands for User Experience and people will always have one. Maybe if you added “A good user experience” that sentence makes more sense.

  • Peter Barr
  • Anis Selmani

    please some one tell me some tools to creat sitemap like this

  • Dago Mx

    Do you know a tutorial of how to use them? I’d like to see how hard is working with stencils.

  • Juan D. Bolaños

    What are your thoughts on spending too much time making sitemaps and wireframes look “pretty”? If the purpose is to explain and convey a solid User Experience structure, should we really be worrying about how aesthetically pleasing they are? I’m stuck somewhere in the middle of focusing on structure and user flow while making it visually digestible.

  • Chris Adams

    So what’s a storyboard in this context?

  • Jose Gonzalez

    Nice works but… I can not find resources, templates for Axure. Nobody works with Axure? :(