My Web Design Workflow


So much has changed in the way we code websites over the last decade. Whenever I make personal progress or update my techniques, I look at how I should update my workflow – ensuring my efficiency as a web designer.

Why Is Workflow so Important?

Personally I struggle to see how it could be anything but. However, I have met and worked with people who seem to see differently. Perhaps it’s not so plain as I imagine. Where work is concerned, time is money. That’s what you charge your clients for, so you need to be efficient. The more time you waste the more frustrated your clients will be. Both with your prices and how long projects take to complete. Good workflow is all about streamlining your processes and saving you time. Therefore, saving your clients money, winning you repeat business and so on.

My Workflow

Here is a taste of my workflow, for both the tedious admin part of my work as well my development processes.

Administration

  1. When Enquiry Received, Add Lead to Capsule.
  2. Communicate Terms and Requirements.
  3. Send Proposal.
  4. When Approved, Draw up Contract.
  5. When Signed by both parties, Convert Lead to Client.
  6. Export to Freshbooks.
  7. Send Invoice with Terms.
  8. When Initial Payment Received, Setup Trello Project.
  9. Invite Client to Project.
  10. Add Deadlines to Capsule.
  11. Begin Work.

Project Management

An example of my processes during a typical design job for a WordPress based website.

  1. Add Client folder for material and designs to Dropbox.
  2. Add private site to Sitedrop.
  3. Share Dropbox Folder and link with Client.
  4. Work on Designs until Client Approval Received by Email.
  5. Save Communications in Capsule.
  6. Create new Git repository using YeoPress.
  7. Commit Default Files.
  8. Add Remote Master for Secure Backups.
  9. Push Files to Backup Server.
  10. Begin work on Theme using Local Server.
  11. Write Content in Google Drive with StackEdit.
  12. Email files for Feedback/Approval.
  13. Save Communications in Capsule.
  14. Add Content to WordPress Installation.
  15. Test Responsive Design using Dimensions.
  16. Test again on Tablet, Phone and Laptop.
  17. Test Cross Browser Compatibility by viewing all parts of the site in Chrome, Safari, Firefox, Opera and multiple versions of Internet Explorer.
  18. Demo site to Client for Feedback/Approval.
  19. Save Communications in Capsule.
  20. Request Final Payment via FreshBooks.
  21. When Paid Notification Received, Publish Completed Project.

Tools I Use in My Workflow

These are some of the tools I use which save me time, helping to keep my workflow efficient and effective.

Capsule

Capsule

A great CRM. I chose Capsule because of the way it integrates perfectly with Google Apps and FreshBooks.

capsulecrm.com

Docracy

Docracy

Very useful contract signing resource.

www.docracy.com

Google Apps

Google Apps

Brilliant for emails anywhere which sync perfectly with Capsule. Drive is also very helpful for sharing proposals and creating content documents.

www.google.com/enterprise/apps/business

Dropbox

Dropbox

A great way to safely store and share client supplied files and designs. I have loads of space on dropbox and it’s all completely free.

www.dropbox.com 

Sitedrop

Sitedrop

This is something I am just trying out now, but so far I’m pretty impressed. Basically it syncs with folders from your Dropbox account and gives them a visual interface so you and your clients can track progress, comment and like items as you go along.

www.sitedrop.com

Mailchimp

MailChimp

An absolutely fantastic email marketing tool. Beautiful user interface and excellent stats on sent and opened mail etc. MailChimp even provides advanced options for automating your service emails too.

www.mailchimp.com

FreshBooks

FreshBooks

Excellent modern accounting tool. I can access my details anywhere, send branded estimates or invoices from my phone and track time on the fly.

www.freshbooks.com

Paper and Pens

Paper and Pens

A staple tool of the trade. Sometimes nothing beats scribbling on paper. I like plain paper and a mixture of pens. Fat pens are great for the ideas stages as they stop sketches becoming over-complicated. However fast I type, I still find note taking during meetings is more efficient with a pen.

Trello

Trello

This is a brilliant project management tool. Beautifully simple list making and task management with great collaboration features.

www.trello.com

Zsh

Zsh

An alternative to bash. I found Oh-My-Zsh on github and haven’t looked back. A great feature is being able to see repository information in your prompt. It’s very customisable and a pleasure to use.

github.com/robbyrussell/oh-my-zsh

Git

Git

Awesome version control software. I have also used Subversion, but I much prefer Git. So much more control.

git-scm.com github.com

Grunt

Grunt

I still haven’t used this to it’s full potential and already I’m super impressed. Grunt is a JavaScript task runner. The main thing I have used it for so far is for creating custom Compass tasks that can watch my parent and child WordPress themes. So, I can have SCSS files from the parent compiled into the child theme instead of using a basic @import and making more requests on the server. I’m looking forward to finding out what else Grunt can do.

gruntjs.com

Bower

Bower

Foundation 5 uses this package manager and it really is an excellent way to manage your projects script dependencies. You can easily keep all your scripts up to date and it’s very simple to get to grips with.

bower.io

Yeoman

Yeoman

Very useful scaffolding tool for modern web apps. I have only scratched the surface with how much time this tool can save. Works great with Grunt, Bower and Npm.

yeoman.io

YeoPress

YeoPress

This is a WordPress generator for Yeoman. So, I can run this command: yo wordpress. I answer a bunch of quick setup questions (or use a config template) and instantly have a perfect local install of WordPress with all my favourite plugins and themes already installed. Thank you Wesley!

github.com/wesleytodd/YeoPress

Foundation

Foundation

ZURB’s Foundation is a brilliant responsive framework for any front-end dev. Comes with an excellent grid, a wide variety of components and some really useful scripts. I love using Foundation with SASS and Compass.

foundation.zurb.com

Compass

Compass

Compass takes care of all my CSS authoring. It’s a brilliant tool that comes with loads of useful mixins. Using SASS/SCSS with Compass is a massive time saver and really improves consistency in your CSS.

compass-style.org

StackEdit

StackEdit

Great Markdown editor which I use as a Google Drive App too. Markdown is fantastic for writing and formatting content quickly. StackEdit gives you a platform to write and publish from so you can manage your gists, blog posts or just share the files directly from Google Drive.

stackedit.io

Dimensions

Dimensions

Very useful Chrome App for testing out how your site looks on a variety of popular mobile devices.

www.dimensionstoolkit.com

VMWare

VMWare

For the dreaded Windows testing. I have snapshots of my Windows installation, each taken with a different version of Internet Explorer installed. This way I can test everything from IE7 up to the current release. I could go further back, but I don’t really want/need to.

www.vmware.com/uk

 

Find Out What Works Best For You

Everyone works in a different way. Hopefully I’ve made some useful suggestions and given you some food for thought, so you can find out what works best for you.