Mocking Up Is Hard To Do
Recently at Bearded we made a pretty drastic decision in terms of our web design process: we’re not creating mock-ups anymore.
That is to say: we’re not creating flat, Photoshop/Illustrator-produced mock-ups of websites, which we present to clients as JPGs or PNGs. And that’s because we’re not designing in those programs anymore.
The more time we’ve spent working on responsive websites, the clearer it’s become that mock-ups aren’t very good representations of the final product. They involve a lot of unnecessary abstraction that results in difficulty with:
- Predicting and solving the design challenges inherent to fluid, responsive layouts
- Rendering complete solutions to those challenges
- Accurately communicating responsive designs to our clients
Traditionally, mock-ups are attractive because A) we’re used to making mock-ups, B) supposedly it’s easier to revise a mock-up than CSS, and C) it’s convenient for getting client approval. But fundamentally this approach is flawed for websites, a situation that’s been greatly amplified by the extremely non-static nature of responsive layouts.
So we’re chucking our mock-ups. From now on we’re designing websites in the browser with HTML, CSS, and Javascript. We’ll still have our trusty Adobe products and paper pads nearby for sketching and rendering design software-friendly elements like textures and backgrounds. Sometimes we may take screenshots of the site in progress and bring them into Photoshop for embellishments before bringing those changes back over to the working code. But for all those things that are easier in CSS (type, layout, color, and interaction) – we’re keeping it native to the medium.
We’re hoping this will help keep us, as designers, more focused on the true nature of the fluid, interactive products we’re creating. And I feel certain that our clients will benefit from seeing and critiquing a real, working web experience rather than an abstracted representation of one.
Not only that, but once we have design approval, we’ll be halfway done with our CSS. This should help us deliver websites to our clients more quickly with less boring, redundant work for us to do. And even if it is more laborious to revise a CSS mock-up (and I’m not convinced that it is), we’ll make up the hours in front-end development.
Our trials with this method so far have been very rewarding. It feels right to be creating interactions directly in their final medium, the browser. We feel more in touch with and inspired about our work than ever. It’s clear to me now that for years we’ve just been designing pictures of websites. But now, finally, we’re designing websites.
–MG
