Matt Haff’s Web Design Toolkit

By Matt Haff

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 logo

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 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 logo

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 logo

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 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 logo

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 logo

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 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 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


Wufoo logo

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 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.

Matt Haff

Matt Haff’s Web Design Toolkit

Matt is a husband, web designer, drummer, bass player, paintballer, Eagle Scout, dreamer, sushi eating, anime fanatic, movie watching, music loving, geek.

Matt is a Web Application Developer at 12Stone Church, Owner/Lead Developer at Minds Eye Web Design, and is part of many other startups. Matt has a blog at