Tools of the Trade for Web Designers

Get quality hosting for as little as .95 per month with Bluehost.

One complaint I hear over and over again from designers is that no matter how hard they push through the day, there just never seems to be enough time to get through everything they’d expected to. I’ve heard it often enough that I’ve done some digging to identify the problem. Sure, we could all be a bunch of lazy lay-abouts, but I think we all know that’s not true. So what’s to blame for productivity that’s not quite up to snuff?

The best I can figure is that we’re all suffering from a condition that I’ve dubbed “Old Guard Syndrome.” That is, we’re stuck in a rut. We aren’t taking advantage of changing technologies as quickly as software and online tools are updating what they’re capable of doing for us. We need to adapt faster if we’re going to stay organized and become more efficient. Following are some online tools that can help you streamline your workload and make each minute of your day count for just a bit more.

Balsamiq

One of the surest ways to lose time on a project is to waste time on apps and ideas that you realize down the road aren’t necessary or even usable. In order to prevent that kind of time wastage, it’s important to have a good idea of the route you’re taking before you begin, which means you’ll need a prototype.

Balsamiq is an online tool that allows users to build a mockup of their website. It has an intuitive interface that lets users drag and drop elements in order to quickly create a digital “sketch” of their project. At the end, you’ll have a mockup of your project and a roadmap that highlights exactly the steps you’ll need to take in order to be successful with your project.

Napkee

A companion to Balsamiq, Napkee allows users to export their Balsamiq mockups to HTML/CSS/JS and Adobe Flex 3 in one easy step. Tthat functionality is missing from Balsamiq. When you make changes to your mockup, the changes will instantly be seen in your Napkee file, which means you don’t have to do any coding at all.

Moqups

Another great wireframe tool is Moqups. It’s a free HTML5 app that is intuitive, easy to use, and allows for prototypes that are easy to share. It offers the same drag and drop ease of Balsamiq. While it lacks some of the functionality of more complicated wireframe apps, its ease-of-use makes this a great option for anyone who only wants to spend a few minutes working on a mockup.

Espresso

When it’s time to move into coding, it’s important to streamline that experience as much as possible. That means, finding a text editor that suits your personal style of coding. A great option that is available for Mac users is Espresso. Overall, it’s simple, yet functional, software that doesn’t get bogged down in too many complex extras. Its CSS tools, ability to override live code on a site, and X-ray function which visualizes and inspects your layout make it a superb choice of editor for any designer who needs to hustle through a project and get it right the first time.

Coda

Another option for editing is Coda, which, like Espresso, has a fairly straightforward interface. Its built in snippets tool and syntax highlighting modes make it a great means for building up a library of code that you’ve written and might want to reuse on future projects. Coupled with Snippets, it’s an amazing way for any coder to quickly amass a toolkit of code.

iA Writer

As web designers, we not only have to know how to code and wireframe and all of that good technical stuff, we also need to have a handle on writing. It’s not always our favorite task, so a text editor that is simple and clean like iA Writer can be a better option than clunkier word processing software. In fact, the interface is so simple that you won’t be distracted from what’s important, your words on the page.

Xero

Finally, it’s imperative to handle the money end of things as efficiently as possible. After all, if you’re worried about whether or not you invoiced correctly, or spending half of your day trying to get your clients to pay you, you won’t be able to focus on your design projects to your full ability. Xero is accounting software the helps small businesses keep an eye on the financial side of the business. The online tools make it easy to manage your business from anywhere. Its intuitive interface means you won’t have to waste a lot of time learning a whole new set of software. In addition, they offer free resources such as a small business invoicing guide that will help you wrap your mind around some of the business aspects of being a web designer.

About the Author:

Rob Toledo loves CSS3, no longer supports IE7 or lower and still prefers Firefox over Chrome, despite pressures from his management to switch. He can be reached on Twitter @stentontoledo