Layout

My Top 10 Web Design Tools

I had already started working on a blog post with my top 10 most useful Web design tools but, like many other things these days, I had continually postponed finishing it in favor of “more important things”. Like client work… ;-)

But I saw a post today on the Visualrinse blog that tackled the same topic so it prompted me to finish mine.

As mentioned in the above blog post, we all have our own favorite working methods, tricks and tools for completing projects and, as I have already mentioned here before, I have really tried to refine my process in the last year or so and find the tools that really help me get my work done, especially since I am a one man shop and need to tackle both the design and development aspects of my projects as well as managing them and my clients. Now that I am freelancing full time, I have really started to develop a process that works for me. So here are the tools I could not live without in my Web design and development work.

 

  1. Mindjet MindManager Pro / JCV Gantt Pro. I stated using MindManager in the summer of 2007 and it has quickly become one of my most useful tools. I use it for several things like brainstorming ideas, creating projetc management documents like a projet’s creative brief, work breadown structure or tasks, site maps and more. Each project gets a “dashboard” map that links to all the other project related maps, documents or folders. From the tasks map I move to the JCV Gantt Pro addin to create the project schedule and determine the cost of the project. MindManager is the best “knowledge repository” application I’ve ever tried and I now wonder what I did without it before I found it.
  2. Axure RP Pro. Axure is the most recent addition to my toolset. It takes off where MindManager leaves off for me. As great as MindManager is for my own internal processes I realized it did not create great deliverables for clients. Axure is the best tool I found to create site maps and flow charts but its main purpose is wireframes, functional interactive prototypes and documentation and it really excels at it. I’m working on a appointment/calendar app for a current site project and prototyping it in Axure will save me a lot of coding time later. There’s nothing like showing a working, clickable and interactive version of a site feature to a client, even if it is fake, to work out the kinks and nail down expectations.
  3. Adobe Fireworks. The mainstay in my toolset for the last 10 years and my most used app along with Dreamweaver. I really could not do my job without Fireworks. It completely replaced Photoshop for me for Web design and layout work over 10 years ago and I have never looked back. Its hybrid raster/vector workflow as well as Web centric focus make it the most efficient design app I have ever used. It’s like Photoshop/Illustrator and InDesign all rolled up into one killer app but just for the Web. CS4 will be released soon and it really will be the best version ever.
  4. Adobe Dreamweaver. Unlike Fireworks which I pretty much adopted immediately after trying version 2.0, it took me a long time to warm up to Dreamweaver. I had been using HomeSite which was a great code editor for a long time but I had to use a separate FTP application to upload sites and was looking for ways to automate some of the repetitive work. Around the release of Dreamweaver 4 but especially the next one, Dreamweaver MX (6.0), the application had evolved in such a way that it basically replaced HomeSite for me. Now it is a full fledged Web authoring environment I couldn’t live without anymore. It has the right balance of code centric features, visual editing and a lot of other features around those that just make it a true powerhouse. The new CS4 version which is in public beta right now adds very cool new features that are already making my life easier.
  5. ColdFusion. I am more of a designer and front end developer than a backend developer but I still have to wear that hat. I have tried Perl and used ASP in the past and although it was OK it got tedious for me after a while. I also tried PHP as it’s very popular but I really don’t like it at all for some reason. It really didn’t click with me and I strongly dislike the syntax. When I started working with ColdFusion it’s like a light bulb was turned on for me. The syntax made sense and it could do more in fewer lines of code than ASP (and most other server-side scripting languages) ever could. In the last few years, ColdFusion has kept evolving into one of the most powerful server-side development solutions around with many buit-in features you need plugins for in other platforms. It really rocks my world and has empowered me to build better Web sites.
  6. Web Developer Toolbar. Although Firefox is not my main browser (Opera is… and Google Chrome is gainning ground), no Web designer/developer should be without this utility.
  7. Firebug. Another amazing Firefox extension that probably needs no introduction. The Inspect functionality alone makes this an absolute must-have. If you’re not sure what CSS rule affect a misbehaving element, you’ll find it with Firebug’s Inspect. Not far behind is Opera’s new Dragonfly feature which is still in alpha. Similar to Firebug but built right into Opera 9.5+.
  8. Genopal. Going back to designer tools, Genopal is one of those rare finds you wonder how you did without before discovering it. Genopal is a small application used to create color schemes. Nothing earth shattering here but, it does it in a very unique way that I had never seen before. This is the most intuitive color tool I have ever used and I urge anyone struggling with creating good color schemes to try it. I use the desktop Pro version but there’s also an online version on the site. This one is a true little gem.
  9. Studiometry. What would I do without this amazing application? Studiometry is the administrative center of my world. Projects, clients details, contacts, timers, invoicing, reports and more, Studiometry tracks every detail of my professional work and helps me keep organized.
  10. jQuery. This “little” JavaScript framework has rocked my world. Like ColdFusion but on the front end, it has empowered me to create complex interactivity faster and easier than I ever could before. I have tried others but jQuery just clicked for me and I keep being amazed at what I can accomplish with it.

 

So the above are my own must-haves. The list is not complete though so here’s a few honorable mentions for other applications that are central to my work :

One is Outlook 2007 for keeping up with not only email but client contacts, calendar and categorized tasks lists  (following the GTD principles). It’s the first app I launch in the morning and the last one I ckeck at night.

Another is FeedDemon, the incredible RSS feeds aggregator from Nick Bradbury and NewsGator. In our field, fighting information overload has become a real issue, at least it has for me. FeedDemon helps me keep informed by following the myriad of sites I am interested in but also through keyword feeds that gather information about specific topics I’m interested in.

Lastly, I need to mention Twitter and the TweetDeck client. I’ve been a very late Twitter adopter as I didn’t “see” the use and thought it would be a waste of time. But now that I work on my own full time, I enjoy the connection to the people I follow. Like FeedDemon, TweetDeck enables me to separate my Twitter “stream” into groups. But furthermore, it enables me to keep watch on particular topics in the “public stream” by letting me add colomns based on specific keyword searches. It took me a long time to get on Twitter but now, TweetDeck is always running on my laptop while I work on my main machine.

Well that’s it for me at this time. What are your own preferred tools that you just cannot live without?

6 thoughts on “My Top 10 Web Design Tools”

  1. Unless I missed it, I did not see SnagIt on your list. I could not get through a day without SnagIt. I use it for everything, including as a substitute for ‘Print Preview’. I capture long web pages with the scrolling capture, go through them to eliminate the junk and/or anything which uses large amounts of ink, use the ‘cut out’ feature to remove long sections of no use to me, then print. I use it to keep track of all client information in GoDaddy, for instance, so that everything fits neatly into my web client notebook. I capture interesting pages I want to look at later with URL and part of the design. I send images with it. It’s absolutely basic to my daily workflow.

    Reply
  2. I’m a newbie in web designing world and this list is like digging my long-lost questions like which tools I should use to create a good design besides Fireworks. (FYI, I really love using Fireworks. I was 18 when I started using this and still in love until today.) Your website are also so great and simple but has a very awesome layout and colors. I wonder, what is the purpose we use ColdFusion in designing a web? Thank you.

    Reply
  3. Hi Fansi,

    ColdFusion is a server-side programming environment like PHP, ASP or Ruby On Rails. It’s used to interact with databases and much more. For me it’s been a great enabler and has made my server-side development work a lot easier and enjoyable as I much prefer the strategy, design and front-end work.

    Thanks for your kind words about my site!

    Reply

Leave a comment