Published on | Prototyping: From UX to Front End — Medium Proto.io

And Why Prototyping Will

The majority of designers, regardless of type (interior, fashion, mobile app), start a new design with a simple sketch. It’s not even really something we think about. It’s automatic. We get a new idea and our first instinct is to get it on paper before that fleeting thought or brilliant design flies right out of our heads and is gone forever.

The difference between mobile app designers and most others is that sketching can’t be the end of the story prior to development. Mobile app designers still have a prototyping phase. Why, you ask? Well, a sketch can only show so much — can a sketch show all the moving parts of your app? Can it show animation? Can it allow someone (a potential investor, maybe) to physically move around the app? Probably not — and that’s why investors, developers, and the rest of your team will fall in love a lot faster with a prototype than they will something etched into your sketchbook.

It’s important to have the whole team involved in mobile app design decisions.

Don’t get us wrong: we love sketches. We do them all the time. But prototyping is our jam and once you’ve tried it, we’re certain it will be yours, too.

The Benefits of Sketching Before Prototyping

Sketching is an important part of the creative process for many of us. We need to get the vision in our heads into a more concrete form before it disappears — and sometimes, the easiest way to do that is with a simple pencil and a piece of scrap paper. We make a quick, crude drawing and then start making adjustments where we see fit — a bolder line here, some definition there, and some color-coding bring our sketches one step closer to life.

Sketching is natural for designers. Regardless of the fancy technology we find on our tablets, some of us just need that pencil in our hands to draw idly while we’re in waiting rooms or sitting through presentations.

Sketching is for designers what writing is to authors. It’s how they work out the plot holes, the tough conversations between characters, and the writer’s block. Writer Julia Cameron suggests in her book The Artist’s Way that creative people (writers, specifically, although not exclusively) should write three pages of stream of conscious thought every single morning. She calls them Morning Pages. She says that the Pages help to unblock us when we’re struggling and train our minds to be open to new creative ventures.

We imagine 30 minutes of free sketching could have a similar effect for designers who are looking to expand their horizons or stretch the corners of their talent to new places. Sketching (or perhaps free doodling) can help designers figure out a better way of accomplishing a task in their new mobile app or even find inspiration for their next one.

Can we request some artwork for the office?

The Limitation of Sketching

The biggest issue with sketching is that you can only do so much with it. Sketching is great for mapping out an idea or even a series of ideas. It’s perfect for working through a design and showing others on your design team what you’re thinking about. It’s why people make wireframes. They help us communicate with clients and get navigation and major design philosophy approved. Unfortunately, this is where the benefits kind of drop off.

Sketches are two-dimensional. They aren’t animated. They only demonstrate so much. That’s not to say they don’t communicate — they do — but not as far as you need them to. You can’t interact with a sketch in the same way that you could with a prototype, for example. Sure, you can physically move papers around on a table and draw arrows to show progression from one screen to another, but you can’t tap or swipe.

Sketches can’t really give you a full picture (pun intended) of what you’re going to be working with. Since sketches are frequently done in black and white, it’s hard to show clients what it will really look like in the end — and in preliminary stages, this isn’t a “bad” thing necessarily. In fact, wireframe best practices recommend avoiding color so you can focus on function, rather than beauty.

Whoever wrote those best practices has a point: agonizing over color schemes is a bit pointless if your client isn’t happy with the way the app works. It’s best to start with the sketches and the wireframes before moving on to color selection — and perhaps we should be grateful for this suggestion because changing a color on a sketch isn’t always easy. Erasing colored pencil isn’t necessarily a simple task and it’s so frustrating to waste your precious time scrubbing away at a piece of paper because the shade of green wasn’t quite right.

Not to mention the fact that sketches won’t impress potential investors. If you walk into a conference room with a folder full of sketches, color palette choices, and a dream, you’ll have a hard time walking out with a promise of seed funding. Investors like prototypes. They like demonstrations. They like physical proof of a product they are expected to invest their hard earned dollars in — and sketches won’t do for the majority of investors.

Even if you aren’t looking for funding, consider your next step. Try handing those sketches to a developer. In the hours she’ll spend sifting through your drawings, she could have been writing actual code. She could have been working toward your final product instead of asking you what you mean on page five and if this hue is more appealing to you than that hue. Sketching will give them some of what they need to build the mobile app of your dreams, but certainly not all. Not the way prototyping would.

Sketching certainly has its place in mobile app design, but prototyping will be very beneficial later on.

How Prototyping Goes Above and Beyond Sketching

The limitations of sketching are no match for prototyping. Prototyping will do all the things that sketching can’t. It will animate, demonstrate, and communicate in extraordinary ways only limited by your own imagination. We’re not saying you shouldn’t spend time sketching — in fact, you very well should — but don’t let it stop there.

Those color palettes you’ve been staring at? They will be a snap to pop into your prototype. And even better than that — you’ll be able to swap them out in mere seconds if you change your mind or your client doesn’t like it as much as you thought he would. Need a shade just a little cooler? No problem at all. With a few clicks, you’ll be all set.

When you show your clients the prototype for the first time, they’ll be floored. What used to be black and white boxes with arrows will be a functional mobile app that feels real. They’ll probably forget they aren’t actually using the app. They’ll be swiping, tapping, and testing away. They’ll feel like their vision is finally getting off the ground because they have a tangible prototype of the product in their hands.

If you’re hoping to secure seed funding for your own business venture, the time you spent prototyping your mobile app will more than pay off for you. Investors will be impressed with the lengths to which you’ve gone to demonstrate your vision. They’ll be glad to have physical evidence of your plans, which means they’ll feel more confident in their decision to write you a check, connect you with key players in the industry, or provide helpful advice.

When it’s time to hand over your prototype to the developers (using that seed money you landed), you’ll find that they’re able to get right down to the business of writing code. They’re likely to have less questions because you’ve done the bulk of the hard work ahead of time. You know how you want to transition from one screen to another. You know what you want your nav system to look like. You’ve already picked the perfect colors.

Some designers skip the prototyping phase because they’re worried about time (and subsequently, money), but it takes less time than you might think — and it’s more affordable, too. The benefits of this step in the process are numerous and will be sorely missed if you go straight from sketch to development.

After you build your prototype, you’ll be able to test it on friends, family, and coworkers — which is another thing you can’t really do with sketches. Make sure you observe your testers as they interact with your app and take notes of anything you see as less successful than you imagined or that they’re struggling with. Finding errors in the prototyping phase will save you time and money in development.

Prototyping is Your Master Communication Tool

Prototyping will pick up where sketching leaves off. It will fill in the blanks and communicate your vision in ways that will blow clients and investors away. It will demonstrate to the world what you want to accomplish with your mobile app far better than a few drawings ever could have. You simply can’t afford not to do it.

The importance of sketches and wireframes cannot be denied. You should still pause on those steps and take some time to discuss your goals — but let prototyping take your mobile app design to the next level.

Proto.io lets anyone build mobile app prototypes that feel real. No coding or design skills required. Bring your ideas to life quickly! Sign up for a free 15-day trial of Proto.io today and get started on your next mobile app design.

How has prototyping helped your mobile app design career? Let us know by tweeting us @Protoio!

Originally published at blog.proto.io on June 1, 2017.

Why a Simple Sketch Won’t Do was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Why a Simple Sketch Won’t Do

Cool stuff, every week

More Articles