Whilst there are many types of Prototyping software available (HotGloo, Axure or LovelyCharts for example) I’ve always found it very difficult to jump straight to these types of computer software when at the very beginning of an idea for a new website, homepage redesign or app. I would rather sketch out on paper first and then iterate from there.
I was recently intruiged by a post from Peiter Buick called The Messy Art of UX Sketching – in which Peiter takes us through a different approach to wireframing. Fortunately, Peiter has a much better eye for sketching UI. I could only dream of producing arts of work like that!
For me, the downside to a sketch is that it gets to a point where it can become completely unreadable by other people. By the time it is covered in scribbles and notes it has to be redrawn. So, whilst I had to skip over the more advanced UI suggestions he makes, I really liked his suggestion of using post it notes.
I decided to put it the suggestion to the test for a new website homepage I am currently working on. The only tools I need are some A4 paper, some coloured notes, a ruler and a fat marker. The A4 sized paper isn’t far off representing the dimensions of a web page so it is ideal.
From there, I started drawing the elements I required onto the post it. Just a quick scribble is all I can manage! At this stage, it’s just about creating a basic layout.
My homepage will have a carousel of images. This took up the entire post-it. And for smaller elements you can quickly use a ruler (as Peiter suggests) to tear your post-it down to size. This worked well for elements such as a newsletter sign up box, or the classic MPU 300×250 proportion. One thing to bear in mind that you want to retain the sticky element of the post it to place on your A4. But it’s a simple case of size up the paper, hold the ruler in place and tear down where required.
It was a simple case of doodling and tearing and placing the parts together on a page. If I didn’t like the way something looked, or the its size, it was simply a case of tearing another. This gave a great insight as to how the homepage may look, and also it acted as discussion for moving things around.
When I was happy with everything, it was a simply case of placing it in the photocopier! Not as elegant as Peiter’s examples, but still time and effort saving.
Let me know what you think!