How to Prototype an App as Non-Designer? Simple Mobile App Prototyping

Introduction

When it comes to mobile app prototyping or building your first MVP, you might not know how to get the job done, especially as a non-designer without proper software, or support of a digital product development company to prototype an app.

Prototyping isn’t so hard, especially if you follow best practices and toolset adjusted to your skills.

In this article, we are going to take a look at how and with which tools you can prototype an app as a non-developer/designer.

So, let’s begin.

What are the benefits of prototyping an application?

Did you know that prototyping an app can help you not only turn your idea into tangible mockups, but even save you money?

Prototyping an app gives you many more benefits like:

• Share your concept with friends, co-founders or even investors
• Save money by showing a remote software development team a “ready-to-code” mockup/wireframe/prototype
• Save money on designer by sharing with him a “ready-to-design” wireframes/mockups
• Be sure about what exactly you would like to build
• Gather feedback from customers

To prototype your first app you don’t have to be a designer – Use ready to use (and often free) User Interfaces and look for inspirations for your mobile app prototyping.

To prototype your first app you don’t have to be a developer – To animate UI and connect views you created, but you need the right tools to do it.

All that knowledge on how to prototype an app as a non-designer you will find right here.

What tools to use for app prototyping?

#Paper prototyping tools

No brainer, don’t have to use any extraordinary pro software. You can start right away without any special skills. It’s cheap, fun and enables you to turn your idea into tangible product prototype.

There are a few tools that can help you:

• Free sketch templates for web, mobile and tablet platforms – sketchappsources.com
• Offline prototyping with stencile – uistencils.com
• Make your sketches interactive. Just make photos of your sketches and connect them with each other by setting actions between them and you can get “app like feeling” with this app popapp.in

#Software to prototype apps

The fastest and the most stable way to develop a good design is still by using a desktop app. Try those:

Keynote/PowerPoint:

• Yes, you can make a working prototype with animation with this software. Even the design is not a problem with those two. Here you can find great guides on how to prototype an app with Keynote.

Sketch:

• Just made for UI. A tool is similar to use as Keynote or PowerPoint, but have a way more great features and plugins dedicated for UI/UX designers.

JustInMind:

• Free desktop app to prototype an app for each possible platform. Full of free widgets, easy to share and collaborate with other users. Not very popular software, but straight-forward to use.

Adobe Experience Design CC:

• Seems to be a photoshop killer for UI design. All-in-one tool to prototype a web or mobile app. Extremely easy and fast to use. Replicate existing elements by dragging the borders or change images by drag-and-drop without any manual adjustment.

#Cloud software to prototype apps

You can prototype an app in software, which is accessible via your browser. There are some of the pretty good apps on the market to do it:

UXPin:

• Is a design platform that makes it easy to go from static design to fully animated prototypes – without any code. Everyone can comment directly on designs. Awesome to share/modify designs in real-time. Create your designer in UXPin or upload from Sketch/Photoshop

InVision:

• Currently, the leader in the category of prototyping, wireframing and workflow platform for web and mobile app prototyping. Most advanced cloud software on the market.

Proto.io:

• Similar to UXPin, but focused on mobile apps. You can create, animate, share with customers a fully interactive high-fidelity prototypes that look and work like a mobile app. No coding required.

Marvel: 

• Clean, easy to use, not to overloaded with tools prototyping tool for apps. Only one which is free to use for unlimited projects.

Balsamiq: 

• Is a rapid wireframing tool. It’s more about functionality and getting feedback from users, not beautiful UI. It reproduces the experience of sketching on a whiteboard but using a computer.

FluidUI: 

• With a strong focus on simplicity and communication, Fluid UI is a smart prototyping tool. Equipped with built-in high and low fidelity component libraries, live team collaboration, device previews and video presentations, making it a top-notch solution for designers, product managers and founders.

App prototyping – Look for inspiration like Picasso! 

You don’t have to be a designer to create your first prototype. There are a few ways to “fake it, till you make it” as a non-designer. “Steal” existing designs, but try to copy only the elements that you really like and connect them together by adding your own style.

It’s the fastest way to learn something new by copying somebody, who did it correctly and add your own sense of style.

#Use existing templates and UI

Download and adjust free or paid UI to your needs. You can find plenty of templates, UIs for websites and mobile apps for desired software. Here you can find great resources:

• Freebies for Sketch: sketchappsources.com
• Mockups, UI, UI elements:  ui8.net
• Free stock photos: pexels.com
• Icons: flaticon.com
• Fonts: fontsquirrel.com and google.com

#Get inspired by other designers

Look for designers and designs that you really like and try to recreate elements from them.

Where can you find great inspirations? Here is a list:

• UI only inspirations like pttrns.com or collectui.com
• Platform for designers like behance.net or dribbble.com
• Pinterest: pinterest.com

Final word – Development 

As you can see, you can create the first prototype of your product without having a team or being a non-designer. The toolset that could be used in this case is not complex at all. Plus, the internet is full of free templates, user interfaces to download and inspirations that can take your web or mobile app prototype on the next level.

Now, when you have a ready, good enough looking and tested by users prototype – let’s build it!

First, decide if this should be the web or mobile app, if you already decided which way to choose, then let’s talk about how we can help you to change your prototype into working app.

Resources:

• http://www.sketchappsources.com (image)
• https://projects.invisionapp.com (image)
• https://www.lauramfoley.com (image)