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.
About Matt Haff
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 http://www.churchandwebdesign.com
Tags
Related Stuff
No related posts.
Comments
Skip to comment formTom Shivers
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
matt.haff
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.
Web Designer Friendly Processes | Church & Web Design
[...] 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, [...]
Document Scanning Storage
Matt, why is your picture blurry? What makes me nervous about Mailchimp and all of the rest is that you don’t know if all of your emails are actually making it into the inbox of the recipients. Email marketing is a whole science in itself.
Jack F
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)
matt.haff
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.
Gareth Poole
Coda + Espresso > DW on the mac!
Ryan McCue
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).
matt.haff
@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.
Vincent
Interesting and informative.
Ali
Actualy, Komodo Edit is 100% free. Komodo IDE costs money.
Daniel Nordstrom
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.
matt.haff
@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.
Mark Mitchell
All of the tools with the exception of Dreamweaver are also my A-list. I have not used Dreamweaver for a few years but this is what I tell people when asked for my thoughts on the issue: Dreamweaver is probably the best tool when you are first learning. The WYSIWG/code highlighting features can really teach you a ton. As a pro however you need speed and efficiency. For me that tool is Coda (Mac only).
I would probably add Transmit (FTP), Media Temple and Typekit to the list (if it were mine).
Darcy Bross
The base install of Notepad++ is a bit lacking in features for web-work. If one is willing to do a bit of legwork and install web-dev friendly plugins (FTP manager, WebEdit, CSS2/3 libs, MooTools/Jquery libs) it becomes one of the best tools around. Have switched to it for all major coding duties. What I like best is the many languages it supports, we build sites with straight up HTML, .NET, PHP, Ruby and Python so the fact I know I get nice code colouring for any kind of file I stick in there is enough for me. A nice bonus is the built in compare tool and SVN support.
That being said, I can say that I sometimes miss all of the built-in functionality and multi-site management of Dreamweaver but that’s about it. The site-preview mode is a nice idea but was always very laggy, always found I relied of FF/Firebug combo anyways and still do.
Got to agree with you on the rest for sure. Would add Campaign Monitor (email marketing but they let you white-label it) and Syncplicity (for the collaboration) too.
Free graphics and templates
Many thanks for the terrific data listed within your blog, this is a little test for your website subscribers. Who actually stated the following quote? . . . .I am become death, the destroyer of worlds.
Frankie Toussiant
Good content really – so I was happy to read all your articles.
Leave a Reply