Quick and Easy Prototyping

Step 1: Open that sketchbook, it's time to get started.

It's easy to jump straight to the computer, but problem definition is lost when we don't invest time upfront to sketch our ideas. Concepting and ideation on paper allow for the most efficient use of time later. Amy Lamp, design director at Forty.co, speaks to the myriad benefits of sketching in her insighful article here. At Yeti we make sketching the first step of any design challenge we're trying to solve. Our sketching process often includes the practice of charrettes to help generate a lot of ideas quickly and determine which concepts to develop. Once we have a clear idea and a concept for the solution we move to the computer.

Step 2: Wireframes and just enough visual design.

Into the forest we go, but be careful because it's easy to lose the path here. The idea is to give enough definition and form to your idea that the client can make the mental leap with you to the solution you are proposing. Don't extend the visual design beyond the needs of the content. We begin by outlining the core function of our solution. Most times this core manifests itself as a single flow or sequence of steps that define the idea. There are many tools and many ways to create the screens that make up a flow, but we recommend an extremely useful application called Sketch. If you want to learn more about wireframing and other ways to create them we have another great post here. The goal of these "designed wireframes" is a set of images (typically .pngs) that illustrate the core flow of your idea, with minimal visual design, but enough definition to excite your client's imagination and paint the picture for them.

Step 3: Bringing it to Life!

Time to make magic happen. With our freshly minted screens we turn to our favorite prototyping tool. At Yeti we use Invision, but it's well worth mentioning two other great alternatives, Flinto and Prott. Using Invision we can upload all our screens in a batch and begin linking them together. By selecting an area of an image we can define what gesture it should respond to (taps and swipes), which screen that area should link to, and how to transition to that screen (fades and slides). The resulting effect is one that simulates a native app and lives on the phone. It's a willing suspension of disbelief for app users. The icing on the cake is the ability to share these prototypes with clients, allowing them to create a link to the prototype on the homescreen of their phone.

The Takeaway

Prototypes are easy to create and effective in simulating native app performance. They are an indespensible part of our design process and consistently excite clients and make our workflow more efficient.