Published on <a href="https://blog.prototypr.io/how-paper-wireframing-will-make-you-a-better-designer-5a57db8dca13?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Alexander Skogberg 
—
This post was originally published at <a href="https://alexanderskogberg.com/2018/04/paper-wireframing-will-make-you-better-designer/">alexanderskogberg.com</a>
—
There are lots of great tools for drawing wireframes today. However, I still prefer my good ol’ paper wireframing kit. In this post I’ll tell you why and explain how paper wireframing will make you a better designer.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*04Q-JJOG7o-yv7tGl1nStQ.jpeg">
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.
Around this time, I also took take a paper sketching course by the Swedish designer Mårten Angner. Taking this course completely changed my approach to making wireframes and over the years it has made me a better designer.
Let me tell you why paper wireframing is a must-have skill.
<h3>It’s including</h3>
I’ve been a member of many cross-functional teams in lots of projects over the years, and I’ve 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.
In some cases, developers have even thanked me for this approach to wireframing. They’ve explained their frustration with designers that interact with them too seldom and suddenly hand over bloated Photoshop files.
<h3>It’s accessible</h3>
Not everyone is experienced in graphic editors or prototyping apps like Axure, Balsamiq, Sketch or Photoshop, but everyone can draw on paper!
Some might insist that they are terrible at drawing, and while that often is true it’s not important for this type of design work.
<blockquote>Just grab some paper sheets from the nearest office printer, get some thin markers, and start drawing!</blockquote>
<h3>It’s shareable</h3>
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’t matter.
It’s a good idea to take photos of your wireframes and upload them to Dropbox, Google Drive or add them to a board in InVision.
<blockquote>Tip: Apps like <a href="https://itunes.apple.com/us/app/genius-scan-pdf-scanner/id377672876">Genius Scan</a> and <a href="https://itunes.apple.com/us/app/post-it-plus/id920127738?mt=8">Post-it Plus</a> are great for taking photos of sketches on paper.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/660/1*T5SpIGBWFDKhd4g0E_z3kw.jpeg">One day of productive paper wireframing when working on <a href="https://alexanderskogberg.com/portfolio/customer-portal-health-company-feelgood/">Feelgood’s customer portal</a>. During the early stages of the design process, I drew paper wireframes and reviewed them with the team several times per week.
<h3>It’s powerful</h3>
When I started drawing paper wireframes on a regular basis in projects, I noticed three major positive effects it had.
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.
For example: It’s 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.
<blockquote>Seeing is more powerful than hearing.</blockquote>
Second, paper wireframing saves a lot of time, money and energy. If you identify and solve issues on paper, it’s much cheaper compared to doing it well into development. Then, even the smallest alteration can be costly and frustrating.
Third, since I started drawing paper wireframes and used them when presenting design not even once has anyone asked me the (often judging) question “Is it really supposed to look like that?”. Everyone knows it’s work in progress.
I’ve 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 “real” for a lot of stakeholders. This often acts as a catalyst for decision making.
<h3>Tips for drawing paper wireframes</h3>
Here’s some tips I’ve picked up for actually drawing on paper.
<h4>Get the right gear</h4>
When you’re drawing on paper you’re 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.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*GQcjIcQK1Nw668ihPrW8FA.jpeg">My basic paper wireframing kit. I’ve been using the sketchpad since 2012. Can’t design without it!
Sketchpad 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’ll likely be taking the sketchpad it in and out of your bag a lot.
Correction tape roller When I started drawing paper wireframes, I didn’t 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.
Thin black markers I’d recommend getting 0.7 mm and 0.5 mm black markers from Pilot. They are affordable and don’t dry up until they are (almost) completely empty.
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.
It might also be worth getting red and green markers for making annotations of approved and disapproved design choices in your wireframes.
Why not just use a lead pencil and good rubber? There are two reasons for using markers instead of lead pencils and rubbers:
<blockquote>Using markers will make you more focused while drawing and thereby you’ll make less mistakes. You’re always alert because screwing up is costly (unless you have a correction tape roller).</blockquote>
Wireframes drawn using markers will also look much better when photographed or scanned thanks to the high contrast compared to lead pencils.
<h3>Practice sketching the basics</h3>
Most of my paper wireframes consist of two elements; straight lines and round circles. If you master drawing these two elements, you’re on easy street.
Some tips for drawing straight lines and circles:
<ol>
<li>Relax and loosen your shoulders</li>
<li>Keep your back straight (you’ll thank me later)</li>
<li>Put the tip of your marker on the paper before moving it</li>
<li>Draw at a consistent speed</li>
<li>After reaching your end point, lift the marker and slow down while in the air</li>
</ol>
Drawing circles is trickier. I recommend “drawing” 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.
<blockquote>Remember: There are no shortcuts. Practice, practice and practice drawing those lines and circles!</blockquote>
<h3>Draw, scan and copy templates</h3>
When I’m 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.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*zwq5mcG3nEwNhkrgoe91vw.jpeg">The Safari web browser and my iPhone 8 were used as models when drawing these templates.
Drawing outlines like this gives people viewing your wireframes more context. If they’re gonna look at wireframes of a future smartphone app, it simply makes sense to draw the surrounding smartphone too.
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).
<h3>Add the right type and amount of details</h3>
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.
Examples of nice details can be:
<ul>
<li>The client’s logo (definitely learn how to draw this)</li>
<li>Pieces of text drawn in different styles (serif and sans-serif)</li>
<li>Logos of potential other brands to be featured</li>
<li>Icons in addition to just labels on buttons and links</li>
</ul>
<blockquote>Tip: If you need inspiration for drawing icons, visit <a href="http://fontello.com/">fontello.com</a> and take your pick.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*0iD6Ly1GaTa7I-_eu4rcSw.jpeg">Notice the details like the logo, realistic copy, uppercase and lowercase strings of text and a photo of two people partying (really hard).
<blockquote>Tip: If you don’t want to write text, draw some Morse code lines instead. Just never write lorem ipsum text.</blockquote>
For drawing photos, empty rectangles with a diagonal lines running through them is boring. Embrace your inner child and draw like you did in kindergarten when you’re drawing a photo.
Practice drawing simple variants of everyday objects like:
<ul>
<li>Cars, busses and boates</li>
<li>Different types of houses</li>
<li>Smartphones, tablets and laptops</li>
<li>People (stick figures with smiley faces is more than enough)</li>
<li>Trees, bushes and skies with clouds and birds</li>
</ul>
<h3>Write annotations</h3>
Paper wireframes lack the interactivity of clickable prototypes, but just adding some annotations can go a long way in explaining behaviour, logic and dependencies for the developers in your team.
I often write annotations explaining:
<ul>
<li>How a disabled element will become active again</li>
<li>What clicking certain elements will trigger</li>
<li>Different supported formats for an input field</li>
<li>Variations of pieces of content</li>
<li>Dynamic updates when entering input</li>
<li>Likely interface animations</li>
</ul>
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*HLA7FU2RFi-mXQW7OZQ5Xw.jpeg">The annotations for this wireframe are written for the developers, hence the technical terminology.
<h3>Name and date each wireframe</h3>
For every project I’m working on, I usually end up with a large stack of paper sheets. That’s why I at the top of each sheet write a name of what I’m drawing and on which date I drew it.
Organising my wireframes like this has saved me a lot of time over the years.
<h3>Wrapping up</h3>
Paper wireframing is a powerful, time-saving and accessible skill for making great design while including team members and stakeholders in the process. Vector graphic editors and prototyping apps are definitely sweet, but not always easier to get started with.
In my opinion, this type of wireframing is always suitable at some point during your design process. Take advantage of it!
Do you have any advice on this topic you think I should include in this post? Let me know in the comment section.
Happy paper wireframing!
/Alex
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=5a57db8dca13" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/how-paper-wireframing-will-make-you-a-better-designer-5a57db8dca13">How paper wireframing will make you a better designer</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

How paper wireframing will make you a better designer

Top Stories