HTML/CSS is real in a way Photoshop will never be

Back in 2008 I had an eureka moment when I read this article from Noise vs Signals blog.

Jason Fried explains in 7 excellent reasons why the 37signals team skips photoshop, going directly from paper sketches to HTML/CSS.

It made so much sense to me that I wanted to start doing it right away. Although I could do it on my own projects, I was a freelancer and my clients loved mockups.

It wasn’t until recently, working at Red Hat within an open source community that I saw how this workflow can benefit and improve the relationship between designers and developers to generate amazing result.

Why bother

Jason goes over the main reasons, but this is why I bother:

Let’s be honest: I am lazy. It takes lots of patience, effort and time to build an accurate photoshop image.
Creating UIs on Photoshop is a tedious work that never really represent the end result, for example text in Photoshop is not the text on the web.

To me it’s just a big waste of time. At the end of the day, implementation is done in HTML/CSS anyway.

HTML/CSS is as much a drawing tool as photoshop, just better and real.

Shows results instead of expectations

I am a designer and I work with developers. Developers have developer eyes, which are very different from designer eye.

Designer are strange. We care about typography to the point that we get annoyed if the elevator numbers doesn’t have the correct kerning. We generate pheromones when we see good alignment and spacing. We just care about things that no other human being does.

My boss once told me that if you give an image to 10 different developers you’ll get 10 different implementations, and most likely none will be the one you’ve envisioned. He is spot on.

When we handle a perfectly crafted UI image to a developer to implement, it’s just silly to expect that he will care about the same things we do.

When I skip mockups and create HTML prototypes I am not only speaking the same language the developers do, but also making sure the end result looks exactly how I intended.

The paper to HTML workflow works

A few years ago I was in Beijing talking to one of the few Chinese persons I knew that spoke english. I asked why was it that almost none Chinese spoke english, and he told me that since there are almost 1.5B Chinese in the world, we should be the ones learning Chinese and not the other way around.

And he was right.

On open source projects designers should adapt to the community workflow. Our deliverables must meet the communities expectations and be inside their comfort zone. We shouldn’t expect to change a team mind to fit our ways.

This has work very well on the Aerogear team. I’ve learn git to send my designs to the community repositories and I always do my best to help improve the UIs and UX without been dead weight to the team.

I am sure I often fail, at the end of the day I am a designer. But I know that the team appreciates and support my effort and they help me in any way they can.

I am biased

To me hifi mockups have always been a waste of time, but I may be biased too, because coding for me is as easy as using Photoshop.

I have the privilege of working with with extremely talented designer that don’t code and build beautiful interfaces. I just hope my experience show a different design path that has given me great satisfactions.