Don’t built it, fake it first — guide to prototyping
The building of any application web or mobile progresses in stages. One of the most important phase at the beginning of any great product is the prototyping stage. It allows you to test out your ideas cheaply, and gather valuable feedback before committing into something. This saves time and effort, and provides a test-bed where we can “fail cheaply” and improve.
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.
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 Why prototype
Prototyping provides a tangible mock up for you to showcase your product, and also gives users a experience journey as they are able to use and navigate through the app.
Prototyping an app gives you many more benefits like:
- Showcase your idea in tangible form with judges, 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
Interactive Paper Prototyping
No brainer, sketching out on paper is fastest and do not costs much. We can add in the interactions too. 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 – where to get inspirations
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 take only the elements that you really like and connect them together by adding your own style. By modifying an exisiting template, it quickens the process and yet allows you to create something unique.
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
#4 Finalize and Deployment
Start building! Once you are sure that it has been rigourously tested and iteratively improved on, start working on the actual product. As shown here, you can create a first prototype even as a non-designer. The toolset that could be used in this case is not complicated. Plus, the internet is full of free templates, user interfaces to download and inspirations that can take your web or mobile app prototype to the next level.
Prototypes are invaluable for testing ideas and iterations of a product in design before commiting to building a product. So now you have the necessary tools ready, go out and do some prototyping!
Nhouse is hosting a hackathon with an educational focus for helping beginners and first-timers explore the whole hackathon scene. Do sign up here: Innovation Challenge 2017 (poster out soon)
Join to compete: https://tinyurl.com/innovationchallenge1718
Join as facilitator: https://goo.gl/forms/ksutbK1N6OvWSgYf1
Join as audience: https://goo.gl/forms/F5zkiWIniIzf3bQC2