Photoshop doesn't work by Jim Ramsden

Note: This isn’t about a bug or glitch (of which Photoshop has many) it’s an objective look at the application that has been the go to tool for web designers since… well, like forever.

Confession, i’ve never used Photoshop for interface design (i’ve always preferred illustrator) but I do use it for editing photos - it’s amazingly good at that.

At times i’ve admired the way other designers have used the tool to build layer upon layer of shapes, colours and effects - producing awesome mockups.

But recently when I look at the application, and see the way it forces designers to work, all I can see is how impractical and inefficient it is.

Here’s a few reasons why.

It’s pixel based - The web isn’t anymore.
It’s fixed canvas size - The web never has been.
It requires a gazillion (that’s more than a fuck-ton) layers to create an object that can be built in the browser with a few lines of code.
It’s static - in the browser you have animations, transitions and interactive states.
When you finish a design in photoshop, all you really have is a really nice picture of a website/app. And once that website/app has been built what happens to it then? Ultimately, it sits in a folder collecting dust.

When you’re in Photoshop designing away making beautiful pixel babies, all you’re really doing is making a set of decisions.

Break out of Photoshop

Try breaking down that decision making process into chunks that you can work on in isolation.

IA - there are dozens of wireframing tools for rapid prototyping and collaborating/sharing ideas with colleagues and clients.

Layout - build a simple layout in code, pour in some example content too and this will help you to explore responsive layouts much quickly.

Colour - there’s lots of places for colour inspiration, find palettes, print them out, stick them on the wall and have conversations about what’s right for the brand not what’s trendy or what you prefer.

Typography - tools like typecast are great for looking at different typographic styles and making choices about font groups.

UI components - Sketch out the different UI components and consider how they’ll adjust to different screen sizes.

Separating these decisions into chunks should help you move quicker, exploring things in isolation instead of steering elements around in one big Photoshop pot until it all slots in to place.

I’m not suggesting that you go through all these things one by one. It’s not painting by numbers, it still has to be an organic process. Use your instincts to jump between tools and when it feels right move into the browser.

It’s good for personal development.

It’s time to change your workflow, look at ways to do more designing in the browser and try new/different tools and techniques. It might be uncomfortable at first, and you’ll probably find ways that don’t work for you, but putting down the comfy blanket will help you improve your craft and become a better designer.

If you can’t code or aren’t comfortable writing html/css then hurry up and get good at it. If you stick to designing in Photoshop you’re likely to end up with a job title like ‘Pixel Decorator’.

Photoshop doesn’t work

Here’s a few reasons why.

Break out of Photoshop

It’s good for personal development.

Useful links

More Articles

Colophon

So far, so surprised

No more ‘Mobile’