Great websites start on paper

Created by Brian Smith
November 18, 2015

Creating a website is easy. In fact, you can create a website in less than an hour with a wide variety of online tools like Squarespace, often without even providing a credit card. For many people, this is all they need. Everything is pre-made for you – simple drag and drop, pre-selected colors, and more – and you’re guaranteed at least an adequate website. But if you’re looking to make something truly great, highly functional, and perfectly suited for your (or your client’s) needs, you need to start on paper with low fidelity wireframes.

Like literal paper. With real pens or pencils. It seems like everyday there is a new product released guaranteed to speed up your wireframe and design process. Many of which work really well, but there’s no replacement for putting pen to paper. Let’s take a look at a few key reasons we need to be using more trees everyday… and planting them, too.

Non-Tech Savvy Team Members Can Give Valuable Input

This one is huge. Just because someone doesn’t have the technical know-how to push pixels around a screen, doesn’t mean they don’t have anything to contribute to the wireframing process. When we start a website, the entire team gathers around a table with pens and paper, and we start sketching. Again, this method includes everyone. You don’t have to be DaVinci to draw square boxes, circles, and lines. Anyone can start experimenting with how content should flow. You just have to be willing to consider yourself a designer and believe that your ideas are valuable. People are often so scared and nervous and say things like, “I can’t draw” – and the reality is that most of us are terrible at drawing – but that’s OK. Even if the lines are crooked or the stick figures look like deformed zombies, it’s the way you think, approach content, and convey those ideas that matters.

Disregard For Design Patterns

Disregard For Design Patterns

Without drag-and-drop boxes in Illustrator or Sketch, or quick access to Dribbble or Behance, people have an intriguing way of distancing themselves from traditional design patterns. When our team puts hand-to-paper, we come up with some “unique” stuff. For example, we had a 7-min sketch and we told the team to come up with something “different.” One of our web developers showed us this navigation:

Even when you side-step to a pretty rough idea, you’re still stepping in a direction towards directly solving the problem at hand; and if you can distance yourself from shortcuts you get a little closer to an intelligent solution.

Focus on Content

When you dive right into making color decisions or adjusting drop shadows before carefully planning the structure of your website, you run the risk of letting the design dictate the content. Unless you’re a design agency, probably the most valuable thing you have for your website will be the content, and not the visual appeal. Taking wireframing seriously will force you to thoughtfully consider the organization of your content.

Reviewing Your Paper Wireframes

When wireframing, it’s important to develop a review process that works for you and your team. You should set clear rules about how the team will make decisions on which pieces of the wireframe work and don’t work. Here’s a look at how our wireframing process runs:

  1. We present some background. This typically includes user research, competitors sites, sites the client likes, and our general website questionnaire. Most importantly we review the goals for the site. This helps to make sure we are sketching to solve a problem.
  2. We select a page from our sitemap and discuss the goal for that specific page.
  3. We timebox our sketching to only 7 minutes. This gives us constraints to work quickly and force our creative minds not to overthink or over draw.
  4. We present our wireframe to the team, walking them through our thoughts on how we approached solving the problem or reaching the goal. We describe how things would interact, react, and feel. We let everyone present before diving into critique. This allows us to keep moving quickly and not focus on things like “is that even possible” or “that won’t work” or general opinions that are not useful at this phase. Let the ideas fly without concern for critique.
  5. Once everyone has presented, we give the team 5 sticker votes. Each person votes for the 5 elements from the wireframes they like the most (including their own). When everyone is done voting each person talks about what they voted for and why.

Now It’s Your Turn To Start Wireframing

We’ve created a simple but effective paper wireframing tool. That will allow you and your entire team to create solid wireframes that will serve as the foundation of a truly great website.

Download The Bamboo Toolbox Paper Wireframes

Let us know how it’s working for you.

Work with us