don’t spend all day in photoshop

I’ve had the good fortune to work with a gaggle (what’s a collection of designers? A flock? A pack?) of awesome designers in the course of my work. I’ll name drop: Nat and Miri from PlanHQ, James at Bandit, Alain at IncFuel and some cool stuff by Colin Cameron. (By no means an exhaustive list, I’m sorry if I left you out!).

I’m going to pick on Miri today (sorry!). She’s now well-versed in the magic and esoteric “ways of the web”, but when Miri first came to us at PlanHQ, she’d only had marginal involvement in web design.

Tim spent weeks “indoctrinating” (his word, not mine) her into the “Web 2.0 style”, but as one of the people charged with making her designs a reality, I was more interested in a different effect.

It speaks volumes to Miri’s dedication and talent that many of the choice quotes I remember from her during that time were along the lines of “That looks wonderful BUT…”. Followed by “could you just squidge this five pixels that way?” or “that colour isn’t quite right!”. I still remember days of frustration with Photoshop, LCD screens and colour profiles involved in trying to get the PlanHQ green just right.

These days, 37Signals say that you should skip photoshop entirely. Just mock things up in plain HTML. Sadly, this doesn’t work when your implementers aren’t your designers, and no matter how quickly Miri picked up HTML, there was only one of her and four of us.

Nothing is impossible to render in a browser - and you’ve always got position: absolute; to fall back on if you’re stuck. But before a designer comes to realize exactly what kind of chopping up we have to do (and that everything on the web is at it’s heart, a square, even if we disguise it with corners) you’ll often get mockups with elements like this:

I call these “impossible corners”, because there is no way to render these using two non-overlapping boxes. They’re not impossible, of course. There’s a number of techniques you could potentially use to render an element like this, but the basic point is: it’s harder than it needs to be.

You come into similar issues with transparent shadows and PNGs (especially if you still have to support IE6) layers that overlap more than twice (as you have to introduce extra elements in order to render all of the backgrounds), diagonal gradients, or font rendering (yes, the text fits perfectly in Photoshop, but that’s dynamic text - people can change that).

More importantly however, you lose the feel of the website. The little bits of animation and Javascript trickery that really make a Web 2.0 application a joy to use. Everything starts to feel static like an old school marketing site.

Miri, of course, surmounted these challenges and then some. It’s always amusing to hear someone attempt to describe to you the sort of animation they want using noises and gestures - “so if this bit goes swooosh under that bit”). Here’s a fine example of an awesome interface element out of PlanHQ which I can take no credit for - this is all Miri, Jeremy and Tim.

This “quick date changer” allows you to quickly reschedule an action you’ve planned, so you can replan at any time. At the end of the action itself all that’s displayed is the date and a “calendar” icon. When you click the icon, a calendar date selector pops up, and once you’ve chosen the new date, it instantly moves the action. Cool - no unnecessary clicking of “OK” or “Submit”, and the element serves a nice dual purpose - show me the date of this action, and let me move it.

I guess it boils down to: If you’re new to designing for the web, don’t spend all day in Photoshop. Grab some geeks, get them to teach you HTML. Play with some cool web applications - use Gmail, if you aren’t already, or try planning your flat move in Backpack.

You need to become a web designer.