Web Workflow

The word workflow suggests there is a magical checklist that will result in a perfect end product every time. Not so. Designing for the web – especially in the era of mobile – involves a lot of back-and-forth between design and dev.

Web workflow

People like to separate the two phases and make them separate entities by saying things like “when we’re done with design, we’ll start development.” That’s probably the most common way to approach things, but I try not to work that way. I like to finesse design all the way until the very last line of code is written. You never really know how well something will work until you have a working prototype. I’d hate to settle on a poor user experience simply because the design phase is over.

The truth is I do have a process – I just like to be as flexible as possible. It looks like this:

Hey, Client!

  • What are the goals / scope of this project?
  • Do you have engaging content? If not, let’s find a way to make it great.
  • Let’s map out how a user will access your content (wireframe or sitemap or just a simple sketch).
  • Here are a few design solutions based on your content and goals (I usually gather visual inspiration and do 2-3 homepage and subpage comps, typically in Adobe Illustrator).
  • Based on what we liked about the initial directions, here is one direction that takes into account your feedback (design comps of all pages).
  • Let’s start building this thing!
  • Done! Let’s test the site with some real people and improve anything that doesn’t contribute to an awesome experience.

Nothing groundbreaking, but that’s usually how I work.

Tools

If you’re just venturing into the web world for the first time, you’ve probably spent hours researching and demoing a bajillion tools that claim to make web dev totally painless. There are an overwhelming number of options ranging from from drag-and-drop solutions like Squarespace, to the behemoth Dreamweaver. For the sake of this post, I’m not going to talk about drag-and-drop solutions, but they’re a totally valid solution. They can help you make a really beautiful website without touching a line of code. However, if you want complete creative freedom, you’re gonna have to roll up your sleeves and learn some basic code.

Before I unveil my favorite web dev apps, I need to make one thing clear. Programs do not build websites, people do. No matter how snazzy your web dev app is, it isn’t going to do the work for you. And if it claims to, it isn’t going to do the work right. Instead of looking for a tool that claims to have magical design powers, look for a tool that will stay out of the way, increase your efficiency, and help you learn about what’s happening behind the scenes.

These are the tools I use on a regular basis:

Adobe Illustrator

Pixel perfect? Not really. Made for web design? Not specifically. But it lets me work extremely quickly and iterate without worrying about Photoshop layers or multiple device resolutions. The true beauty of Illustrator is in its limitations. It forces you to put content first. Always. When you’re not tempted by Photoshop’s layer styles and texture fill tool, amazing things happen. You start to realize that buttons can still be usable without a heavy drop shadow and that whitespace is your friend instead of enemy. It’s not for everyone, but I’d encourage everyone to give it a shot.

Adobe Photoshop

I use Photoshop almost exclusively for production purposes. Very rarely do I design in Photoshop. When I’m completely happy with my Illustrator comps, I’ll transfer key assets to individual PSDs for export to JPG or PNG. Anything vector is exported directly from Illustrator in SVG format. In theory, it probably sounds like a repetitive and inefficient method, but in practice it is actually extremely efficient. If you take a content-first approach to design, the majority of the site design can be replicated with CSS. The only raster images you’ll need to export will be the logo, content images, and maybe a few repeating backgrounds. If you venture into responsive web design, you’ll be happy you’re only dealing with media queries instead of five versions of the same Photoshop file at different resolutions. It’s the most future-proof way to go about it.

Sublime Text

Sublime Text is my go-to text editor. It’s fast, simple, and the code highlighting is great. I especially love how customizable it is. You can quickly create the dev environment of your dreams by editing a few simple lines in a JSON settings file.

MAMP

If you’re using any server-side code in your site, having a local server will save tons of uploading time and allow you to develop locally. MAMP is free and easy install and basically turns a folder on your computer into a web server. I also love the PRO version because it let’s you create virtual hosts… read more about that on their site.

Grids and Templates

There are tons of pre-made grids and frameworks out there that can significantly cut back on development time and keep your site organized. I’m not pro or anti-framework, but I do encourage you to think about your site’s goals before jumping into something like Foundation or Twitter Bootstrap. A framework is a tool, not a design solution.

Lately, I’ve been using Cory Simmons’ Lost Grid whenever I need a more robust grid framework. The grid uses PostCSS and calc() to create a super lightweight and customizable grid.

LESS / SASS

CSS preprocessors like LESS and SASS are super handy for larger web projects. They’re not really necessary for just a few pages, but are definitely something worth checking out if you find yourself repeating CSS code all the time. These are both relatively advanced things, so you might not want to mess with them unless you’ve got a solid understanding of CSS.

Autoprefixer

Autoprefixer has become a critical part of my workflow. It uses PostCSS to automatically add vendor prefixes to your CSS based on rules from caniuse.com. No more wondering if you still need -moz-border-radius or if border-radius is enough. Autoprefixer will check and modify your CSS based on the browser compatibility you specify.

Gulp

Gulp is a build system that automates time-consuming tasks in your development workflow. Things like CSS preprocessing, minification, linting, prefixing, and much more. It takes some time to get configured just right, but is well worth the investment over the life of a project.

Tada!

So there you have it. A few thoughts about process and dev tools. Keep in mind that what works for me might not work for you. Your mileage may vary.