Speed designing

17 10 2006

How to design with speed, and remove the “design is a bottleneck” issues.

Quite often I’ve seen designers, and I’ve been very very guilty of this my self, over designing.

I must have heard every reason under the sun:

“It’s just as fast for me to do it in photoshop as it is for me to draw it.”
“I don’t want to have design specs that look awful, it’s unprofessional.”
“I can’t draw very well, I’m much better in photoshop”
“Its easier for me to code it in dreamweaver”

Long lost is the art of talking to a client / user, and litterally scratching down on paper (electronic or otherwise) what the screens will look like.

Now you all must be thinking, (unless you know where I’m headed) “but hand drawn pictures look so aweful! and how could they possibly be reflective of the design enough to form specification?” or something equally disqualifying, but riddle me this:

“If you can rapidly, and I mean within 2 minutes craft the general layout for a screen with your client present, and get conceptual agreement on the screen within the next 10 minutes, would that be considered fast?

If you take their requirements, and then come back with a reasonably finished design done in photoshop, then cycle through that at least once at the next client review, would that be considered fast?”

I have a view that the design process during the planning phase, should not yeild any actual assets (images, css, javascript) unless they are used as part of the creation of high fidelity / working prototypes. Even then!… the assets should only be either pulled from your core reuse library (presuming you have one) or created in a fairly slap together nature.

During planning the design process needs to be streamlined and highly ‘agile’ in order to catch and respond to all the masses of input that is gathered during the research tasks of the UCD methodology.


When you do your intials, do you do them in photoshop?
Do you spend more than 1.5 seconds drawing the frame for your page?
Do you spend more than .5 seconds drawing and postioning a text box?
Do you put in the actual logo, with the right padding around it?
Can you draw a screen that has 10 text boxes, 3 buttons, a lump of text, headers, footers, nav model and maybe even some tertiary links somewhere within 60 seconds using your NORMAL practices?

I’d suggest not if you answered ‘yes’ to the first question.

What I’m getting at here is that the method behind getting the core design down fast, relies on the designer being able to accept very rough, hand drawn pictures to form the basis for specification.

More commonly these are called low fidelity screen designs or initials.

When the primary layouts have been developed and agreed upon, then and only then should the designer even consider cracking open photoshop.

Here are some tips which can dilute the garbled mess above:

  1. Don’t get over zelous about how nice your initials look. They are created during a highly creative process where a lot of information is banded around, and change can and does come through all the time. (anyone ever said this? “the damned client has changed their mind again, now I have to redo the whole design!”) Avoid this problem by designing in low fidelity until the overall layouts are resolved.
  2. Don’t worry about spelling things correctly, or nice alignments. In fact, don’t worry too much about anything except getting the ideas down.
  3. Do encourage the people you work with to try out the screens once you have the basics down. Almost like an on the fly usability test
  4. Do consider what tools you use to do this task. Paper vs. Tablet PC or electronic whiteboard. I’ll write a post later about the advantages of tablet PC to the designer
  5. Do make inline notes about the behaviours of objects on the screen as you think of them. Eg, “on select, this button turns green, then on press it launches the calculator and turns blue”
  6. Don’t get attached to the design, it’s going to get butchered many times during this process, let the change happen and use your skill to guide where it goes rather than dictate
    There’s many many more but if your’e an avid reader then more will come.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: