App Prototyping with No Design Skills - Quick Guide + Tools

Introduction

App prototyping is an important step on the way prevent a mobile app from failure. It supports cost efficiency and adjusting vision to real users’ needs.

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 is app prototyping?

App prototyping is a form of user research. Interactive prototypes simulate how a product will work and allow us to mimic actually using the app.

A mobile app prototype helps to understand how real users interact with a product and, therefore, validate UX design assumptions and assess the feasibility of a product. Prototyping allows seeing the product in action with the lowest cost possible.

What are the 3 types of prototyping?

There are 3 high-level approaches to prototyping:

1. Paper prototypes – they help the development team and stakeholders to work out a common understanding and a general idea about the future mobile app early in the design process. Mobile app development often starts with paper prototyping which is followed by building clickable prototypes. Plus, paper prototypes can later serve as documentation. What’s crucial, paper prototypes are not the same as sketches, since there needs to be a flow between all the screens which is explained by an assigned person.
2. Low-fidelity prototypes – these prototypes are often presented in a form of clickable wireframes linked to each other. They can be created in simple tools like PowerPoint or Keynote, or in advanced digital prototyping apps. Low-fidelity prototypes can be expressed also by paper prototypes described above.
3. High-fidelity prototypes – these prototypes require more initial effort and represent the highest quality, but with the use of prototyping tools like Figma or JustInMind, they can be created by a non-designer. A high-fidelity prototype presents the entirety of the design in one deliverable. It helps to create a product adjusted to users’ needs and achieve it in a more efficient timeframe.

Benefits of prototyping an app

There are various business- and design-related benefits of prototyping an app before the design and development process starts:

• Building an app prototype allows for validating an early concept by testing it with real users.
• A clickable prototype presented to real users during user testing allows for validating usability and user experience assumptions.
• During user testing, you gather feedback and insights from customers.
• Prototyping creates the opportunity to seek new solutions and explore new ideas early before the development process starts.
• User testing allows identifying possible improvements and adjust the idea to real users’ needs.
• App prototyping is often the first step to establishing or validating business goals.
• Prototyping allows businesses to save money since it’s cheaper to solve problems earlier in the development process.
• Costs are also decreased thanks to showing a remote software development team a “ready-to-code” prototype.
• You can also save money on a designer by sharing with them “ready-to-design” wireframes and mockups.
• Prototyping allows you to share your concept with friends, co-founders, or even investors and gather their feedback.
• You make sure about what exactly you would like to build.
• Prototyping is a great first step to development. It helps to prepare documentation and set common development and business goals.

How do you prototype an app as a non-designer?

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.

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 a 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 stencils – uistencils.com
• Remember to make your sketches interactive. Just make photos of your sketches and connect them with each other by setting actions between them to get an “app like feeling”. To achieve that, use app like Marvel.

Top tools to use for app prototyping

Adobe XD

Adobe XD seems to be a photoshop killer for UI design – a vector-based, all-in-one tool to prototype a web or mobile app. It’s easy and fast to use. You can replicate existing elements by dragging the borders or change images by drag-and-drop without any manual adjustment. Since Adobe XD is vector-based, you can easily scale and resize elements. It includes tools for creating interactions, transitions, and other dynamic functionalities.

Balsamiq

Balsamiq is a rapid, low-fidelity 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. The tool is not designed to create high-fidelity prototypes.

Figma

Figma is an all-in-one tool similar to Sketch. It offers various tools, flexible styles, and a variety of plugins, like Figmotion for creating advanced animations or Autoflow for illustrating user flows. Figma styles allow you to create a consistent design. With Figma, you can easily build a high-fidelity prototype.

Fluid UI

FluidUI is a smart prototyping tool with a strong focus on simplicity and communication. It’s equipped with built-in high and low fidelity UI components libraries, live team collaboration, device previews, and video presentations. That’s what makes it a top-notch solution for designers, product managers, and founders.

With FluidUI, you can prototype fast, using ready-made libraries and gestures. The tool is easy to use so it’s easy to put all the elements of your high-fidelity prototype together.

InVision

Currently, InVision is the leader in the category of prototyping, wireframing, and workflow platforms for web and mobile app prototyping. It’s the most advanced cloud software on the market.

InVision allows for the creation of functional prototypes quickly. It offers useful features like a vector drawing tool and tools for animations. It’s a great tool for teams since it allows for easy communication and collaboration.

JustInMind

JustInMind is a free desktop app to prototype an app for each possible platform. It’s full of free widgets, and easy to share and collaborate with other users. JustInMind is not very popular software, but straightforward to use.

This free prototyping tool provides UI libraries and templates and drag-and-drop functionality. It also has integrations with prototyping tools like Sketch or Adobe Suite. The tool is intuitive and comes with many videos that learn how to use it. It seems like a good starting point for a beginner UX designer or a non-designer.

Keynote/PowerPoint

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

Marvel

Marvel is a clean, easy to use, not too overloaded with features prototyping tool for apps. It’s the only one that is free to use for unlimited projects.

This prototyping tool offers various features connected to interactivity, dynamic transitions, and gestures. The goal is to provide a real user experience during user testing. Marvel also provides a handoff tool that helps developers to access code and assets.

Proto.io

Proto.io is a design platform focused on mobile apps. You can create, animate, and share with customers a fully-interactive high-fidelity prototypes that look and work like a mobile app. No coding is required.

Proto.io offers drag-and-drop UI components, various templates, video integrations, and integrations with tools like Photoshop or Sketch.

Sketch

Sketch is made just made for UI. A tool is similar to use as Keynote or PowerPoint, but has way more great features and plugins dedicated to UI/UX designers. It is an all-in-one platform to create animated timelines, turn wireframes into UI elements, and transform screenshots into mockups. Sketch allows for vector editing and provides pixel-perfect precision.

The tool is packed with features and offers a user-friendly interface with a lot of shortcuts that speed up the design process.

UXPin

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. This prototyping tool is awesome to share and modify designs in real-time.

UXPin is especially helpful to work with developers since it makes the transition from design to development easier. The tool is easy to use, collaborative and allows for both rapid prototyping and building hi-fi prototypes.

Cheat sheet – what is the best app for prototyping

Free prototyping tools

• Figma
• JustInMind
• InVision
• Keynote/PowerPoint

Desktop apps for building interactive prototypes

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

• Keynote
• PowerPoint
• Sketch
• JustInMind
• Figma
• Adobe Experience Design CC

Cloud software for creating clickable prototypes

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

• UXPin
• InVision
• Proto.io
• Marvel
• Balsamiq
• Fluid UI

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 adding 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 the 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

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

Prototyping mobile apps – the first step towards the development phase

The toolset that could be used to create your first prototype 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.