We're accepting new projects!
or by  
We're accepting new projects!
oksanapylyp

(4)

Step by Step Guide to a Great Mobile App Prototype

13/04/2016
Step by Step Guide to a Great Mobile App Prototype

Got a genius idea for an app, that will change thousands of people’s lives? Are you up to launching a startup with great perspectives? Or maybe you want to build a mobile application that will bring your business on a completely new level? If “Yes” is your answer it’s high time for a mobile app prototype. 

Anyway, you will need a great design to make your app successful. Most development companies offer professional design services to their customers, but no one has a better understanding of how the app should look like, as the customer himself. This article will show how you can develop a great design and create a professional interactive mobile app prototype of the application with no previous knowledge and experience in this field.

Step 1. Visualise your idea

To design your own application you must be first of all a smartphone user with background. The more smartphones you’ve owned, the more applications you’ve ever tried, the better you understand the needs of an average app user. Your experience will tell you how should your app look like to be easy and pleasant to use and to meet the expectations of its potential users.

Start with creating a user story. Write down the whole journey of the user through the application from the very first screen to the last one, think about problems that your app will solve and goals you want to achieve with it. There are multiple tools to create a clear architecture of the app and to show logical connections between different screens. For a better start, you should definitely try Mindmup.

Even if you already know, how your app will look like, some interesting ideas before creating the first design will never be redundant. Every professional designer has his favorite websites, where he gathers inspiration before creating something really unique. Why should you skip this step? We gathered a short list of the best websites for inspiration experienced designers often use.

  • For the best ideas of web and mobile design check out the board of Timoa on Pinterest – here you will find the mobile app templates for every case. Dozens of calendar templates and comments sections, nearly 500 graphs and lists templates are gathered on one page for your inspiration. Adrien Susini, Formula Design, Yuki/Bissy Nagahama also have awesome boards dedicated to UX/UI design of mobile applications – don’t miss them as well.
  • Get a Dribbble account and follow some great UX/UI designers, that share their best artworks. Virgil Pana, Lukas Bugla, Jeremy Sallee will definitely inspire you with some fresh ideas for your app design. Whether you are looking for inspiration about skeuomorphism, micro-interactions or simple navigation – these dribbble profiles will help you for sure. Moreover, you can download some free sketches from THINKMOBILES designers here.
mobile app design interactive prototype
Image: Episty.com

Inspired UI, Pttrns , lovelyui are another libraries of app screenshots according to functions. Here you will find your inspiration for search and login pages, feeds, custom tab bars and so on.

For some useful ideas, you can also visit the Google Play Market and the iTunes Store. Watch through the screenshots of top applications, check out different functions and the UI design of the apps and consider what you would like to change. Even a small improvement can make your app leave all the competitors far behind.

To surround yourself with creative ideas, try the Google Chrome extension Muzli, that also works with Apple’s Safari. This is the secret weapon of designers – the tool replaces your default tab and home page and fills it with inspiring content from different sources. You can edit your feed according to your preferences (for example mobile design) and save some interesting content to look through it later. Muzli is a great source of inspiration every creative person should use.

Step 2. Sketch with your hand

When you get overwhelmed with inspiration and genius ideas it is time to put the concept of the coming application on paper. Yes, there are hundreds of tools to make sketches on your phone, tablet or computer, but the old-school paper and pencil are still more reliable and appreciated even among top web and mobile designers. Creating something with your hands will release your imagination and let your brain generate fresh ideas.

Image: Smashingmagazine.com
Image: Smashingmagazine.com

Take a look at this collection of UI wireframe sketches which give a clear overview of each app or web design idea. You’ll definitely want to grab a pen and a notepad and start drawing your first application sketch.

Making mistakes while sketching on paper is not as frustrating as while creating an app design with digital tools. A 5 minutes paper sketch is not that painful to throw away as to delete a digital mobile app prototype, you spent some hours on.

Need sketches for your app?

Keep in mind that sketch and prototype differ a bit. The main purpose of sketching is to create a rough draft version of the app, and not the interactive UI prototype. While sketching you should focus on structure and avoid too many details, they will distract your mind from more important things. Create few variations of every screen, so that you’ll have different options to choose from. Take notes while sketching, don’t miss any idea that comes in the process of creating your app design.

When your sketch is finished, you will have the primal concept of your application. This will be improved, but the basis will remain the same. If you add some creativity, the result might be pretty impressive 🙂

Interactive sketch for mobile app design
Interactive paper sketch

Sketching on paper means that you don’t have to rely on internet connection, device charge or other technical issues. You can start creating whenever you meet your inspiration – in the train, during a walk in the park or while drinking tea in your favorite cafe.

Spontaneous sketching can be more efficient than sitting for hours in front of a monitor. Moreover, it can be simply converted in a digital wireframe in just a few minutes with the help of some great tools. Keep reading to find out more about top services for creating a mobile app prototype.

You should also try to use sketchbooks for applications with phone templates on every single page – they will help you imagine, how your app can look like on the device screen. These sketchbooks can be also very helpful while converting to digital wireframe due to their precise size. You can download free printable templates here as well. Sketchsheets is a service that offers templates of all most popular modern devices with different screen orientation so that you will definitely find the ones you need for your project.

Step 3. Digital wireframe

The next step of designing your mobile app prototype is to build a UX wireframe – a structure of the future app based on your own sketch design. A UX wireframe is a skeleton of the application. And this is the point where you will have to put your notepad and pencil aside and use some digital tools.

Wireframing is a stage when you will have to manually convert your paper sketch into digital format. But there are some tools that will make this step much easier and less time demanding.

You can try POP (an abbreviation for Prototyping on Paper) – a tool that will turn your sketch into an interactive wireframe. You have to take pictures of your drawings and POP will automatically upload them as screens of your future application to create a real click-through prototype. POP can link hotspots on images to other images in your current project. The user can set the destination of the link (another POP image) and the gesture, that triggers the link (tap, swipe, zoom and so on).

Source: Popup.in

Making a wireframe of your paper sketch will be even easier when you use sketchbooks for applications. Sketchpads by POP for Apple and Google Nexus devices have an adjusted form and work precisely with POP. This is how easy the interactive prototype of your app can appear in just a few minutes.

Top free services to create a mobile app prototype 

Now there are dozens of simple apps and online services to choose from,  that allow you to create eye-catching designs in just some hours.

The basic online service to create a mobile app prototype is Ninjamock – it’s completely free to use and easy to learn. The app is quite amusing with funny animation, but at the same time it has a full set of features that allow you to create a great wireframe in a short time with no previous experience in this field. Ninjamock is the only service on the market with an integrated vector editor, it offers a full set of vector icons for awesome designer solutions. Ninjamock is easy to start using for beginners and powerful enough for implementing great ideas.

For a professional mobile app prototype, take a look at Proto.io, a tool that is used by top designers as well as by beginners. Proto.io is an online service, you don’t have to download any software and can start wireframing straight away in just one click. There is a 15-day free trial version with all the features of the service. That will be enough to create even several designer projects, the paid plans start at only $24 per month.

Proto.io supports prototyping for any device with screen interface, whether it is a smartphone, a camera or a microwave with a screen. This service will provide you with libraries of the most common UI items for major OSs. Though Proto.io doesn’t count as the easiest and the most intuitive to use prototyping service, it offers a lot of detailed video guides to creating mobile interfaces. After watching some short tutorials, you will be able to create screen transitions and scrollable areas, share your project and receive comments on it. A ready interactive mobile app prototype can be viewed on the phone and can be experienced as a real clickable application.

Marvel is another prototyping tool with professional features and low entry barrier. It is free to use but also includes paid plans with extended features, the prices start at just $12 per month. The app has a Dropbox integration and allows to upload files directly from your computer. Marvel supports the most popular file types .psd, .png, .jpg, .gif. There are native apps for Android and iOS that allow you to experience an application on the device it was designed for.

Want to know more about app prototyping tools?

It looks like a real app but was created without any line of code. That’s definitely a huge advantage of this service. Some designers use Marvell to review their mobile app prototype on mobile devices, even if it was created with other services. Marvel’s mobile app also allows you to create professional wireframes by just taking pictures of your hand-drawn sketch. In the company paid plan you can work in teams sharing your work and enjoying the creative process.

Mobile app prototype with Marvel
Image: Ghani Pradita

With Invision you can create a great mobile app prototype in just a few minutes. Here you can upload your design files, add transitions and transform static screens into interactive prototypes. Invision supports more file types as any other app described here. It has integration with Dropbox, which is great for users and helps to save time. This service also offers a lot of possibilities for sharing your project – URL, email, SMS, embedding and downloading allow everyone to access your artwork, leave notes and even attach files to their comments.

Interactive mobile app prototype with Invision
Image: Anton Aheichanka

All these services offer a wide variety of tools to create a professional mobile app prototype and at the same time are quite easy to learn. Keep in mind, that you have to follow basic rules of UX/UI design, the guidelines of the app stores and newest trends in developing user interfaces to create a really successful application. Our simple step by step guide will help you to create a mobile app prototype from the very beginning to the last stage. This prototype will be a precise guideline for the designer to develop a truly marvelous application design that will charm the users. If you have any queries – don’t hesitate to contact our professional designer team.

How much does a professional app prototype cost?