{"id":15928,"date":"2018-08-30T15:19:16","date_gmt":"2018-08-30T14:19:16","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=15928"},"modified":"2020-09-03T12:40:42","modified_gmt":"2020-09-03T11:40:42","slug":"paper-wireframing-will-make-better-designer","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/paper-wireframing-will-make-better-designer\/","title":{"rendered":"How Paper Wireframing Will Make You a Better Designer"},"content":{"rendered":"

There are lots of great tools for drawing wireframes today. However, I still prefer my good ol\u2019 paper wireframing kit. In this post I\u2019ll tell you why and explain how paper wireframing will make you a better designer.<\/strong><\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

In 2012 I was planning on taking my wireframing skills to the next level. I had gotten the excellent app Paper by FiftyThree for my new iPad and had ordered two well-reviewed tablet sketching pens all the way from the US.<\/p>\n

Around this time, I also took a paper sketching course by the Swedish designer M\u00e5rten Angner. Taking this course completely changed my approach to making wireframes and over the years it has made me a better designer.<\/p>\n

Let me tell you why paper wireframing is a must-have skill.<\/p>\n

It\u2019s including<\/h2>\n

I\u2019ve been a member of many cross-functional teams in lots of projects over the years, and I\u2019ve learnt that making paper wireframes together makes team members feel included. They appreciate having their voices heard and being able to contribute right from the start.<\/p>\n

In some cases, developers have even thanked me for this approach to wireframing. They\u2019ve explained their frustration with designers that interact with them too seldom and suddenly hand over bloated Photoshop files.<\/p>\n

It\u2019s accessible<\/h2>\n

Not everyone is experienced in graphic editors or prototyping apps like Sketch and Photoshop, but everyone can draw on paper!<\/p>\n

Some might insist that they are terrible at drawing, and while that often is true it\u2019s not important for this type of design work.<\/p>\n

<\/div>
<\/svg><\/div>

\"Just grab some paper sheets from the nearest office printer, get some thin markers, and start\u00a0drawing!\"<\/p><\/span><\/blockquote>\n

It\u2019s shareable<\/h2>\n

Paper wireframes are easy to share. Just scan them and print some copies using your office printer before handing them out to whomever benefits from seeing them. Having your own copies makes it easier to do edits on your own and if someone loses their copies it doesn\u2019t matter.<\/p>\n

It\u2019s a good idea to take photos of your wireframes and upload them to Dropbox, Google Drive or add them to a project in Marvel<\/a>.<\/p>\n

Tip: Apps like Genius Scan<\/a> and Post-it Plus<\/a> are great for taking photos of sketches on\u00a0paper.<\/em><\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

One day of productive paper wireframing when working on Feelgood\u2019s customer portal<\/a>. During the early stages of the design process, I drew paper wireframes and reviewed them with the team several times per\u00a0week.<\/p>\n

It\u2019s powerful<\/h2>\n

When I started drawing paper wireframes on a regular basis in projects, I noticed three major positive effects it had.<\/p>\n

First, issues are caught earlier. I learnt that the teams I was in started identifying minor and larger issues much sooner than I was used to from before.<\/p>\n

For example: It\u2019s one thing to talk about an e-commerce checkout page, but when you start sketching you will identify time-consuming technical challenges, tricky little details and things no one even knew about.<\/p>\n

<\/div>
<\/svg><\/div>

\"Seeing is more powerful than\u00a0hearing.\"<\/p><\/span><\/blockquote>\n

Second, paper wireframing saves a lot of time, money and energy. If you identify and solve issues on paper, it\u2019s much cheaper compared to doing it well into development. Then, even the smallest alteration can be costly and frustrating.<\/p>\n

Third, since I started drawing paper wireframes and used them when presenting design not even once has anyone asked me the (often judging) question \u201cIs it supposed to look like that?\u201d. Everyone knows it\u2019s work in progress.<\/p>\n

I\u2019ve also noticed that drawing paper wireframes is great for driving political decision. When a feature goes from words to paper early on, it gets more \u201creal\u201d for a lot of stakeholders. This often acts as a catalyst for decision making.<\/p>\n

Tips for drawing paper wireframes<\/h2>\n

Here\u2019s some tips I\u2019ve picked up for actually drawing on paper.<\/p>\n

Get the right\u00a0gear<\/h3>\n

When you\u2019re drawing on paper you\u2019re not that dependent on gear, but there are some stuff you should invest in; a sturdy sketchpad, some correction tape rollers and a few thin black markers.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

My basic paper wireframing kit. I\u2019ve been using the sketchpad since 2012. Can\u2019t design without\u00a0it!<\/p>\n

Sketchpad<\/strong>
Make sure to get a sketchpad with a clip-on and reinforced edges. A clip-on is great for easily adding and removing paper sheets. Reinforced edges will reduce wear and tear, since you\u2019ll likely be taking the sketchpad it in and out of your bag a lot.<\/p>\n

The sketchpad I\u2019m using was included in the course I took in 2012. It\u2019s not clearly branded, so I don\u2019t know where you can get this exact model.<\/p>\n

Correction tape roller<\/strong>
When I started drawing paper wireframes, I didn\u2019t know correction tape on rollers even existed. Now, I depend on this brilliant little invention almost as much as on my Macbook or iPhone. It removes misses easily and dries immediately after applying it.<\/p>\n

I prefer the rollers from Tipp-Ex.<\/p>\n

Thin black markers<\/strong>
I\u2019d recommend getting 0.7 mm and 0.5 mm black markers from Pilot. They are affordable and don\u2019t dry up until they are (almost) completely empty.<\/p>\n

The 0.5 mm marker is best used for writing text and drawing minor details thanks to its higher precision. The 0.7 mm marker is suitable for drawing everything else. Nowadays, I solely use 0.5 mm black markers since I prefer their high precision.<\/p>\n

It might also be worth getting red and green markers for making annotations of approved and disapproved design choices in your wireframes.<\/p>\n

Why not just use a lead pencil and good rubber?<\/strong>
There are two reasons for using markers instead of lead pencils and rubbers:<\/p>\n

\"Using markers will make you more focused while drawing and thereby you\u2019ll make less mistakes. You\u2019re always alert because screwing up is costly (unless you have a correction tape\u00a0roller).\"<\/span><\/p>\n

Wireframes drawn using markers will also look much better when photographed or scanned thanks to the high contrast compared to lead pencils.<\/p>\n

Practice sketching the\u00a0basics<\/h3>\n

Most of my paper wireframes consist of two elements; straight lines and round circles. If you master drawing these two elements, you\u2019re on easy street.<\/p>\n

Some tips for drawing straight lines and circles:<\/p>\n

    \n
  1. Relax and loosen your shoulders<\/li>\n
  2. Keep your back straight (you\u2019ll thank me later)<\/li>\n
  3. Put the tip of your marker on the paper before moving it<\/li>\n
  4. Draw at a consistent speed<\/li>\n
  5. After reaching your end point, lift the marker and slow down while in the air<\/li>\n<\/ol>\n

    Drawing circles is trickier. I recommend \u201cdrawing\u201d the circle two or three times in the air before drawing it on your sheet of paper. See it as warming up before lifting weights at the gym.<\/p>\n

    <\/div>
    <\/svg><\/div>

    Remember: There are no shortcuts. Practice, practice and practice drawing those lines and\u00a0circles!<\/p><\/span><\/blockquote>\n

    Draw, scan and copy templates<\/h3>\n

    When I\u2019m drawing wireframes, I usually draw the outlines of a smartphone or a web browser window before drawing the rest of the wireframe inside these outlines.<\/p>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    The Safari web browser and my iPhone 8 were used as models when drawing these templates.<\/p>\n

    Drawing outlines like this gives people viewing your wireframes more context. If they\u2019re gonna look at wireframes of a future smartphone app, it simply makes sense to draw the surrounding smartphone too.<\/p>\n

    Drawing outlines for each sheet of paper does quickly get very tiresome, so I always draw one empty outline that I scan and print copies of. This saves a lot of time and energy (and ink in my pens).<\/p>\n

    Add the right type and amount of\u00a0details<\/h3>\n

    While I think paper wireframes should focus on content, layout and order, adding some nice details can elevate their status as deliverables and help steer the later graphic design work.<\/p>\n

    Examples of nice details can be:<\/p>\n