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
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.
WisdomMap
(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:
Collaborate!
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!






neil
August 17th, 2008 at 12:28 pm
good web design pointers thanks! like the diagrams
What Are the Best Sources of Design Community News? | Vandelay Website Design
August 27th, 2008 at 7:45 pm
[...] How to Mindmap a Web Design Project [...]
Tadd
September 30th, 2008 at 9:09 am
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.
Brad C
October 18th, 2008 at 3:23 pm
Love the post. I find that anything you can do to organize the information before you start designing is extremely valuable.
Taiyab
October 18th, 2008 at 4:03 pm
@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.
Veera
October 20th, 2008 at 3:59 am
Useful. Was using a free desktop application Freemind for my tasks. But never tried a webapp. Will have a look at MindMeister.
Time Management And Efficiency - The Key To A Successful Freelancing Career
October 20th, 2008 at 5:54 pm
[...] Create a mindmap, and follow that through during the entire work process [...]
Ethan Gardner
October 21st, 2008 at 6:11 pm
Nice post. Personally, I use bubbl.us 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.
Andrew Wilcox
October 21st, 2008 at 9:42 pm
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 http://www.cabre.co.uk on the home page. There are further examples here http://maps.cabre.co.uk/index.html of web site created with MindManager. In some the map is the web site in others its invisible to the viewer.
How To MindMap a Web Design Project | CrazyLeaf Design Blog
October 24th, 2008 at 5:10 pm
[...] Ever wondered how you could effectively plan out an entire web design project? Well, here’s how. View source [...]
Dianthe
October 28th, 2008 at 4:21 pm
People should read this.
Recent Links Tagged With "mindmaps" - JabberTags
October 31st, 2008 at 2:04 am
[...] 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 [...]
michael
November 6th, 2008 at 1:19 pm
u r blog Is very nice