How To MindMap a Web Design Project

Sometimes to get that idea across to the client (or vise versa) you need more then just notes, briefs, or even mockups. You need something visual but comprehensive as well. This is where mindmaps shine. A mindmap is basically a diagram that communicates notes, ideas, graphics, elements, lists (and more) in a visual and organized way.

As a web design freelancer myself, sometimes I feel lost in the documents, e-mails, and notes a client sends across. They seem so messy and all over the place and I find it hard to keep them structured. Sure, I could compile them all in one long document but that doesn’t seem organized enough. So for projects like these I fire up my web-based mindmap application and then compile all the information the client has sent across into something visually structured. I then send it across the mindmap to my client to make sure we are both 100% on the same page. Nothing else accomplishes this task as comprehensive as a mindmap! So today we will look at how we can create a mind map for an example Web Design project.

Keep in mind this information can travel into other freelance areas such as writing, coding, graphic designing and so on!

Choose Your Application

Instead of going through the list of desktop applications and web-based applications together, I’m going to give you two of my favorite options which are both web-based:


MindMeister is the more popular web based choice. It is visually pleasing with great collaborative features for you and your client to edit and share your mindmap. It’s options might be overwealming for those unfamiliar with mindmaps but rest assured, the process is still simple once you getting over this hump. It offers a free membership but you are limited in number of mindmaps you can create and store.


(Update: Looks like this site is MIA)

WisdomMap is a newcomer in this arena. It is a very simplified way of creating a MindMap. If MindMeister seems too much for you, try WisdomMap!

For this how-to we are going to use MindMeister.

Central Idea

Each MindMap starts out with a central idea. This is the center point in which all other elements will revolve around. For a web design project, you can simply name this central idea the title of the project or client.

Here is the outcome:

Top Nodes / Ideas

After you’ve created your central idea/project name you can begin adding ideas or “nodes” to your mindmap. You can also create sub-ideas and sub-nodes. For the main nodes I usually start out with:

  • Header
  • Main Index
  • Sidebar
  • Footer
  • Sub Pages

Here is the outcome:

Sub Nodes / Ideas

Sub nodes or Sub ideas can be attached to the main nodes listed above. From here you can add each element to that part of the design. You can also split them once again into sub-lists to enter in the functionality of each element. This is the power of the mindmap. It allows you to make sure you and your client are 100% clear on the design. The time it takes to re-do your design because of confusion is far more time consuming than the time it takes to create a mindmap!

Here is an example of nodes and sub nodes for a design project:


The best part about mindmaps is that you can collaborate with your clients to edit the information stored on there. This helps you and your client come together and create exactly what your client had in mind. Invite the client or each member of the clients company into your mind map and let them edit, adjust, and reform some of the ideas. You will never be left in the dark again when it comes to your clients projects.

Other Ideas…

Attachments / Graphics

Did you know you can also add graphics and other files to mindmaps? You can upload snipplets of your design related to the idea node as reference or review for your clients.

Illustrate much?

If you’re good with pen and paper (which I’m not!) you can also create some of the most beautiful looking diagrams with mindmaps on a basic piece of paper. Carry a grid moleskine or other notebook with you and keep your mindmaps in your pocket!

Personal Organization

Instead of using mindmaps for your clients only… use them to keep yourself organized. I’ve used mindmaps to map out not only my own projects (this website being one of them!) but also full business plans and roadmaps!


14 Responses to “How To MindMap a Web Design Project”
  1. neil says:

    good web design pointers thanks! like the diagrams

  2. Tadd says:

    I’ve never honestly been a fan of MindMaps, but this does make sense – and no doubt could help me in the future when building client sites. I always get lost in the design I forget the development. (Big difference)

    Thanks for the tips.

  3. Brad C says:

    Love the post. I find that anything you can do to organize the information before you start designing is extremely valuable.

  4. Taiyab says:

    @Brad C: Exactly. Also, what I’ve noticed is that a lot of freelancers will get into a lot of trouble and run into a lot of obstacles when producing the work if they haven’t planned beforehand.

  5. Veera says:

    Useful. Was using a free desktop application Freemind for my tasks. But never tried a webapp. Will have a look at MindMeister.

  6. Nice post. Personally, I use for mind mapping, but the technique is effective. This is an important step for large projects especially since it can help with information architecture and features alike.

  7. Mind maps are very powerful regardless of the tool used. The software has the great benefit of being easily recorganised.

    I would also recommend mind maps of what the client wants to achieve with the web site and one which describes the target market.

    I know of serious web developers who use MindManager to wire frame the clients web site in the first meeting. In MindManager the central topic notes map to the home page, the main topic notes to the first level in a menu structure and sub-topics to the second level etc. With a Tablet PC you can sketch content in to pages.

    MindManager allows you to export the map via macros, HTML templates and CSS to created a branded web site from vanilla mind maps which just focus on content and structure. You can see part of the map and the web site used to create on the home page. There are further examples here of web site created with MindManager. In some the map is the web site in others its invisible to the viewer.

  8. Dianthe says:

    People should read this.

  9. michael says:

    u r blog Is very nice

  10. This is the first time I am hearing about mind maps. But they surely look awesome.


Check out what others are saying about this post...
  1. [...] Create a mindmap, and follow that through during the entire work process [...]

  2. [...] Ever wondered how you could effectively plan out an entire web design project? Well, here’s how. View source [...]

  3. [...] public links >> mindmaps Something around Mind Maps Saved by arollin on Thu 30-10-2008 How To MindMap a Web Design Project Saved by hotsaucelakers on Wed 29-10-2008 Getting organized again with mind maps Saved by [...]

Speak Your Mind