Maybe I’m late to the party but designing websites in a static fashion in something like Photoshop (or even Sketch) isn’t working anymore.

I’ve known this for quite a while

Yes, I’ve known for a long time that the process is fundamentally flawed. I’m a big fan of Photoshop and it is where I feel my most creative.

The Process I’ve used since forever.

My design process was very simple. Firstly, once all of the discussions, specification and sometimes wireframes are out of the way I’ll sit down with Photoshop with a blank canvas and start designing. Once I come up with a general idea of colour palettes, typographic hierarchy, spacing and imagery I will start putting together the most important part of the design. If it is a large project then this is usually the homepage, if it is a small project I will sometimes send a whole set of designs. Once the initial designs are done, I’ll send a static version to the client for approval.

I’ll go through up to two rounds of amendments with the client and send a final version of the homepage. Once they are happy with that I’ll then go back to Photoshop and design all of the other “templates”. I don’t design every single page as many pages can share a template, but even still this can be up to 15 distinctly different templates for a medium sized website or 50+ for a detailed web or mobile application. I’ll typically pick the most complex page and provide a responsive mobile and tablet version as well.

At this stage, everything is in Photoshop. Nothing has been coded.

I’ll then send over the full set of designs to the client, again there are 2 rounds of amendments. When they are done I send the final version for approval.

Then and only then, I start coding it.

What is wrong with this process?

Nothing but also everything. If I get the design right the first time, I’ve done the work once. If the design requires a rework or some typographic, padding, colour, global elements (header and footer) tweaks then all of a sudden we’re talking about a lot of manual work to make the amendments. Yes I’ve tried libraries in Photoshop. I’ve tried Illustrator and Sketch, but nothing is quicker than it would be to change a pixel or hex colour value in CSS or swap some HTML around.

Why do I keep doing this, again and again?

Because I’m scared or stupid, I’m not sure which – it may well be both!

Firstly, I’m not a fan of terms like “coding in the browser”, it sounds pretentious and also (possibly wrongly) that the design hasn’t been considered properly. I feel that Photoshop gives me this separation, to perfectly consider a design, without worrying about the code.

Secondly, throwing away code I’ve written seems like time wasted. When I code something it feels final, like a next actual step, I don’t want to waste time coding something that goes in the bin if the client doesn’t like it or requires a raft of changes. When I code, I go the extra mile to make it accessible, maintainable, logical, semantic and often refactor as I go to make sure code can be modular or generically used in more situations, I future proof it as much as I can.

In “design” mode, I could bash out HTML/CSS/JS really quickly with no consideration to maintainability in a kind of hap-hazard ‘designery’ way – this isn’t code that I would necessarily be proud of, but it would be ok to show as a prototype. The client won’t be checking the code at this stage. It’s cool, chill out – it will save me time.

Trialling a new process

I recently had two projects running concurrently which were similar enough to experiment with to find a new and improved process.

Project #1 would be done my tried and tested way.

Project #2 would be done “in the browser” – eurgh, I still can’t stomach that term.

Obviously, we know how Project #1 went, it went the same way it usually does – small amendments that take an age in Photoshop compared to HTML/CSS tweaks.

Project #2 started out really weird, being faced with blank HTML and CSS documents was an odd feeling. I couldn’t handle it, I didn’t know where to start, it felt plain wrong. Do I backtrack and use the normal process? Do I push through this feeling?

I did neither of those.

Meet the new process

Project 1 and Project 2 both went well, the client was happy with the outcome and the process on both, but I was happier with Project 2.

So what happened in Project 2 you ask? Well the “Photoshop process” and the “In the browser process” had a little baby, the baby’s name is “The Hybrid Process” – weird name for a baby, but let’s go with this.

The Hybrid Process

Project 2 taught me that I personally need to start in Photoshop, I need to get things moved around on a canvas before I can switch to code. Photoshop gives me comfort and makes me want to design something with my hands, albeit with my mouse and keyboard, but most importantly – I’m not typing out blocks of code straight away.

Project 2 went like this: Firstly, I got all of my colours, typographic hierarchy, spacing and imagery worked out, then I mocked up a static homepage for approval from the client. They were happy with the homepage, but wanted some tweaks to the layout and so on. It was at this point that I opened up Atom, my code editor of choice, and started coding it out, mobile first of course.

I then had a fully responsive homepage to show the client. I chose at this stage to keep with the static deliveries though. So I screenshot the mobile, tablet and desktop versions for them to look at. Why? Because I didn’t want the client to concentrate on browser functionality, I wanted them to concentrate on the design. I hadn’t browser tested other than Chrome at this stage and I couldn’t guarantee 100% that their experience would be the same as mine.

I then carried on in the browser to develop design the rest of the website.

Outcomes of the Hybrid Process

  • The code quality wasn’t as bad as I thought it would be, yes it needed refactoring in parts but it was a good starting point, so I actually saved time there when it came to the build phase.

  • It was also a lot quicker to create the other designs, building up a visual/modular library as I went based on the style guide and homepage I originally created in Photoshop.

  • Finally, the end results were better and more realistic than what I would have created in Photoshop. The font rendering was spot on, paddings were 100% consistent, everything was how it was going to actually look in a browser.

Decisions moving forward

I’m still not 100% decided on the final process in terms of how I explain this to the client. I see two options right now:

  1. I code it, I screenshot it – I present it as static visuals. This would work well for the clients who want to stick to a process of approval and who you cannot guarantee their clients’ browser for viewing the work.

  2. I get the process terminology right. I educate the client. I make them understand that I’ll be able to send them a working HTML/CSS/JS prototype, but it won’t be final production code and some of the functionality may not be fully rounded and tested.

Enough of me, what about you?

I’d love to hear what your processes are, please share them with me in the comments below.

Sign up for more

I’m committed to blogging every Tuesday, so Sign up and never miss a post again!