How to create a blueprint for a website on paper?

Question

I have been doing web design for a couple of years now. I am trying to design it on paper but am not the best at it.

Could you please give me some advise on how to blueprint it? How can I create wireframe-like mockups of a website on paper with a pencil or pen?

Answer 1

I've used a method where the boxes are actually pieces of post-it notes. Today I use cellphone sized ones because they are usually big enough. You can cut them in shape put text on them. But the best function is that you can move them about. Even better your client can move them about.

The thing is the mockup stage can not look too finished. People who are not used to your workflow might otherwise think its final and not suggest changes. Remember it might be a quick thing for you in Photoshop, but it may not look like that to somebody not trained in this thing.

Its even possible to print on post it notes. So you could have a cache of pre-printed notes for things like embedded video containers, maps etc. Let your prototypes look like ones.

Answer 2

To be honest, you may be overthinking it, It really is just boxes on paper. Let force flow from within you. Start with the main page and build out from there.

If you need structure some structure on paper, this site has some resources.. http://skysisterstudio.com/10-best-wireframe-printables/

Answer 3

Something even better than post-it notes: "Magic whiteboard paper".

Basically, it's a type of thin white plastic paper with just enough static electricity that it sticks gently to any flat surface, without glue or mess:

• Since it's static electricity not glue, you can move it around as many times as you like.
• Since it's basically paper, you can buy a roll or a stack of sheets and cut out or fold to whatever sizes and shapes you need.
• Since it's white plastic, you can write on it with erasable whiteboard markers and erase or change what you write as much as needed.
• Since it comes in a variety of sizes, you can make A4 size, table size or even wall size wireframes, depending on the size of the group you're working with.
• Since the static electricity is on both sides, apparently you can stick paper on top of it, so you could use it alongside printable wireframe elements for things that can't vary.

The only downside is, it's quite fiddly - for example, it loves to fold over then stick to itself. There's a risk of getting distracted by the stuff. But if you can tame it, it's great.

There are quite a few companies that make the stuff now, but this one seems to be the original. It's more expensive than post-its, but it's reusable, so it's not bad value for money.

---

I can't find any pictures of it being used for wireframes, so instead here's it being used on a plane and on a shed (from the official Facebook page):