2

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?

  • 1
    By "blueprint" do you mean "wireframe"? Draw boxes and lines. What trouble are you having? – Lauren-Reinstate-Monica-Ipsum Apr 6 '14 at 11:57
  • Hi Lauren Ipsum, what's happening is I'm just having trouble with the steps of design and putting down on paper before photoshop. And yes. Wireframe. – jaydz49 Apr 6 '14 at 12:04
  • This is about the conceptual process. It is highly subjective, and it is a massive challenge to create something non-interactive representing the interactive. This post might be of interest, you do not have to use these techniques testing on other people, you can play with it yourself: graphicdesign.stackexchange.com/questions/27658/… – benteh Apr 6 '14 at 12:27
  • This is more related to UX Design so would likely be better off at UX.se but even so, it's still a rather broad question. In general, though, you are sketching. Just as with any design project, the initial phase is just lots of sketching to get lots of ideas out as fast as you can. – DA01 Jul 11 '14 at 16:58
10

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.

  • Very cool, that we have similar ways of working conceptually; see link in my comment above :) – benteh Apr 6 '14 at 12:36
1

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/

1

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):

enter image description here enter image description here

  • I have used this and its fine, also used: magnets, pins , scotch tape and plain glue for fastening. There's something low tech about using postit notes that is always available and the client does not feel so intimidated about special tools. But yeah we use this paper in the machine design lab when we introduce the gallery method. Translucency is a problem tough as you can not cover areas with new revisions, and another problem is that the surface used can not be folded neatly ad moved about. – joojaa Jul 11 '14 at 14:15
  • AKA: a whiteboard. – DA01 Jul 11 '14 at 16:59
  • @DA01 AKA: lots of small whiteboards that you can move around freely like post-it notes. – user56reinstatemonica8 Jul 11 '14 at 17:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.