However I think that the suggestion to move from Photoshop to Sketch for doing UI design is only kicking the can down the street and not dealing with it while it’s in-front of you.

That Medium post makes the classic web design mistake of coming up with a solution and then trying to tweak that solution when what you should be doing is looking at the main problem in the first place and deciding how to address that. This is known as the X-Y Problem – having decided that Y isn’t quite the solution to X you then look for other ways to do Y, when you should be looking at X itself and working from there.

So what is the problem?

In this situation the problem is twofold.

Photoshop isn’t a web design tool

The first issue has been discussed many times before: Using a design tool – in particular Photoshop – to create a web UI isn’t compatible with web design in the responsive and multiple-device web world we are now in. Photoshop is the main issue here. The clue is in the name; it is designed for editing photographs. It does other design stuff (possibly too much, as the Medium article points out) but it is still built for one purpose and being used for something else. The issue is still present with other tools to a greater or lesser extent.

The responsive web doesn’t exist in one fixed dimension so in order to accommodate the fluid nature of the web you’d need to create multiple Photoshop files. Once you start creating more than one design file that introduces a large overhead of maintenance and potential for contradictions and omissions. Sure, decent designers would be aware of this and are capable of managing this risk, but it exists none-the-less. You can’t design how a UI will look when you don’t know what it is going to be used on.

However, there is more to designing a web UI than having to consider various breakpoints, bringing me onto my second point.

A design tool is still a tool

A tool being an instrument to be used for actioning a specific task. This is the main problem with any design tool; it is a single entity for creating a design. What are these designs going to be used for? Will they be shown to various project stakeholders to see if they like it? Will they be used for slicing up and creating full front-end templates? Will they be used as conversation aids within the development team before build?

If it is any of these reasons then I believe this is the wrong use. The problem is that once you have a design then you have something to aim for. And this isn’t always ideal. You’re basically working backwards; starting with a design and then trying to achieve it. This is a problem because you can never reach that design as every device will display differently. Different sizes, different OS’s, different assistive technologies… You can’t aim for something that cannot exist.

What happens when you start building to these designs and find that the menu text doesn’t fit on a portrait Nexus 5? Well you have to go off-piste against the designs in order to accommodate that quirk, or make changes to the designs. Then you’ll find that IE8 adds in extra padding around assets that you weren’t expecting, so you have to either tweak the designs again or you have to tweak the code to get it to display as per the designs. And on you go, compromising your way to a finished product that may or may not match the intended goal the designs presented.

What is the alternative?

Perhaps a better option is to come at the design from the other end.

Don’t create a visual for you (or anyone) to aim at; define the problem and then build the whole solution together; Design, development, stakeholders, usability practitioners, Infrastructure teams… Everyone who has an involvement in the project. Your end goal should be to meet the project requirements, not to meet a pre-made design decision.

Creating a design using a design tool is a hangover from the over-the-wall mentality of web design. Don’t create a spec and throw it over-the-wall to the design team. Don’t create the designs and throw it over-the-wall to the stakeholders for approval. Don’t create something separately that has to be interpreted and converted into the final layout and design; build the layout, design and website itself with everybody involved. Call it Agile, Lean UX, whatever you like, but designing a website in Photoshop and trying to build it is something we should be trying to get away from as a whole concept, we shouldn’t just be searching for a Photoshop replacement.

Share this post

6 Comments

Mitra Mejia 4 years ago

I couldn’t agree more. Even tough I came here desperately looking for an Sketch alternative on windows, after reading this I realized using a web design tool its not always necessary. If Im working on a big proyect were a web design tool like Sketch or even Photoshop is necessary, Ill use them. But for other sideproyects small to medium websotes you can always design in the browser, designing and coding at the same time.

Vitor Hugo 4 years ago

I understand but I disagree. Photoshop today rules the market, every UI designer use this tool because it’s not the best, but because it’s the only one that serve the purpose in it’s own way.

Sometimes, apps like Sketch come alive to balance the market and the fact that UI designers are interested in the alternatives (capable of the task and cheaper than the PS) pushes Adobe to: segment their softwares to different kind of designers; make these new solutions more accessible than their old ones to compete with the new segmented app market.

I understand your point, but i disagree Jon. We need our design community to always look for better tools to “push” the companies to make the apps significantly better for us.

Jon Walmsley 4 years ago

Thanks for commenting.

As far as Sketch goes, my issue is not with it existing, so much as it is coming at the problem from the wrong angle.

They treat the problem as being: Photoshop isn’t perfect for web design so let’s make a version more focused towards that, whereas the problem is really: ‘how can we help designers design for how the web works in 2014’.

They may have solved the issue if they’re thinking of ways to improve Photoshop, but I think they’re solving the wrong problem here.

But I do agree that it’s always good to look to produce new ways of doing things, otherwise everything – and everyone – just stagnates. And that’s a far worse situation all round!

Paul Mowat 4 years ago

Those 2 problems boil down to the same thing. One is just a statement and the other is a question. The answer to both is the same, create something that is better/perfect/more efficient.

Perhaps if you are working on a relatively small project or a personal project you can adopt the approach you outline where you don’t adopt a visual to aim for. However, dealing with larger projects this approach would be absolute suicide. Visualising the site in a static form does obviously have it’s limitations but if it’s done properly and is developed in conjunction with UX and development it should never be an unachievable ideal. It seems more like the problem being discussed in this article is people working in an uncollaborative manner therefor creating problems for those who carry out the next stage in the process.

Jon Walmsley 4 years ago

Very good points, yes. Photoshop is very un-collaborative by design, but it can still be useful in web design. Such as for trying out different visual themes, styles, typography etc. Kind of creating general mood boards, that sort of thing. But when it comes to actually designing a website then there isn’t one tool to use. Get everyone involved and build the thing together, not in stand-alone silos.

I can see where your coming from, but the reality is that the world you’re talking about does not exist.

We live in a world where clients need to see a finished design before you start coding – for our sake (to avoid the nightmare of “just one more change”) as well as theirs. We live in a world where those where the biggest budgets operate on a design-by-committee basis. We live in a world where it is simply necessary to design websites before we even write a single line of code. We live in a world where developers are not designers – especially on projects where there are large teams involved. We need a tool that can quickly mock up designs that whole teams – be it two people or two hundred – can all refer to.

It might be possible to use ‘Agile’ or ‘Lean UX’ design on a personal project, but it does not work in the real world.

The best UI designers in the world are unlikely to be able to quickly or efficiently produce a live mock up in the browser as they could in a design tool – nor should we expect them to.

You’re right that Photoshop shouldn’t be used for web design. As you quite rightly note, Photoshop is a photo manipulation tool. The reality is we need a tool that is designed for UI design and prototyping.

At the moment, that tool is Sketch 3. It might be Adobe Reflow if Adobe ever pulls its finger out – or can be trusted after the whole Fireworks debacle. But we will never live in a world where designing in the browser will replace using a design tool such as Photoshop, Sketch or Reflow.