You wouldn’t expect mobile developers to spend a lot of time using pen and paper. Shouldn’t we be on the cutting edge, using lasers and cyborgs to speed up our design?

We are on the cutting edge. But sometimes that just means we’re using scissors.

That’s because paper-based prototyping is an important part of our design process. Paper-based prototyping is just what it sounds like: designing mockups of mobile apps using paper and pencil. Designing this way has real advantages over designing on the computer, with the perennial favorites “time and money” at the top of the list.

How can designing on paper possibly be state-of-the-art? Let me explain.

• It’s fast and easy. With mobile interfaces becoming more sophisticated, there’s often no time to build refined prototypes of every permutation of every screen in your interface. Working on paper allows you to create mockups in a matter of seconds.
• It’s cheap. No complex UI modeling software is required; no labor hours are spent coding or working in Photoshop. All you need are paper, pencils, and ideas.
• It’s focused. Working on paper keeps everyone – developers, designers, and clients – focused on functionality, not looks. When you’re working on Post-Its, it’s impossible to get distracted by your app’s “look and feel.”
• It encourages collaboration. Try gathering 10 people around a laptop to brainstorm. Hmm. Now gather 10 people around a table, show them your drawings, given them some paper and sticky notes … and watch the ideas start flying.
• It stimulates creativity. If you were designing a logo, you wouldn’t start in Photoshop. You’d probably start by sketching, evolving various ideas naturally before you commit them to pixels. Prototyping on paper opens creative doors in the same way.
• It encourages robust usability testing. Sometimes, a UI isn’t tested thoroughly because it’s just painful to design over and over. When you work on paper, you’re not hung up on time invested in creating tons of PSD documents. Revision is fast and painless.
• It gives insight into usability. Watching people interact with your drawings is totally different than emailing them a PSD file and getting back their notes. You can actually watch their minds work – see how your design fits or blocks their expectations.
• It’s nonthreatening. Using paper is great with clients. It takes development out of the realm of geeks and into their hands. They can add, delete, or reorder screens, for example, just by moving pieces of paper around.
• It’s fun. There’s something tactile and satisfying about working with paper. It appeals to nearly everyone. And if you really want to bring out the kid in your coworkers, arm them with scissors and glue-sticks. In this case, a childlike approach to work is a good thing.

 
Paper prototyping can’t identify every UI issue. And sometimes you have to get into the development phase to really see how your interface is going to fly.

But in many situations, working on paper is a great way to enable low-cost, highly creative design.

When you’re at home, on your own computer, you can use whatever browser you want. Into Chrome? Cool. Love Firefox? Fabulous.

But when you’re a developer, you don’t have that luxury. You have to ensure that your sites work well on all browsers —even those that aren’t your favorite. Worse … you have to ensure they work even on dated versions of those browsers.

And that gets old really fast.

Enter Modernizr.

Modernizr is an open-source JavaScript library that helps you build HTML5 and CSS3-powered websites without having to worry about browser compatibility. Modernizer does this through a series of “feature detection tests.” These tests detect features that a user’s browser can’t handle and downgrades those features accordingly, in a way that works for you.

This gives us developers much greater flexibility in building sites. We can build with a “high-end” target in mind — an ideal version of the site — while maintaining full control over what the “low end” version will look like. No more dumbing-down sites to ensure compatibility with older or non-preferred browsers.

Adopting this bit of tech can also save time and money. By building sites with the future in mind, there’s no need to redo development when a browser adopts more of the new HTML5 or CSS3 standards. Your site will have already been built to make full use of them.

This saves the client money and developers time, allowing those resources to be used for more important things. Like well-thought-out user interfaces, and more research in emerging web and mobile technologies. 

So we can keep dreaming about the day when all users adopt a single, brilliant, modern browser.

But until then, we’ll keep writing for all the browsers out there. And Modernizr will make that task a lot less painful.

Take coffee, for example.

I’m too young to remember, but I bet that when drip coffee makers came onto the market, people were blown away by the ease of use. No more boiling water on the stove! Then came a certain retailer who brought good coffee to the eyes and tongues of the masses, in a convenient to-go cup. Next came their instant coffee, supposed to be “just as good” as what you’d get at their coffee shop.

At this point, how much more time can we save?

Don’t get me wrong; I’m all for efficiency but personally, I see something being lost in our rush for results. I think we’re losing our connection with the process of creation. We’re forgetting the tangible sensation and satisfaction of making something. Instead, we just consume.

This is why I draw.

When I pick up my pencil, I start by drawing basic shapes. Then I flesh these shapes out into whatever they’re supposed to be: a face, an arm, a car, or a building. Then I go back and thicken some lines, scribble here to indicate shading and light, and think about how to highlight what’s important. After this, it’s time to really polish things up, do some fine shading and fix lines. And this doesn’t mean I’m done. I may get out another piece of paper, slap it on top of my drawing, go to my lightbox, and redo the whole thing.

Something happens when I slow down and immerse myself in this process. Psycologists call it being in a “flow state.” I just know that it’s when I’m most creative, and I find that happy mistakes often occur — like when I wind up drawing something other than what I intended, but it looks great anyway.

Going through such a time-consuming process when I’m drawing may seem tedious, but I believe that it’s an essential part of the creative process. It helps me connect with what I’m creating, care about it, and feel like I’m part of it.

Designing a website isn’t much different.

I start by drawing squares and circles on a page, carefully deciding where text, images, and buttons should go, according to the client’s needs. I may end up doing this three or four times until I find what’s right for the job. Then it’s onto choosing fonts, colors, and images, all the while keeping in mind the site’s audience and purpose.

I constantly hear people say that they’re “passionate about their work.” I don’t think this can really be understood until you yourself are passionate about something. As designers, we need passion. We need to feel connected to our work.

That’s accomplished by giving the process of creation the time it needs. Only then can we create something that we’re proud of — and something that our clients will be proud of too.