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
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 http://www.interfacesketch.com/
- Offline prototyping with stencile – http://www.uistencils.com/products/the-ui-stencils-starter-pack
- 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 https://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 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.
#3 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: http://www.sketchappsources.com/
- Mockups, UI, UI elements: https://ui8.net/
- Free Stock Photos: https://www.pexels.com/
- Icons: http://www.flaticon.com/
- Fonts: http://www.fontsquirrel.com/ and https://www.google.com/fonts
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 http://pttrns.com/ or http://collectui.com/
- Platform for Designers like https://www.behance.net/ or https://dribbble.com/
- Pinterest: https://pinterest.com
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!