We all know that planning and as much time as possible in pre-production is extremely valuable to the result of a website. We also know that we have all had to cut corners, make do, and just power through… One of the barriers to pre-production can be the tools used to get the job done. This week I found a great tool, and used some existing Drupal stuff to get it dialed in for my purposes… and now I will share with you.

What Goes Where

Mapping out an entire site in paper involved a lot of erasing, using illustrator/photoshop/indesign is pretty much overkill (not to mention they don’t flow well for me, as I use them for design rather than flowcharts), and drawing so many lines, arrows, and drag-and-drop takes too much time using any of the MSOffice applications.

Google What You Want

I started by googling terms like ‘wireframe’, ‘diagram’, and ‘architecture’ combined with ‘web’. ‘layout’, etc… which lead to programs like oversite, conceptDraw, SmartDraw, and Viso. These ranged from expensive, to too costly, and they (the demos that I did try) were pretty good, but I just didn’t gel with them. So I changed my search pattern and started down a slightly different googling path… ‘mindmaping’. Don’t Worry, I’m Getting to the Drupal Stuff. One of the first things I came across was a wiki article on mind mapping, which lead me to an article on mind mapping software. I quickly decided that I was going to stick with open source, so I took a look at a few of the GPL packages.

FreeMind and XMind

I started with Freemind and checked out the screenshots and spent a little time watching the video, and I was very impressed and was about to download it. I decided that I would look and one more before I did, and I checked out XMind. The XMind site was pretty slick, there were plenty of samples , no videos but a quick trip to YouTube gave me what I needed, and I decided to give it a go.

Drupal and XMind

So it was time to start putting stuff together and using tab, shift-tab, and the easy properties pane was easy and fast. I started adding in icons to quickly identify which content was which… when it hit me… I’m mapping for Drupal, I should use Drupal icons. So I downloaded iconify moved the icons into my XMind directory and added them to what XMind calls ‘markers’. So now I have an icon that indicates a view, a cck, modules and categories… that all look like what you would expect in Drupal.