Simple but often overlooked UI ideas
I am at a computer most of my day; it’s been the norm for over a decade now. Three years ago, I bought a Mac and never looked back.
15th September 2011
There has been a debate raging for quite a while now: Should designers know how to code?
So far, I’ve stood on the side of: designers should know about the tech they are using to know its potential and use it well. But one idea pushed me straight over the edge – designing in the browser.
Generally, the process for quite a while has been, a designer opens photoshop and puts together a beautiful image of a website. This is shown to a client for approvals and then the developer gets to work. He curses the designer for using rounded corners and drop shadows that cross box lines and the final product is a close approximation of what the designer intended. This is why print designers can’t do websites. They have no clue what a developer has to do to get their design to work on different browsers.
So for the latest version of our site, I decided to skip the Photoshop step entirely and go straight to the browser. There are quite a few advocates of this method, but I had never tried it for myself. The other big advantage I had, was that the content already existed. It was laid out in WordPress, so when I wrote my HTML, it wasn’t with damned Lorem Ipsum, it was real. And this make a really big difference in choosing fonts and sizes, especially when aiming for a responsive site. We embrace reflow and have to work in a flexible medium to truly understand what different users are going to see. It isn’t a process of getting the site to look the same on all systems and browsers. But getting it to look right on all browsers.
If you want to work in the web, this should be your introductory ritual of sorts. It breaks all your expectation and frees you from the constraints you put on yourself, your obsessive control over what the design should look like.
Welcome to the internet.