Great photo and discussion, Christian.

I agree on the usefulness of paper prototyping. I recently ran across this post that describes a systematic approach to it that made a lot of sense to me:

http://www.37signals.com/papers/introtopatterns/

Drawing out your web designs does take that extra bit longer, but this plans out everything a lot better - rather than doing a fantastic design and realising a main element is missing. For smaller website maybe not, as the ideas of designs can be developed from your 'head', but for larger sites, especially when working as a team, will help everyone see how the site should work, and any questions or problems can be dealt with at sketch stage.

I disagree with Claire, the whole process is speed up when thought out properly before hand.

Sketching your ideas out is a faster and easier way to get your concept across before the mock up stage begins. Jumping straight into photoshop tends to lead to creative elements creeping into the design/architechture stage when really, these should come later.

I encourage all my designers to use a pen and paper before even touching their comp when coming up with a design.

Here's another unsung benefit of paper prototyping: It takes you away from the computer, which in many cases offers a million distractions. IMs, Tweets, Emails, RSS, Musics, Games, etc etc. It's great to walk away and be completely focused on the sketch.

I can see how having modular components would be useful, but I think it is important to realize that having these components makes it easier to re-use components when working on a new design, as opposed to creating a totally different component that does not exist.

This is not a problem, but just realize that this may effect how you design/think and take that in to account.

Try Balsamiq to create mockups...

http://www.balsamiq.com/

Sketching a web site before actually building it is essential to achieve a good feel and preview of how it is going to look. I always do it, first on paper, and then in Photoshop or Gimp.

Very nice post!

Hey what a great idea!
Could even be extended to using a part screenshot basis for template or content modifications to existing websites that have already been built.

you are a person who is good at discovering,And be good at thinking and put into practice.
Have to say,that's a great idea.

ya i agree the value of the paper and also this is also one of the important thing to layout the paper it is also one of the moderate one.

you need to sketch down ideas before creating a web site!.. it's not only beneficial in the design process but I can't understand somebody who doesn't use this thought process ata ll!

Yeah, I myself also make a paper variant of my designs first. This always help me to structure the site better. The only minus is that I cant't send thepaper preview to the client and this kinda make it pointless, that's why I scetch my ideas only when I work for local clients - the ones I can invite in my office or when I'm in "Evrica" situation and need to scetch my ideas fast:)

This prototype work I have started from my school studies I used to scribble my drawings and answers on a paper. Which would really help me to a large extent in my exams. I remember the sketch that is put up on the paper during my study. I do that nowadays for my design works too. It helps me to get the picture or the design as I have thought.

I have to agree. You need to know what the end result will be before you design the site.

Great post!! The picture is good quality for an iPhone snap!

I love paper prototyping, however, when I'm with clients or my boss, I like to use something more professional. That's why Magnetic Prototyping has become so popular since we released it to the public about a year ago (www.guimags.com, www.magneticprototyping.com). Check it out and let me know what you think!

-Efraim

Great post!! The picture is good quality for an iPhone snap!

I love paper prototyping, however, when I'm with clients or my boss, I like to use something more professional. That's why Magnetic Prototyping has become so popular since we released it to the public about a year ago (www.guimags.com, www.magneticprototyping.com). Check it out and let me know what you think!

-Efraim

I generally like to start on paper to wireframe a website, before moving to photoshop to refine the layout a bit more. Paper and pencil is quick and easy.

I used to use paper prototyping on my first designs, but it has a few drawbacks. First, you can't send the paper to the client, and if you really manage to show the sketch to him, it will be a runaway client. He or she want to see full color, logo and even text (so many times clients viewing a mock up are wondering about 'lorem ipsum dolor').
Second, having all graphical elements on a paper is impossible (we are not all skilled on hand drawing). On a sketch you don't have colors and you cannot "see" how graphical elements can integrate with each other.
So, my solution is to do a gimp low resolution mock up with real graphics, texts and logos, witch I duplicate and modify for sub pages and detail pages.

Kudos, Christian. Modules and similar are also detailed in Nathan Curtis' new book (EightShapes.com, D.C., US); seems you've brought us full circle . . . I remember finding Visual Basic so easy to use as it broke down every element into re-usable parts . . . then we lost the trees for the forest, now we're back. Your approach is also wonderful when working directly with users doing participatory prototyping (e.g., Marc Rettig, "Tiny Fingers" article). Lastly, this is a great opportunity for state-based screens (AJAX'y, etc.). Thank you for sharing this!

It brings a lot to the visual side of designing...

I always use paper as a starting point for a new project - I think some people miss the point of drawing the layout on paper first.
You can draw a new layout in less than 30 seconds on paper - to do the same in photoshop will take a lot longer!
When you have a layout that works on paper, then spend more time in photoshop making the actual design that works with the layout & not the other way round.