How To Design A Fake App

#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.

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.

#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