Blogg


Tankar kring user experience, service design och effektstyrning

How paper wireframing will make you a better designer

Alexander Skogberg

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.

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 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.

It's including

I've been a member of many cross-functional teams in lots of projects, 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. They've explained their frustration with designers that interact with them too seldom and suddenly hand over bloated Photoshop files.

It's accessible

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.

Just grab some paper sheets from the nearest office printer, get some thin markers, and start drawing!

It's shareable

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.

Tip: Apps like Genius Scan and Post-it Plus are great for taking photos of sketches on paper.


One day of productive paper wireframing when working on Feelgood’s customer portal. During the early stages of the design process, I drew paper wireframes and reviewed them with the team several times per week.
 

It's powerful

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.

Seeing is more powerful than hearing.

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 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.

Tips for drawing paper wireframes

Here's some tips I've picked up for actually drawing on paper.

Get the right gear

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.

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.

The sketchpad I’m using was included in the course I took in 2012. It’s not clearly branded, so I don’t know where you can get this exact model.

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.

I prefer rollers from Tipp-Ex.

Thin black markers

I'd recommend getting 0.7 and 0.5 millimeter black markers from Pilot. They are affordable and don't dry up until they are, almost, completely empty.

The 0.5 millimeter marker is best used for writing text and drawing minor details thanks to its higher precision. The 0.7 marker is suitable for drawing everything else. Nowadays, I solely use 0.5 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:

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

Wireframes drawn using markers will also look much better when photographed or scanned thanks to the high contrast compared to lead pencils.

Practice sketching the basics

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:

  • Relax and loosen your shoulders.
  • Keep your back straight (you'll thank me later).
  • Put the tip of your marker on the paper before moving it.
  • Draw at a consistent speed.
  • After reaching your end point, lift the marker and slow down while in the air.

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.

Remember: There are no shortcuts. Practice, practice and practice drawing those lines and circles!

Draw, scan and copy templates

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.

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.

Add the right type and amount of details

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:

  • The client's logo (definitely learn how to draw this).
  • Pieces of text drawn in different styles (serif and sans-serif).
  • Logos of potential other brands to be featured.
  • Icons in addition to just labels on buttons and links.

Tip: If you need inspiration for drawing icons, visit fontello.com and take your pick.

Notice the details like the logo, realistic copy, uppercase and lowercase strings of text and a photo of two people partying (really hard).

Tip: If you don't want to write text, draw some Morse code lines instead. Just never write lorem ipsum text.

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:

  • Cars, busses and boats.
  • Different types of houses.
  • Smartphones, tablets and laptops.
  • People (stick figures with smiley faces is more than enough).
  • Trees, bushes and skies with clouds and birds.

Write annotations

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:

  • How a disabled element will become active again.
  • What clicking certain elements will trigger.
  • Different supported formats for an input field.
  • Variations of pieces of content.
  • Dynamic updates when entering input.
  • Likely interface animations.

The annotations for this wireframe are written for the developers, hence the technical terminology.

Name and date each wireframe

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.

Wrapping up

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!

Oh, by the way! If you need to move on from paper wireframes in your project, please read my post How to make great wireframes in Sketch.

The End of the “End User”

Ingrid Domingues

The words we use create preconceptions in people's minds. Therefore, I suggest a bold shift in how we name users. Let’s change “Key Users”  to proxy users and “End Users” to users. By doing so we can help people in purchasing, planning and development of digital solutions to make a vital focus shift.

In my 30+ years of practice in the world of digital services there have been huge developments. I started as a programmer in the 80's. At that time we were building mainframe systems. Most of the people affected by the solutions did not have direct access to systems, rather it was programmers and sysops that were the users. (Yes!)  So, using the word “end users” as the name for those affected by the systems was both natural and appropriate at that time. Today, not so much.

Today, you and I can choose which services to use and how to use them. The services are highly interactive, hosting and encouraging conversations and learning. Development of successful services is something that is achieved through close interaction between skilled development teams and users. Not proxies.

Still, a lot of administrative solutions today make users do the most horrible things. There are also solutions in the public sector that force employees and citizens to struggle to outsmart the system. Solutions causing failure demand and stress in the digital workplace.

A sad misunderstanding

I believe that one important reason for this landscape of “shitty” solutions, actually is the sad misunderstanding about the types of “users” in the purchase, planning and development of digital solutions. Proxy users, which can mean key users, managers, salespersons or others, are usually given the predominant role. This is because business people actually believe that “Key users” have a better understanding of user needs, than mere “end users” do.

I am not saying that proxy users lack knowledge. On the contrary, they can give an overview of recurrent problems. But they lack the goldmine of information you need to create great design, namely how users do, why users do as they do, and why certain problems occur. Proxy users can direct you to where to look closer, but are useless to give the details needed.  

Understand why

If you ever are going to build a service that users truly enjoy and appreciate, you need to understand user values, expectations and WHY they have the problems they’ve reported. This means meeting users. In their context. And using that understanding of needs and expectations for any design and management decision on users daily life.

Meet with proxies to gain an overall understanding and get insights on where to focus. Meet with users to gain insights for innovation.

Let us end the era of “end users”!

The man behind ”Service Design Thinking” joins FBTB19

Ola Nilsson

If you want to go from Design thinking to Design Doing – this is it! We're happy to, for the first time, welcome Marc Stickdorn to FBTB!
Marc is Co-founder and CEO of More than Metrics. With a background in strategic management and service design, he helps organizations to sustainably embed service design in their structures, processes, and culture.

He is editor and co-author of the award-winning book “This is Service Design Thinking” (2010) and one of the four main authors of it's sequel “This is Service Design Doing” and “This is Service Design Methods”. Marc regularly speaks at conferences on service design and entrepreneurship. He teaches service design at various universities and gives public and exclusive executive courses. Since many years, he pursues a PhD at the University of Erlangen-Nuremberg in Germany in information systems based on design science in which he developed a new mobile ethnographic research approach. 


Marc Stickdorn and Kim Goodwin are presented, and eight more will be disclosed in the months to come. As our Innovator tickets are already sold out, sign up to the conference today for a chance to see Marc Stickdorn, Kim Goodwin and all the other UX, Service Design and Innovation legends live on stage on May 3, 2019.

Get your FBTB19 tickets here!

Välkommen, Nils Hansen!

Ola Nilsson

Nils Hansen är en av flertalet nya ansikten på inUse Stockholmskontor. Vi växer och vi gör det med kvalitet, välkommen Nils!

User Experience Designer Nils Hansen har haft ett gott öga till oss ett bra tag.

– Jag har följt inUse och alltid tyckt att det kommit fram tydliga och spännande saker därifrån. Men det var först när jag arbetade med några från inUse som jag insåg vilken bra arbetsplats det är. Kompetensen jag såg hos dem, och det tydliga fokuset på kompetensutveckling och välmående bland de anställda fick mig att söka.

Vad driver dig och vad är dina styrkor?

– I grunden tänker jag att min största drivkraft är att lösa problem. Jag motiveras väldigt mycket av att kasta mig in i nya utmaningar. Men jag är verkligen inte en person som bara kör på mitt eget race oavsett utan älskar och behöver utbytet med andra för att verkligen trivas.

– Generellt så är jag väldigt nyfiken – på hur saker fungerar och vad som gör något bra eller mindre bra. Jag skulle nog säga att det är min allra största styrka.

Vad har du gjort tidigare som betytt mycket för dig?

– Jag medverkade i ett projekt där jag utforskade hur man på bästa sätt kunde minska ensamheten bland studenter boende i studentkorridorer i Oslo. Att möta studenter som totalt öppnade sig för oss kring deras ensamhet och tillsammans med dem arbeta fram hur man på bästa sätt kunde göra situationen bättre kändes väldigt betydelsefullt och viktigt.

Vad är ditt drömprojekt?

– Jag hade gärna velat utforska hur man kan hjälpa människor att göra med klimatsmarta val i sin vardag. Det hade varit en spännande utmaning där jag hade velat prata med väldigt många olika människor och arbeta med många olika discipliner. En mer spännande utmaning hade jag inte kunnat tänka mig.

 

Vill du också jobba på inUse? Kolla in våra lediga tjänster!

Kim Goodwin returns to FBTB

Sara Doltz

The most suitable title that comes to mind when thinking about Kim Goodwin is Design leadership guru. With over two decades of consulting, running in-house businesses, writing books and being a vivid public speaker, she has truly become one of our favourites.

This is not the first time Kim Goodwin takes the stage at From Business to Buttons. She has been with us two times before; in 2015 she did one of the most appreciated talks in FBTB history on the China stage.

Kim has spent 25 years in Service Design and UX, helping businesses build their internal design capabilities through coaching and organizational change management. She is based near San Francisco, but whether she’s herding cats in conference rooms or photographing wildlife in places with no Internet access (check out her Instagram for mind blowing captions!), she is regularly on the move as she speaks and teaches at conferences all around the world. 

Kim is also the bestselling author of Designing for the Digital Age. Published in 2009, it’s still considered a, to quote Alan Cooper, “A complete handbook for an entire profession”.

Her talk at FBTB will be about Design Systems, but then again, not really:

– My talk is not on design systems exactly. It’s more: how do we think of the design function itself as a something like a design system, with both high-level and low-level components? 

– In other words, the shared “library” your team needs is not just a component library — it’s a set of foundational values and principles, as well as a set of tools for HOW you work. In part, I wanted to talk about this because I see a lot of teams jumping to design systems as a magic fix when they don’t have some of the foundational pieces in place.


Kim Goodwin is the first speaker to be presented, and nine more will be disclosed in the months to come. As our Innovator tickets are already sold out, sign up to the conference today for a chance to see Kim Goodwin and all the other UX, Service Design and Innovation legends live on stage on May 3, 2019.

Get your FBTB19 tickets here!