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

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

You already know that you should always start with an MVP, not with building a team.

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.

#1 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 (how other more experienced guys did it).

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.

#2 Tools to use for app prototyping 

Paper Prototyping

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:

Popapp animate app prototype

Image Source

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.

iOS APP UI Components free sketch

Image Source

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 mobile and web 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.

 

Invision to prototype an app

Image Source

#3 Prototyping – Look for inspiration like Picasso 

 

Picasso and Jobs steal not copy

Image Source

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:

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:

CollectUI - get inspired

Final Word – Development 

As you can see, you can create a 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.

 

Mateusz Warcholinski

Mateusz Warcholinski is the COO of Brainhub (a software house building awesome node.js web and mobile apps) who loves to build startups and play guitar.

Follow Me:

Read also