A film-industry trick to speed up your first round of design comps

Colleen Design Theory, Web Design & Development 1

Color does not add a pleasant quality to design—it reinforces it.
~ Pierre Bonnard

Starting a website from a blank slate is always a wobbly moment. You’ve got this new client whom you’re wanting to genuinely help and impress, you’ve never met this person before (most of the time), but because you’re a designer you’re required to read their mind and produce a piece of work that encompasses not only their needs as a company or product, but also satisfies their inner artist. Now that’s not daunting at all, is it?

It’s been a constant journey for me to make this initial design process as simple as possible. There have been many helpful techniques and questionnaires to hand over to the client in the hopes that they answer honestly and can help ease you into creating something they’re going to like, but nothing is fool-proof and on occasion your final design ends up in an entirely different direction than when you first started (see Oatmeal for some giggles at this).

So could there be something more exact to help this initial design process? Could there be a way of quickly extracting views and thoughts for overall layout and colors from the client without spending hours and hours in [enter your favorite web design application here] to get from point A to point B?

Enter Colorscripting.

Used most notably in the film industry, Colorscripting is a layout of thumbnails that are used to show a broad overview of how a story/film/etc. will feel and flow from a high level by concentrating purely on blocks of color or very small abstract images of the real deal. It essentially can get the kinks out and in turn produce better pacing from scene to scene. Think of storyboarding, but a blurrier, color-dependent, tinnier version of it.

For some companies—such as Pixar—it’s an essential part of their animation process and that got me thinking—if it works for animation, for illustration, for film—why can’t it work for web design?

So I set myself a task to give it a shot. We had an awesome internal project that needed a website and my goal was to create 5-6 modestly small thumbnails that would get across 2 things to the client (or in this scenerio—my bosses): basic layout and basic colors. Here’s what I came up with:

I presented the colorscript theory, I presented the thumbnails (which, noteably, took about half the time it would have taken to do 2-3 comps of a full size view) and the verdict? Success.

In less than an hour talk with the them, I now had the direction to go with the site design, the layout to take, even the main background image to jump off of. There were no discussions of “this word is wrong here” or “this button isn’t round enough” which I feel always end up being discussed in initial design reviews and almost always have no bearing on the initial design goal.

So in short, colorscripting achieved: less time designing things that aren’t going to get used, more design directions (because they’re small you can make lots of them!), less attention to moot details, bigger attention to overall layout and color… could there be a downside to this?

I would love more than anything to try this on an unknown client, but yet I feel like there may be facets to it I’m not seeing. So this is where I turn to you oh people-of-the-internet. I have a theory and I want to hear your feedback. I want to know if you think this process has any potential—have you used something similar? How can I make it better? How can it be hindering? Is it complete bollocks?

I can see some drawbacks with it (thumbnails, wtfbbq? how am I supposed to see it?!!!111), and perhaps it will be a discussion per the beginning of a project if it should even be used.

However, I like that the first introduction to it—albeit internal—went smoothly and feel like this may be a very useful method for designers to add to their collection.

What do you think?