Sketching Interfaces

We started today’s lecture with talking about wireframes.

It pays to start on paper.

Paper allows for fast thinking, as well as quick idea generation and easy iteration. Making wireframes on paper first is also cheap, and allows you to communicate ideas early on in the process.

 

Why Start on Paper?

Diverge to converge.

Paper wireframes are low fidelity, with many outputs with easily attainable tools (pen and paper), whereas jumping right to a digital wireframe/mockup is higher fidelity, with fewer outcomes, and with necessary access to a computer.

Sketching is thinking.

 

Sketching Exercises

We were then challenged with some sketching exercises. We had a list of things to draw, these included:

  • A house
  • A speech bubble
  • A camera
  • A padlock
  • A heart
  • A magnifying glass

Paul called out an item at a time, and we first drew each thing in 5 seconds

 

 

Then in 10 seconds…

 

 

Then in 20 seconds.

 

 

I quite enjoyed this little challenge, however, I did find myself getting stressed out with the time limit and rushing every sketch, every single time… However, the objects depicted in the sketches are easy to recognise, no matter how quickly I drew them – this was a good way to demonstrate just how easy it is to iterate some ideas in no time at all.

 

We were then tasked with sketching some interfaces. These included

  • Instagram app
  • Smartwatch
  • Instagram desktop

Unfortunately, I forgot to take a photograph of mine, and it got crumpled in my bag on the walk home. However, I found this exercise to be very useful, as we also only had a small amount of time to draw each wireframe. I used my knowledge of wireframing to sketch the contents of each UI, and used some extra tips that Paul gave us today in the process. I used a thick sharpie, as well as focussing on getting the lines straight.

 

Miller’s Law

The average person can keep only seven (-1, or +2) items in their memory at one time. However, we mustn’t use the magic number seven to justify unnecessary design limitations.

For this, we should use chunking to organise content into more easily digestible sections.

 

Thoughts:

I think what I learnt today will make me reconsider my frequent use of pencil when drawing wireframes. I like to be able to rub out my mistakes, and redo them – but I can always re-draw some refined wireframes after getting some initial, quick-fire ideas out onto paper first. I also think it would be a good idea to time myself with initial wireframes moving forward – just like with crazy 8’s, I could give myself 15 minutes to draw as many potential ideas as possible.