A while ago I spoke to a designer who used to design television sets for Philips in the 1980s. He and his team would decide what new televisions would look like. In turn, I told him about how we would work together at the design agency I used to work for. I told him about the waterfall process, where an interaction designer would first create a fully functional wireframe. After the client had signed it off, a visual designer would add colour (and rounded corners) in a photo editing program. And when those pictures were signed off, a developer would turn them into something that worked in a browser.
My stories amazed him. To him, this sounded like the assembly line in a factory, where the different parts are turned into working televisions – after all the designing had been done. Waterfall, he explained, is not meant to be a design process. It's how production works.
Disciplines and designs
A few weeks ago a colleague of mine sent me a paper about prototyping. It was written in 1997, but its content is still relevant. In it, the authors explain three different types of prototyping, and outline when you should use them in the design process. These three prototypes are created by the different disciplines within a product design team.
Early on in the process, an interaction designer could decide to create a prototype to see how a product will be used. In this mockup, the focus is not on how things look. Similarly, the technical aspects might be less relevant. Such a prototype could look like a wireframe, or a sketch.
At the same time, the visual designer might want to explore what the new product would look like. In such an early prototype, the user experience might not be the most important thing and technical feasibility might not yet be of concern. This designer just wants to explore the look and feel of things. Such a prototype could be created with photo editing software, but it could also be a simple 'pizza box' (as is shown in a wonderful example in the paper).
The third person in the team is the engineer. Early in the design process the engineer would start prototyping to see how far they can go. Is the technology advanced enough to create the product we want to create? And if it is, can it be done within our budget?
These three disciplines should be part of every web design team. Right now – at least here in the Netherlands – in most design teams you will find an interaction designer and a visual designer, but the engineers are missing. This is what surprised my TV-designer friend the most. How can you design something if you don't understand the technology behind it?
The web's cathode ray tube
In the 1980s, people wanted to design flatscreen TVs. It would have been easy to create a slick-looking prototype with styrofoam, and everybody who saw it would have been delighted. But back in the 80s, TVs were built around a 'cathode ray tube' , and these tubes are enormous. No matter how hard you tried, it was impossible to create a flat TV.
On the web, we used to have our very own 'cathode ray tube' – we were technically held back by a single factor. We had plenty of good ideas for fabulous looking websites, but we had IE6 ... and IE7 and IE8. The weird thing is that, contrary to the situation in TV design, this obvious technical constraint was never really one of the starting considerations for our designs. And the reason is because there was a fatal flaw in our understanding of computers and the web: we believed that 'everything is possible with computers'.
As a result, we fantasised our ideal websites instead of actually designing them: “I want a fullscreen high-res video playing on the background, with text laid out in equal height boxes with rounded corners, shadows and gradients on top of them. And I want this to perform perfectly for everybody. Always.”
This is called magic design. You dream up an idea and wish the computer will do its magic. A technical prototype might show you very early on in the design process that a site like this cannot be built without a team of very skilled developers and an enormous budget. There's nothing 'magic' about it.
On top of thinking that everything can be done with computers, there's a whole world of designers out there who really believe that 'understanding the constraints of a medium will limit their creativity'. This might be an understandable attitude for an artist, but it's not a useful attitude when you're trying to create a product.
So instead of 'letting reality limit their creativity' , these designers decided to let a tool dictate them the possibilities. Understanding what's possible in the current landscape of browsers and devices is thought to be limiting, but understanding what's possible with Photoshop is not. We're not in the photo-editing business – we design products that people have to work with.
Promising the moon
This is a naïve attitude. But there's another reason why we prefer beautiful, magic mockups without technical validation. Art directors and sales teams love them, because polished Photoshop mockups are easy to sell. It's easy to satisfy potential clients when you promise them the moon. If things turn out to be impossible, that's a concern for later.
Sales teams are not in the business of creating a good product, they're in the business of making money. I used to work at an agency where every design was sold like this. And every website we ever created there turned out to be a disappointment. The client was not happy because the promised moon turned out to be impossible to reach. The designers were unhappy because not much was left of their beautiful fantasies. The developers were frustrated because they had to create something that's impossible to create. And the visitors were unhappy because they had to use a crappy product.
Limited fantasy
Without technical validation, we're not in the design business – we're practicing sorcery. Which is fine in works of fiction, but fails in reality. We're creating fantasies, and the problem with fantasies is that they're limited by our own imagination. If we refuse to understand the constraints of our medium, we also refuse to understand its possibilities. We're limiting our creativity to the things we can make up.
In 2010 this might have been more interesting than reality, but today reality turns out to be more interesting. Technical prototypes can help you to validate your ideas, and they can also help you to come up with new ideas. Nowadays, we have things like WebRTC and the File API. We can use visual filters in CSS. And did you realise that the combination of Canvas and video can turn into some incredibly spectacular results?
You might already know all this stuff, but without a prototype you don't know if these new features can be used in production today. You'll need a technical prototype, and you'll want it early on in your design process. So as well as an interaction designer and a visual designer, you'll need a good engineer in your design team. Because web design is product design, and not a magical assembly line.
This article originally appeared in issue 266 of net magazine
Words: Vasilis van Gemert
Vasilis van Gemert teaches the next generation of digital designers about web design and development at the University of Applied Science in Amsterdam.
Liked this? Read these!
- Useful and inspiring flyer templates
- Download free textures: high resolution and ready to use now
- The best photo apps for iPhone, iPad and Android
