Designing for Outcomes

It’s easy to get caught up in a world of ideals. When we do,we might just be architecting our own failure.

Timothy Prestero says: design for people, not awards. It makes a lot of sense, but it’s something a lot of us fail to follow.

Prestero talks about this from the perspective of a product designer, but the lesson is the same for all forms of design. This applies to web, graphic, and interactive design as well.

A lot of web designers would rather make pretty UI comps in Photoshop that are then marveled by other designers. Getting praise on Dribbble and Behance is great and all, but what if nobody actually cared about your pretty product (i.e., Path)?

The White Cube

The problem is this: too many designers begin crafting something they imagine would someday be held in high regard by other designers. In other words, they design for awards – things they hope would inspire others, instead of things that would be useful to others.

Unfortunately, that’s art world thinking. Take for instance, the concept of the white cube – an allegory for the sacred and insulated space within the four walls of the art museum, home to all manners of art. These works of art enjoy having their sanctity protected from the rest of the world.

That’s great, because art serves to inspire, and to question. A space that shields us from anything but the art in question allows us to connect very deeply with it without inteference. In that sense, art is useless for the real world, as Oscar Wilde famously put it in The Picture of Dorian Gray.

But unlike art, design isn’t useless! When we design for designers, we are betraying our profession as designers.

Designing in Code

Designing for outcomes, in web design, means designing in code. Jumping right into the browser with Sublime Text and Google Chrome, wireframing and designing your site from scratch in HTML, CSS, and Javascript, bypassing the Photoshop comp altogether.

Instead, use Style Tiles to help you moodboard your site. This makes your layout and visual style separate at the beginning so you can make changes very quickly, independent of the final production code.

Only jump in and out of Photoshop and Illustrator when you need to process graphics. Otherwise, use either InDesign or Omnigraffle to quickly experiment with layouts on the screen after sketching on paper.

Same tools, same processes. Just re-ordered and optimized for a different outcome. We’re finally establishing a set of professional standards and best practices in web design (instead of borrowing from print), and that’s really exciting.