5 Web Design and Development Tools I Simply Can’t Live Without (and Why)

In recent years, there has been an increasing need for scholars (in some domains in particular) to be at least passingly familiar with the principles and processes of web design and development. You might be building a course website, building (or hacking) a CMS tempate (for a platform such as WordPress or Drupal), deploying a project website, or just being able to know enough to hire the right web developer or designer your project. Web design and development is a big part of my scholarly life (teaching, research, outreach—you name it, web design and development has always played an important role). As such, I’ve accumulated a set of indispensible tools that I use for my own web design and development needs. And what better thing for the next installement of my “5 Things” series than to share these tools.

As always, some caveats. These are tools that I find indispensible for web design and development. Lots of other people will have their own favorite tools, and that’s cool. Also, I’m a Mac user, so these are mainly Mac tools and applications (though, I will mention some Windows alternatives here and there). With the regular slate of caveats out of the way, let’s get to the list!

Coda

Anyone who does any web design & development needs an editor of some sort—an application that can write (and manage) code and markup (HTML, xHTML, XML, PHP, JavaScript, etc.). There are lots of these editors on the market. They range from completely bare bones text editors to the fully featured development environments. Back in the day, Macromedia (now Adobe) Dreamweaver was my HTML editor of choice. It was fully featured and efficient. However, as new versions of Dreamweaver were released, it became bloated. More and more features were added that I simply didn’t need or use, and the program became pretty top heavy. The result was that I started looking for a new HTML editor. What I found was Coda. Developed by Panic, Coda is a “one window” web development environment—which basically means that Coda contains a series of features for design, coding, testing, and reference that would normally be spread out across several applications.

Coda’s editor is elegant and quite powerful (and allows real time collaborating using the Subetha Engine). In addition, it has a light version of Transmit (Panic’s awesome FTP client, which I’ll actually talk about next) built right in. You’ll also find an SVN client and a terminal under the hood. Coda’s price is also pretty decent. A license will only set you back $99. The bottom line is that I would be completely lost without Coda.

Alternatives: Even though, Coda is my go-to tool, I’ve used MacroMate’s TextMate in the past, and like it quite a bit. It’s a really powerful code editor with all sorts of helpful great features. TextMate comes in pretty cheap at $50/license. If you are looking for something free, I would suggest giving TextWrangler from Bare Bones Software a try. As text/code editor it gets the job done admirably. And best of all, its free. On the Windows side of things, I would suggest Notepad ++.

Transmit

An FTP client is vital for any web design and development. For me, that client is Transmit. Developed by Panic (the same people who make Coda), Transmit does absolutely everything (and more) that you’d expect from an FTP client. FTP, SFTP, Amazon S3, WebDAV, SSH—you name it. It’s also got a bevy of cool features that make file transferring a little easier (my favorite is the ability to mount servers as volumes in the Finder itself, even if Transmit isn’t running). Transmit is also fast—much faster than you would expect an FTP client to be. However, for me, the real allure of Transmit (beyond the fact that it does everything that I need from an FTP client) is its design. It is amazingly elegant application with great user interface design. The other good thing about Transmit is that its got a fairly light price tag—only $34.

Kuler

Color is the unsung hero of web design. Seriously, a good color palette can draw your audience into your site and give them a powerful feeling of immersion, and (best of all) keep them coming back to your site (which is one of the points of good design, isn’t it?). When it comes to tools to help you not only build color palettes based on color schemes, but also translate colors into usable hexadecimal codes, there is nothing better than Kuler. While there are other solutions out there (ColorSchemer Studio comes to mind—which is both Mac and PC), I simply love Kuler. It is hands down my one stop shopping spot for all of my color palette developing needs. One of the cool things about Kuler is that its not only a tool for building your own color palettes (and getting the hexadecimal values of those palettes), but it has social features that let users browse and rate other people’s palettes. The other great thing about Kuler is that is completely online and completely free. The only real “cost” is that you will need an Adobe ID (which is free) in order to take advantage of Kuler’s more advanced features (especially the social stuff).

MAMP

If you are working with server side code (specifically PHP), testing is always a challenge. Why? Well, to test it, you actually need a server that is running the programs and libraries you are working with (because the server side code gets executed on the server itself). What if you don’t have direct access to a server? This is where MAMP comes in. MAMP (which is an acronym for Mac Apache MySQL PHP) is essentially a PHP testing environment. Strickly speaking, MAMP isn’t a single application. Its actually a complete server environment that is installed locally right on your machine in a matter of seconds with a single click of a button. It’s got everything you need: Apache 2.0, PHP 5, MySQL 5, phpMyAdmin 3, SQLiteManager 1, as well as a host of other applications and libraries. I absolutely love MAMP, and use it for testing any PHP-based web application or website (WordPress, Mediawiki, you name it). I don’t have to configure any files—

Alternative: As the name suggests, MAMP is for Macs. Is there a Windows alternative? Absolutely. It’s called WAMP (well, WAMP is the generic name; WAMPServer is the name of the collected applications package). It does the exact same thing as MAMP, just for a Windows machine.

Notebook

The last tool on my list is decidedly non-digital: a notebook (a moleskin to be specific). I very much adhere to the philosophy of doing all initial interface design on paper. These storyboards (a term swiped from the film industry) give me a chance, among other things, to see how colors interact with one another, how interface elements play off one another, how my navigational system is realized, how my visual metaphor plays out, and whether content is represented in the best way possible. Storyboards provide me with a painless way of catching any potential design problems before I get to the stage where I build my design in HTML and they become major obstacles. Storyboards are also a great way to play with design ideas and visually brainstorm. For me, this storyboarding takes place in my moleskin.

Ok, now its time for you to share. What are your indispensable web design and development tools?

[Image by Flickr user Dmitry Baranovskiy / Creative Commons licensed]