I’ve always been interested in high-level design tools as a means for designers to easily sketch ideas without getting stuck in production details. It’s too easy, and common, for a designer to create a sketch in Photoshop, or an initial wireframe, and then be reluctant to make large-scale changes to the design because of the effort involved in making those changes. You could start from scratch, but what you’ve got looks so polished that it’s hard to give it up. And to rearrange existing elements is a lot of work, and likely means you’re going to end up with something that looks a lot like the original.
High-level design tools let you create designs through abstractions (the grandfather of them all is Sketchpad). They let you focus on exploring alternate design approaches quickly and easily. And they get you away from the individual lines, pixels, or interaction details that can so quickly turn you into a production artist rather than a designer. Unfortunately, these tools are often thought of as experimental rather than practical solutions we can use today.
One great way to design at a higher level is through programming. Personally I came to understand this I was a student at the MIT Media Lab. When I was there, my advisor, Muriel Cooper, said that it was critical for new media designers to be able to program. This was, in part, so that our work wouldn’t look like a product of the tools we used to create it — that it could be something more. But, just as significantly, it also gave a way of thinking about design that was impossible any other way.
As the design firm Triplecode, we talked a lot about sketching-in-code as a key part of our design process. It allowed us to sketch a project’s underlying data architecture, while simultaneously exploring visual, interaction, and motion design. We could put all the content into data structures and explore how to best link content together, or how to rearrange or re-present content as the user navigated. By simply modifying a couple functions we could change a design’s color palette, a design strategy from asymmetry to symmetry, a visualization from a cloud to concentric circles, even an interaction model from dragging to clicking.
Coding is something that more designers should make part of their vocabulary. Not just for interactive media, but for print work as well. Unfortunately, designers are often reluctant to learn programming — in part because design education process is still oriented around skills. But there are some great tools and resources out there to get started. Processing is among the most popular languages for designers. And the OpenProcessing site is full inspirational sketches.
Below are a couple screenshots from interactive sketches that were done during the design phase of the MoodLogic Magnet Browser. I’d rather be posting the interactive versions, but they were done in Director and I don’t have web versions of them.
Sketch for MoodLogic Magnet Browser, Triplecode (2000)
Sketch for MoodLogic Magnet Browser, Triplecode (2000)