Web design tools

Here is a run down of the tools that make up my web design process. Hopefully it goes without saying that scribbling on paper happens a lot too. I use an iMac, iPad and iPhone, so some of the following will be iOS/OSX only.

iA Writer

iA Writer is my text editor of choice. Most projects start here and it’s especially suited to long-form writing. The stripped back interface and large type make it easy to use. It supports Markdown, so I get just enough formatting options, without the distraction of a fully blown word processor. Markdown is a great way to write basic html too.

Alternatives

  • I use Apple’s Notes app a lot for when I want to scribble something down quickly. I rely on the fact that it gets synced with all my devices.
  • Editorially is a great web based alternative to iA Writer. Currently still in beta, it has some really neat features such as versioning and multiple editors.

Divvy

Divvy is little menu bar application that allows you to quickly snap your application windows to a grid. I like to have my applications fill the screen neatly, and if you have 2 or more apps open together at the same time, Divvy can help you to line everything up nicely. I’ve customised my Divvy grid to have 6 columns and just 1 row.

Dropbox

I use Dropbox for all sorts of things. It’s a quick and dirty way to share websites in development, and a good place to stick images temporarily when you want to test them out on a live site (stick them in your public folder, then use web inspector to pull them in).

I also use it a lot when design checking sites. First I’ll run through a site on my iPhone and iPad taking screenshots as I go. Then when I plug my device into the computer, all the screenshots get downloaded, ready for annotation.

Alfred

Alfred is another little menu bar app that lets you launch apps by typing their name. When you get used to it, it’s much quicker than clicking on the dock or even using Spotlight search. I’m only just scratching the surface with Alfred and there are loads of ways you can use it to be more productive.

The calculator is especially handy, just type your sum and press enter to copy the result to your clipboard. Perfect for handling those pesky responsive web design numbers that have a hundred decimal places.

Illustrator

At James Good we use Adobe Illustrator to mock-up our website designs and create assets. It has some nice features that suit a modern web design work flow, like multiple pages (shown side-by-side in one document), global colour swatches and text styles. Plus it is resolution independent, just like the web.

Alternatives

  • Photoshop, despite coming under some criticism recently (see The Post-PSD Era and Photoshop you are a liar) is receiving some nice updates, such as better text rendering and an asset generation tool.
  • Sketch is fast gaining a reputation as a lightweight and affordable alternative to Adobe’s big fatties, although I haven’t had a chance to really play with it yet.

LiveView

LiveView is a free app that you run on OSX and iOS simultaneously. It mirrors a portion of you Mac’s screen in realtime to your iPhone screen, so you can quickly preview how your design will look. In my experience, seeing a design on your phone feels completely different to seeing it mocked up on a desktop computer.

ImageOptim

ImageOptim compresses images for the web much better than Illustrator or Photoshop can. Simply drag and drop a load of files onto the app and it will churn through them, automatically saving over the originals, and giving you a report on how many KBs have been saved. This is a no-brainer really, I always run my images through this before uploading.

ImageAlpha

ImageAlpha allows you to create 8bit PNGs with 24bit alpha transparencies. 24bit PNGs with alpha are probably the heaviest image type on the web, so it’s worth trying to crunch them down a bit. Depending on the image, I have found that ImageAlpha can give huge savings in file weight. Watch out for images with subtle gradients and shadows though as it can cause banding. Use with care.

Chrome Developer Tools

I use developer tools to try out HTML and CSS changes on the fly, before feeding back to the developers. It’s perfect for adjusting things like typography and animation, as well as trying out new content in place.

I learnt recently that you should dock your inspector to the right, so you can adjust the width of the viewport quickly when testing responsive designs. (Remember kids: nothing beats testing on real devices.)

It’s also possible to use Developer Tools on Safari on your iOS device (via a Mac), and it’s pretty simple to setup.

Alternatives / Extras

Ghostlab

Ghostlab lets you test websites on multiple devices at the same time. If you update the HTML or CSS, all devices will refresh to show your changes. If you scroll down or visit a different page, each device will stay in sync too. Definitely worth purchasing in my opinion.

Trello

I’ve found Trello is a great tool for design checking and bug tracking, and we use it at James Good to keep on top of big web projects. It’s especially useful when a team is spread out and managing a wall of post-its becomes unwieldy.

Honourable Mentions

Although not strictly part of my web design workflow, these apps help me stay organised and/or up to date with what’s going on in the world.