I've seen a lot of interest recently in new design and development workflows, so I thought I'd also share the tools that I use to design and develop with. I'm constantly working on refining my workflow, so I'd love to hear any input you have to make thigns even smoother.

The Apps

I do all of my work on OS X, so this list will be tailored to that. Luckily, the first three apps are available cross-platorm, and are also the most important ones on the list.

1. Terminal - What else is there to say?

• Homebrew - Installing command line tools can get messy. Use Homebrew to easily install and manage most any tool, including...
• Git - Version control and backup for projects. Indispensable tool that will save you from losing your work, and makes it easier to collaborate with others with on same codebase.
• Node.js (and NPM) - Javascript in the backend. Aside from creating a full-fleged server, there are several packages that are really useful for frontend development and keeping dependencies in order (read on).
• Bower - Install and manage frontend dependencies for projects.
• LiveReload - Update CSS styles live in the browser. No hitting "reload" after every save. Can also auto-refresh for JS and HTML changes.
• Gulp - Task runner written in Javascript that ties everything together. I use it to generate static assets, compile and minify separate SASS/Coffeescript files into one CSS/JS file. You can pretty much have it do anythign you want. Similar to Grunt, but easier to understand if you know JS.

2. Sublime Text 3 - Fast text editor with lots of plugins
3. Firefox Developer Edition - I've always preferred Firefox's dev tools over Chrome/Safari/Firebug.
4. Sketch - Creating mockups and SVG graphics
5. Ember - Organizing screenshots and inspiration
6. xScope - Utility suite that come in handy every once in a while
7. Github for Mac - A GUI for the most common Git commands. Its important to know the command line commands, too, but it is also nice to have a visual way to browse your changes and history. Source Tree is really great, too, and allows you to use more advanced commands.

The Services

These are the SaaS platforms I use on a regular basis.

1. Github & Bitbucket - Storing your Git projects for remote access. Github is great for sharing open-source code and personal projects, and Bitbucket is great for client projects (free private projects, and cheaper upgrades).
2. Heroku - Easy server setup. Free servers are available for personal projects, although it gets expensive quickly when you want to pay (definitely worth the cost of managing your server on your own, though).
3. Codeship - Run tests in the cloud and automatically deploys to a server if everything looks good. I have it connected to Github so that every commit I make gets tested, then deployed right to Heroku. If I forgot to save a Bower dependency, or a Node package is incompatable with the version of Node running on the server, Codeship will alert me and not deploy the breaking bug.

The Process

To start, I don't like to spend too much time making pixel-perfect mockups. I'd much rather spend that time tweaking things in the browser, where I can also play with animations and other interaction effects. That said, I always start with paper and pencil.

1. Paper & pencil blocking
   Nothing is faster than making rough sketches on paper. Here I get the basic layout down, and figure out the major block-level elements I'm going to need on a page (where your main content will go, how the ads may fit in, what parts will collapse for the mobile view, etc.).
2. Moodboard & Design Details
   Next thing I do is start to sketch out in more detail individual elements and start to detail the layout. Usually this is just for my own reference later on, but sometimes I'll share this with a client. I've found that seeing disembodied buttons and paragraphs occasionally confuse clients ("This looks broken. Why are there tabs here?").
   I mostly use Sketch for this stage, since I can combine images for inspiration, and any elements that I do make I can usually reproduce in plain CSS (Sketch also allows you to export styles to CSS, which is a huge plus). Once I feel like I've created enough elements and developed the general feel for the project, I'll move to the browser.
3. Designing in the browser
   I'll talk more about this setup in the next section, but after making a few colored mockups and getting the basic structure of the site down, I move into the browser and start coding things up. I start rough, and get the major views laid out before adding any color or detail. LiveReload and Gulp make this a lot easier than you might think (and if you aren't comfortable with the command line, check out Espresso by MacRabbit for live reloading and other design goodies).