Matt Haff’s Web Design Toolkit
Different software that I use, my preferred coding environments and third party apps that make life easier. I call this my “A List” of programs that every web designer should have.
Dreamweaver
Need I say more? Adobe just does stuff right when it comes to software, they always have and always will. Dreamweaver is the perfect environment for hand coding sites from scratch or just managing the content in the WYSIWYG editor. I get to pick and choose how I want to work, the WYSIWYG is great for editing stuff like content and images so you don’t have to spend time looking through all your code for that one typo. In Dreamweaver CS4 they did some major updates to make the WYSIWYG view even more realistic to what actually shows in the browsers. It doesn’t stop there, when it comes to developing, I build the entire site in the Code View and don’t switch over until I get ready to insert the copy onto the site.
There is other software out there that provides just the coding environment and they are okay, they just don’t offer all the features that Dreamweaver does. FrontPage however is absolute junk and I would never recommend that to anyone. Microsoft likes to inject a lot of their own meaningless code into websites that are built using FrontPage. They were out of the game for a while and just came out with a new FrontPage. I haven’t had a chance to look at it in depth however I still wouldn’t suggest that another developer give it a shot.
Photoshop
Photoshop is another awesome Adobe software and if you do anything with web or graphics then this needs to be in your A List of programs. It has been around for years and now offers the ability to do 3D design work, great for logos and those out of the box websites. You’ll notice some of the 3D work on our website Minds Eye Design.
So as a web designer, how do I use Photoshop? For me personally I use Photoshop to do all the design work of the website, header graphics, logo design, buttons, page layout, etc. Once I have a finished look I send it off to get approval from the client. It’s always easier to edit a .PSD than it is to change the layout and design of a site when it’s built out. I never build out even a rough draft of the site until I get approval of the design. Always keep your file layered so that you easily manoeuvre, remove, add new pieces to the design. Once I’m ready to start building I slice up the .PSD to be different sections of the website and I deal with those graphics individually.
Basecamp
It doesn’t matter how many clients you have, you must use some form of project management. Basecamp is an online based project management tool that grows with you. Think of how helpful it would be if you had one go-to place with document collaboration, to-do lists, milestones, file storage, etc. Not to mention creating a login for your client to login and give feedback on designs, write the content for their site, upload graphics and logos, along with seeing deadlines that you posted for their project. If you’re saying to yourself, “that it would be awesome” then you need to get Basecamp, because they do all that and more.
Freshbooks
Since I found Freshbooks a few years ago not a day has gone by that I haven’t used it. I’m able to manage my clients and all of their login information. I have the ability to put together proposals and notify my clients via email when they are able to login and view them. I can send out one-time or recurring invoices, even auto-bill through my Authorize.net account. For my clients that aren’t very tech-savvy Freshbooks can send them a statement in the mail with a pre-addressed return envelope.
My clients can login and create support tickets which will automatically notify me or another staff member that is responsible for that item. I never loose track of where I spend my time thanks to the timer that helps me to log time spent on projects. I can also create staff & contractor logins for them to track their time as well. Clients can also login and see how their project is coming along by viewing how many hours have been tracked to specific tasks on the project.
Of course you got to have some way to manage all your expenses paying for domain names, hosting, and contractors so Freshbooks gives you an area to manage all of your expenses. Freshbooks will even give you a report at the end of the year to hand over to your CPA.
MailChimp
MailChimp
I’ve used a lot of email marketing applications such as ConstantContact, Benchmark, Campaigner Pro and none of them have even come close to touching the usability and functionality of MailChimp. They are the most affordable, have great analytics and the ease of use is mind blowing. They also just brought their new supercomputer, Omnivore, online. Omnivore is a powerful abuse detection technology that helps keep their clients free of Blacklisting. They were actually one of the first email marketing platforms ever made, however at the time there wasn’t a big demand so they kept it for in-house marketing. They launched MailChimp to the public a few years ago and since then have become one of the best Email Marketing companies around. Check out how they compare to iContact and ConstantContact.
WordPress
I’m hoping that you’ve heard of WordPress if you’re reading this. Most people think of WordPress as a blogging platform but really it is a CMS platform. It just so happens that WordPress is so easy to use that just about anybody can run a website. It’s one of the more popular platforms for bloggers since most of them don’t know a lot of HTML/CSS. It has been underestimated by web developers as a CMS for websites, although it has been picking up a lot of steam in the past year. I proudly use WordPress as my one and only CMS platform for clients.
There are ofcourse other blogging platforms that are pretty good such as Blogger and Typepad. I personally don’t care for Typepad simply because you have to pay for it. I understand they want to make money but at a minimum of $9/month I don’t see why you wouldn’t just do a Blogger site. Blogger however is a little annoying because of the shameless advertisements and that you don’t have the flexibility as you do with WordPress. Now it’s important that you understand there are two genres of WordPress, one is WordPress.com which is hosted online and you can get a free account however that is the same as a Blogger account. Everything I’m talking about is WordPress.org which is a free download that you can install on your own server and customize as much as you want. If you’re not going to host it yourself then it’s really a toss up between Blogger and WordPress.com
Wufoo
Last but definitely not least is Wufoo, an online HTML Form Builder. Wufoo changed the way that I do HTML forms. Now instead of it taking me almost an hour to create and setup a custom form I can have it done in under five minutes. Wufoo also creates a database for every form that you create where it saves form entries. If you’re a freelancer then you need to have Wufoo on your A List, they can save you time and they are very affordable. You can even use them for to create a paid event registration form able to accept all major credit cards via an Authorize.net account. Wufoo forms can even send instant notifications to your cell phone, which comes in handy when you want to keep up with new client consultation requests.
What’s on your A List?
What are some programs or third-party apps that are on your A List? Have you had the pleasure of working with any of the programs I listed above? I’m interested to hear how you use them.

Comments
Great stuff Matt, especially wufoo. One tool I’ve been creating is to help web designers better engage their online audience, check it out: research, tools and services to help designers engage their target market
Thanks Tom! Wufoo has saved me a huge amount of time and money by being able to quickly make a custom form with all of the built in functionalities. That’s a pretty good resource you’ve got there, looks like a lot of time well spent.
[...] had the honor of writing this article in complete detail at ScrunchUp.com, if you wanna get the rest of this go check out the full article. If you like what you read, [...]
Twitter: @Jack_Franklin
Sorry, but whilst Dw is the industry standard, for students it’s incredibly difficult to afford. If you are on a tighter budget, might I suggest:
Windows:
Notepad++
Aptana
Komodo
(all free)
Mac:
Coda ($60)
Textmate ($60)
Aptana (free)
Espresso ($50)
Komodo (free)
BBEdit
Textwrangler (free)
Jack,
First off, I appreciate the feedback and let me start by saying that this is my toolkit and it’s what works best for me. I stopped searching for web development apps once I began using Dreamweaver 8 and I personally think that Dreamweaver CS4 is worth the $399.
While I haven’t used all of the programs that you mentioned I have used some of them and they didn’t even come close to the capabilities and functionalities of Dreamweaver. If on a tighter budget then these might actually be worth looking into: Aptana, Coda, Textmate, Espresso, BBEdit
On the other hand don’t fool yourself into thinking these programs will get you by:
Notepad++ – Maybe if you wanna design a site like this: http://notepad-plus.sourceforge.net
Komodo – Actually it’s only free for 21 days then you have to pay $145
Textwrangler – not built for developing websites, only for editing an existing file.
Twitter: @garethpoole
Coda + Espresso > DW on the mac!
Twitter: @rmccue
Matt Haff:
There’s no reason why Notepad++ can’t be used to make the same sorts of sites that you can do in Dreamweaver. http://notepad-plus.sourceforge.net/ is not an indication of Notepad++’s ability, but rather the guy who made the site (he’s a C++ programmer, not a web designer).
@Ryan
I just find it ironic that a site for such an awesome tool would look like that. You could probably manage to build a good website with Notepad++ however I didn’t see anything in there that would help with managing multiple website projects? Please correct me if I’m wrong, but one of the things that helps separate Dreamweaver is that you can easily manage hundred’s of sites with it.
Twitter: @officialstudio
Interesting and informative.
Twitter: @alirobe
Actualy, Komodo Edit is 100% free. Komodo IDE costs money.
Twitter: @mrnordstrom
Rare to see someone “pitching” Dreamweaver these days, I’m a TextMate user myself and haven’t touched Dw for many years. But enough has been said about that already, I’ll leave it before we get a flame war started.
The issue keeps popping up everywhere — Photoshop in web design. It’s an issue because it’s a photo editing software, not meant for “web design”, yet so many of those who call themselves web designers use it as their universal tool for everything they believe is design. It’s all about “slicing PSDs”.
Illustrator is a vector graphics app and would do a better job at designing graphics for websites. Fireworks can put it together to a prototype. Let’s leave Photoshop for our photos.
@Daniel
I’ve been using Dreamweaver for a long time and haven’t seen a need to change yet. Let me clear something up about Photoshop… Adobe’s software does so much stuff that trying to spread yourself thin by learning more than a couple leads you to only be average in them. I’ve been working in Photoshop for 10 years so that’s what I continue to use. I haven’t found myself in a situation where Photoshop wasn’t able to do what I needed it to.
On a side note, my business partner who does all the graphic design uses Illustrator, because that’s what he’s been using for years.
Leave your comment