Jamie's Blog

Lessons from a life of startups, coding, countryside, and kids

It's all about the (creative) process

Its all about the creative process

How do you get from a design to actual code?

That was my big question last week and, if you’re primarily a developer, you might be wondering the same thing.

I hear a lot of web designers talking about working in Sketch or Photoshop, but I just couldn’t understand what the hell happens after they’ve finished.

“So the designer has drawn a very nice picture”, I thought, “what the hell am I supposed to do with it now?”

A long time ago, designers would layout each page in Photoshop and then slice up the layout into lots of separate images. These images would then be banged together into a HTML table to replicate the original layout. It was not the proudest period in web history.

But that’s all behind us now, isn’t it? We have CSS for styling elements and a robust series of techniques for getting things into the right place (mostly). We have no need for webpages-made-of-images. So, why do designers still design in Photoshop?

I couldn’t understand why we’d craft a detailed design in Photoshop if we couldn’t use that design by exporting it to html/css in some way1. Why were designers still stuck to this tool? What use was a designer who could only hand me a PSD file? If Sketch wasn’t going to output some html/css for the developers, why still use that tool? Why waste all the effort on a ‘pretty picture’, just to throw it away when you code for the browser?


I had a little rant on twitter and Shane was kind enough to offer to explain things over email. Among a lot of links and discussion (which I’m still processing), he mentioned Chris Coyier’s ‘A Modern Web Developers Workflow’ video and it clicked (about 10mins in).

Now I understand.

It’s not about the output, or the results, from Photoshop. It’s about the nature of the tool.

It’s about how that tool supports the creative process.

Designers use Sketch because it encourages experimentation; because it facilitates the creativity which the browser does not.

Now I get it. It’s not about generating code at all.

Even the best front-end developer can’t freely iterate over multiple designs and explore different solutions within the bounds of html/css.

They use Sketch during the initial stages as we explore alternate designs because it supports the process—the act of dreaming, creation, problem-solving, constraint-solving, and exploration—but we can stop once that creative thrashing has settled. We don’t need to get to a pixel perfect version in Sketch. A pixel-perfect design is not the desired result. The goal is to find the right design, and do just enough to communicate that (to others or ourselves). Once we’re into the refinement stage we can build & iterate in html/css.

This makes so much sense now!

As a developer, I do the same thing!

I’m primarily a developer. A “full-stack” developer, if that term doesn’t make you barf, but my visual design skills are confined to working with an existing theme or style. Tweaking this. Moving that. Changing the fonts. I rarely design from a completely blank slate so it’s important for me to understand this initial process.

Understanding the design process helps us work together. I understand now how I can use a PSD file. I understand that it’s not about a pixel-perfect design. I understand that it’s not the finish article. I understand that a PSD file is not just a sign of a lazy designer who doesn’t want to get their hands dirty in code!

It’s a necessity of the process.

And it’s one that I recognise because I do something similar.

When I writing some new code, I’ll often start by ‘sketching’ out the algorithm in pseudo-code. Or I’ll write out how I want to use that class. At that moment I’m not concerned with the detailed implementation. I’m just trying to mentally figure out the end result.

Or, when I’m designing a UI I’ll use Balsamic Mockups to play with the layout. However, because I’m working with an existing style, I’m only focused on the information presented, or how the user will interact with it, or which UI controls I’ll use. When I design, I’m purposefully ignoring the visual aspects like fonts, colours, styling etc because I already have a theme/framework to work from. Sketch fulfils the same role but for designers who are making those aesthetic decisions.

Of course, the clue was also in the name: ‘Sketch’ is for sketching, not final production.

  1. Actually, there are ways to do this but that’s not why designers use Photoshop