The future of web design and why Photoshop isn’t dead

So you’ve designed these beautiful mock-ups in Photoshop, and the client loves them. They’re going positively doolally over your ideas, and both you and they can’t wait to see this new website come to fruition in the browser. You shuffle over the PSDs to your developer, kick back with a cappuccino and wait for the good times to roll.

Except, it’s at this point we usually start to see problems with this process. The developer starts pouring over your designs and the list of issues starts getting longer and longer. Before you know it, half of your design either can’t be done at all, or isn’t sensible. But you’re a web designer, you understand this happens, so you work closely with your developer and reach compromises. The site is completed and you’re both delighted with the end result.

Except, the client isn’t. The end result is a project that looks nothing like the beautifully crafted, pixel-perfected PSD they signed off on. Up in arms, they withhold their final payment and the frustrations continue as your developer tries to find the jargon-free words to explain the decisions made.

Sound familiar?

If so, it’s because you’re still following a process that is both dated and problematic. It’s a process that costs you money, client satisfaction, and causes friction between the members of your creative team. It’s a process that many agencies are abandoning because frankly it causes too much trouble.

Photoshop isn’t dead

But it’s role in dictating final webpage designs should be. Photoshop is totally inept at replicating browser conditions, being a tool originally designed to handle photo editing. It can’t handle responsive designs either, so you must create separate designs for all the different devices. This causes problems with fluid based design, because how your design behaves between those PSDs is incredibly difficult to predict.

Unfortunately, the era of Photoshop-design got clients used to seeing full page mock-ups that were then turned into table-based code. This allowed the end result to look almost exactly the same as the PSD. Clients therefore expect to see this and get uneasy if they can’t. The reality is however that this era is long dead – clients must now use their imagination more when interpreting a designers ideas.

This same principle applies to many other areas of creative design – architectural drawings and blueprints require imagination to interpret. It’s not until the builders finish their job we see the end result. How well this approach works not only depends on the client, but also the ability of the designer to utilise the tools at her or his disposal. This still includes Photoshop.

Use a variety of methods to show your ideas

So how do we communicate our ideas to clients without full PSD mock-ups? My suggestion to designers is to consider the following:

1. Understand the problem and the project goals
2. Seek inspiration
3. Conceptualise, sketch and draw
4. Wireframes and UI
5. Assemble aesthetic ideas in Photoshop (or similar)
6. Initial development in browser
   

1. Understand the problem and the project goals

Your first objective as a designer is to understand the goals of the project and the problems it’s trying to solve. Yup – I just re-worded the title there – but it’s an important step in the creative process. Designing without clear direction leads to websites that might look great but don’t achieve what was set out. Do some research to help you too, look at competitors and get a better understanding on the project context. This step will make you a better designer.

2. Seek inspiration

To do this, follow these steps:

1. Step away from your computer.
2. Go outside.

Ok – I’m half kidding, there is a lot of online inspiration. That said, endlessly trawling awwwards or codrops probably won’t help you much. Taking a day away from the screen, to explore a new area, take photo’s, read books or get yourself at one with nature can not only inspire you but help clear your head. Try to find unusual sources of inspiration, and consider looking at other areas of creative work such as art, architecture and even music. You could assemble your inspiration as mood boards to show the client the visual direction you’re heading for.

3. Conceptualise, sketch and draw

Hopefully by now you’re an inspired and educated designer. It’s time to start designing – but try to refrain from your screen still. Conceptualising is best done with pen and paper, it’s quicker and your creative juices will flow more freely. Start creating ideas for colour schemes. Draw out site maps and visualise how each function of the site will work. Draw pretty pictures, create gradients, conceptualise typography.

4. Wireframes and UI

I also suggest that you should wireframe your project. You might feel this could be part of step 4, but the important distinction for me is wireframes shouldn’t involve aesthetics – colour, type or styles. This can be done with online tools, but my personal experience is these cannot come close to matching the speed and flexibility of pen and paper. It’s also a great time to start involving your developers, talking them through your ideas and ironing out any potential browser issues.

5. Assemble ideas

At this stage, it’s still good to use Photoshop to combine your wireframes, colour schemes and type ideas into mockups. But you should treat these mockups not as final designs, but as quick experiments that give an idea of how your design can come together. They shouldn’t necessarily be fully complete – and you might find it better for your workflow to only mock components of the design.

6. Initial development in browser

Work with your developer to start fleshing out a few ideas in browser. Perhaps you’ll just create some ideas for navigation, modals or other various components of your idea, experimenting with animation and aspects of the design that only work in browser. These could come together as a style tile, which gives your client a more accurate representation of the behaviour of your design ideas in browser.

At this point, you should now have a body of work assembled that put together, much like pieces of a jigsaw, gives you and your client a great impression of how the site will end up once developed in browser yet without full PSD mockups. You’ll still have used Photoshop, but as part of a workflow that gives greater consideration to all areas of creative thought and process.

Granted, it can be a more disjointed and complicated process. Some clients may still be satisfied. The trouble is, for as long as we keep designing full mockups in Photoshop, we’ll never get away from the problems doing so incurs. Break the mould, and be a better designer and a better agency.