The Professional Web Designer’s Toolkit

When I launched Strategy6 in Fall 2008, my toolkit consisted of “borrowed” web design software, an old laptop, and a copy of QuickBooks I used when I was in real estate. Six years, hundreds of clients, and a few employees later, my toolkit has expanded. This blog post covers several software tools and services that we use in our day-to-day operations at Strategy6. Most of the comments are my own. In some cases, they were written by the people who have more experience with the tools: my employees who use them every day. DK denotes a comment by Design Lead Drew Key, DS denotes comments by Web Specialist David Senn.

Enjoy!

Design Tools

Adobe Creative Cloud Design Suite – We primarily use Photoshop, Illustrator, and Bridge. When doing a custom site, our design lead uses Photoshop to layout the design. Once complete, we then share the proposed design with the client who almost always wants to make revisions. Since the design is in Photoshop, and not yet coded, it is much easier to make changes rather than after it has been coded.

FontFace Ninja – (DK) I became impressed with this browser plugin after reading a review. FontFace Ninja makes it easy to explore typographical trends and view online examples. I especially love the popup-hide animation that appears with information about the text your mouse is hovering over. Currently, the plugin denotes the font face, font size and line spacing. More features are rumored to be on the way. FontFace Ninja is by far the best plugin I use on a regular basis and is a must have for web developers.

Google Fonts – When I launched Strategy6, the web was limited to a very small number of fonts. But Americans don’t like being limited and Google Fonts provides an easy way to move beyond basic font usage. Almost all of our websites today rely on at least one Google Font.

Balsamiq – I use this every now and then to create quick sketches of complex layouts that I am thinking of using for particular projects. I can hand Balsamiq sketches to our designer who then takes the design duties from there.

IconMonstr.com – (DK) When I design for desktop and mobile device interfaces, I find myself constantly looking for good, clear, and clean icons. In the past, I cobbled together my own personal icons sets. Now, I almost exclusively use Iconmonstr.com. Once I find the perfect icon, it’s easily downloaded as either a PNG or Vector SVG file. Did I mention it was free?

Pencil and Drawing Pad – (DK) I have found that it sometimes helps to step away from the computer screen and sit down with good old-fashioned pencil and paper to sketch out ideas. Whether it’s mapping out a website’s structure or doing a roughly sketched design, this method shines. I also carry a Field Notes memo book in my back pocket for those “lightbulb” moments that tend to pop up.

Coding & File Transfer

Sublime Text 2 – All Strategy6 employees utilize Sublime Text 2 for coding HTML and PHP. I actually mandate its usage in our company. When interviewing potential employees, I always ask, “What tool do you use to code HTML & PHP?” If someone answers Dreamweaver a red flag goes up.

FileZilla – There are sexier FTP programs out there. I use FileZilla because it is free and I’m familiar with it.

Transmit – (DK) With the integration between Transmit FTP and Sublime Text 2 code editing, there is one less step in the process of editing code. Simply save the file and it is automagically uploaded to the web server. As a designer and Macintosh computer loyalist, Transmit for me is the best of both worlds by having a clean and user friendly interface along with all the functionality and feel of native mac software.

Collaboration

Basecamp – Basecamp is the tool I use to run my business. From Basecamp, I can assign tasks, check progress, share files, and write down important notes about projects under way. With anywhere from 25 – 35 active projects at any given time, Basecamp is the only reason things don’t get forgotten about. One of my favorite things about Basecamp is that I am notified once a task is completed. This allows me to go back and review the work to make sure it was performed satisfactorily. This method has reduced our errors and omissions considerably. This is important because when I first began to scale my business, internal miscommunication cost my business a small number of clients.

Google Chat – (DS) Our team uses Google Chat multiple times a day to communicate with each other. This allows for quick and easy sharing of pieces of code or data, as well as the occasional funny picture, video, or joke.

Awesome Screenshot – (DK) The name says it all: awesome! On average, I take about 3 to 4 screen captures a day and have found this browser plugin the best when it comes to functionality and reliability. It’s also handy for quickly taking screenshots and annotating them when reviewing websites or creating how to instructions for clients. Awesome Screenshot is available for all the main web browsers and like most browser plugins, it is free.

GoToMeeting – This has saved us a lot of time. When clients have problems connecting to their email we can log into their computer with GoToMeeting and fix whatever issue they have. Sometimes clients also report issues on their website that we just don’t see on our end. This software allows us to see first-hand what they are seeing.

Time Tracking & Billing

QuickBooks Online – Quickbooks Online isn’t perfect, but for the business we are in, it is as close to perfect as I have found. Employees log the time they spend on each client’s task. These time entries are used to determine payroll. Some of our clients are charged on an hourly basis and some are charged per project. For hourly clients, the time entries are also used to build client invoices, which is sent automatically every month. Automated invoicing was a life-saver for my company. It used to take me 3 – 4 hours to invoice clients every month and that was back when my business was only about 1/4 of its current level.

Testing

BrowserStack – Strategy6 tests all of its websites using BrowserStack. BrowserStack is a clound-based virtual machine that can run just about any OS/Browser combination you can come up with. It can also pull up a virtual smartphone, allowing you to test how your site responds to desktop and mobile screens alike.

Responsive-Resize – (DK) There are so many computers, laptops, tablets and smartphones out in the wild today.  Because of this, this browser plugin is great to have when testing. This plugin is also free of charge.

Proposals & Quotes

Pages – Being a Mac user, I use Pages to composed proposals for all complex or big budget projects. My proposal formats have changes considerably over the years and I’ve finally found a format that I like. I may blog about it one day.

Quote Roller – I utilize this software for churning out quotes for all kinds of web design, SEO, and other digital marketing related work. Quote Roller is best for smaller projects that you just don’t want to invest hours into writing a high-quality proposal. Don’t get me wrong, Quote Roller is awesome software and can help you draft high-quality, interactive proposals, I just prefer to use Pages for those. For routine projects, the ability of Quote Roller to create reusable items allows us to generate quotes in minutes.