Latest Comment by Jon Roberts ~ Fri Jan 02 on Moving back to Test::Unit?

Paper prototyping a design

I always sketch out design ideas on paper before I do any markup, as it helps to have a reasonably structured layout in mind. I’m often reluctant to use Photoshop to mock up a design, since that in itself takes a bit of time (although it does help with color). Plus, for work, putting some thoughts on paper is a quick-and-dirty way to show my boss a few designs I have for whatever we’re working on. I guess you could call this paper prototyping. A List Apart recently had an article on paper prototyping, which is a little overkill for what I would ever do (as I’d never use scissors), but there are several good scenarios for how something as simple as paper can help your design process. And personally, I think it’s fun.

Comments

01

Chris on Mon Feb 05 at 06:32PM

I don’t have the patience to do anything like this. I prefer the our huge whiteboard for drawing up prototypes. Well, actually, I usually just sort of go for it in Fireworks, and basically just let the design bring itself to life. I can swap colors quickly, and I use the layers for to test different styles (i.e. two or three different navigation styles). Then, when it’s all done, I’m ready to slice and export and begin the daunting task of making those gradients and seemingly easy alignments come to life. :-)

I will say that many designs (such as the current tiny design) happen straight out of the CSS, and I just play with it until it feels right.

02

Ryan on Mon Feb 05 at 07:33PM

Whiteboards are nice for that sort of thing. At work, we just got a new 8’ whiteboard, and additional 3’ ones at each desk. They put off that “nothing is permanent” vibe that works out well.

When it comes down to the details, I couldn’t agree with you more; changing/adding/tweaking CSS is the way to go. However, that seems to work best for me when I have the major layout decisions finalized (even though nothing is ever finalized). I spent a lot of time starting out with nothing but CSS, and while that’s fun and eventually works, I often found myself trying to map out different layouts in my mind, where it’s easier (for me) to sketch them out real quick. My brain is less clogged that way.

I don’t know how you are, but sometimes I hit a complete creative block. There were times when I could not come up with a clean, simple design when going with straight CSS. At random moments, I would put that frustration back on the fact that I didn’t have a plan beforehand. So now I’m experimenting a little with a new method—it seems to work so far, but we’ll see.

For me (and like anyone I’m sure), a large part of design is simply getting inspired/motivated to start thinking with creativity. And in a way, resorting back to paper and pencil gets me in an artistic mindset, provoking the mood. I can’t say I’m not the same while working in Photoshop, but it’s a different technique from how I used to do it, and sometimes that difference is what it takes. But in the end of course, it’s whatever works for you.

It’s been a long time since I’ve used Fireworks, but I’ve actually read/listened to a designer who does what you sometimes do. And chooses Fireworks over Photoshop for mocking up designs. Are there specific things Fireworks does that aids the layer/slicing/export method?

Have something to say?
Please rewrite the image text Are You Human? Hint: Are You Human? Formatting Tips

or

© 2009 Ryan Heath | Site Management A Ruby on Rails production.

Get in Touch