App Prototyping: Give your clients an experience to interact with the app

App Prototyping? What is the first thought that comes to your mind? Rough sketch, shaping client’s requirement, designing app flow, I guess many…

I have come across many mobile app designers that mix prototyping and wireframe and think to have a similar meaning. But to your notice, prototyping and wireframing are two different approaches of any designing process.

App prototyping is the process that defines the workflow of the app in an interactive way (working app model). You include all swipes, clicks, and drags and present it in the form of app demo or proof of app concept (POC).

App prototyping

Whereas wireframing is the process of defining app flow drawing a rough sketch of screens on paper or using wireframing tools.

Wireframing

When I was an iOS developer, I saw my Team Leader creating various screens in Xcode platform using storyboard application. That time was new to the developing field and couldn’t understand what he was doing. He was simply creating different screens in one view placing buttons and connecting those screens using clickable events. I was really amazed at his approach of instant reply to the client.

Later, when I was asked to study the requirement and create a flow, I got to know that it’s known as app prototyping. It was simple to create the proof of app concept on the storyboard. I thought this is it. But, app prototyping holds a significance to any app during designing and developing process and this is what I understood while going through various articles.

Significance of App Prototyping

  • Fix design issues, evaluate app ideas and essential in interactive design concepts.
  • Hassle free app development saving your valuable time and money.

As penned by JAKOB NIELSEN in a famous article

The most common estimate is that it’s 100 times cheaper to make a change before any code has been written than it is to wait until after the implementation is complete.”

Fix Design Issues:

Prototyping acts like a real system that helps you solve design issues before focusing purely on coding. It helps you address the app concept, features, interactions, and flow.

Evaluate app ideas:

Prototyping connects you with end users and helps you speculate end user’s designing expectation while using the app. During this process, you may need to create different designs using different colour schemes and layouts. Each design gets integrated into the mobile and analyzed. The one that soothes the eyes and is easy to navigate giving ultimate user experience gets approved.

Communicative design concepts:

Applications that guides helps and is interacting with end users has more weight than the apps made purely for fun and entertainment because these apps contain a purpose. Prototyping for such apps is a must. If you miss a screen while designing or developing, chances of your app going down line increases.

You have probably got an idea of why app prototyping is so important to any app design.

One more interesting corner would talk about is the stages, Take a look;

The four stages of App Prototyping

Understanding client’s requirement:

Usually, this is what we get from client’s end: Scope document, feature list, and app reference links. Going through all these documents and getting deep insights, project manager calls for a brainstorming session. This involves the presence of you (mobile app designer) and sometimes business analyst. The designer understands the requirement and draws a flowchart on a paper under the guidance of the project manager. There comes an end to this session.

Wireframing:

Once you have a basic idea of how the app will flow, you start sketching the rough screens on paper or using wireframe tools including widgets and different layouts. At this stage, you make end-user understand the navigation of the app using keynotes and not the look & feel of the app. For instance, on click of login , the login screen appears.

Defining visual effects:

Once all the functionalities are mapped, you start designing the actual screens. The selection of color schemes, the button titles, widget placing, message pop ups, creation of different icons, screen transitions, animations and other visual effects are added to make the app screens more impressive and effective.

The Final touch:

At this last stage, you test the transitions, animations and interactions (clickable events), cross check the final screens with the flow, make the screens more soothing and send it to the app developer or project manager for re-check. If required, you modify the screens and give it a final touch.

You have understood its significance, stages and now it’s turn to let your fingers hold a stylus to create screens that interact. I know, with so many prototyping tools rolling in the market, you may find it difficult which one to pick and which one to leave. But first, ask yourself the following question.

  • How long will it take me to learn this tool?
  • For which platform, I need a prototyping tool? – Web, iOS or Android app designing
  • The prototyping precision
  • Can I share my designs with others?
  • Requirement of Professional experience
  • How much will the tool cost me?

Therefore, here’s a sneak peak of the best 4 collaborative and prototyping tools.

#1 InVision:

Price:

The pricing plan is divided into five sections.

Free – 1 active prototype
Starter– 3 active prototype- $15 per month
Professional– unlimited prototype- $25 per month
Team– unlimited prototype- $99 per month
Enterprise Edition– free to use, you can avail the benefits of advanced features for unlimited prototypes.

Prototyping for:

Websites, Web Apps, iOS, Android, Apple Watch, Android Wear.

Description:

InVision is a web-based prototyping tool allowing you (designers) to create spellbinding interactive mockups for the web and mobile projects. You cannot create screens directly on Invision, instead, you need to upload the static designed screens and then add hotspots to transfigure them into interactive mockups.

Besides, you can sync your photoshop or sketch files and add your own prototype in real-time making it look authentic and soothing.

Features:

InVision is wrapped with user-centric features including preview mode, commenting, version control and file syncing. You can add transitions, animations, and gestures which it provides in plenty and let the design speaks. It allows you to sync design files from your favourite storage tools helping you to make your entire design productive from start to finish. It supports PNG, JPEG/JPG, GIF, AI and PSD file format. By the way, it is an amazing collaborating tool that seeks feedback from the clients and end-users.

#2 Marvel

Price:

The pricing plan is divided into four sections:

Free: Free forever – Unlimited Projects-  Unlimited comments for first 3 projects only

Pro: Monthly charges would be $12 for unlimited projects- unlimited comments- allows to download offline prototypes as ZIP/PDF and Android- Password Protect Prototypes- Remove Marvel Branding

Plus: Monthly charges would be $15 for unlimited projects- unlimited comments- allows to download offline prototypes as ZIP/PDF and Android- Password Protect Prototypes- Remove Marvel Branding – download offline prototypes for iOS.

Company: Monthly charges would be $36 (3 users) for unlimited projects- unlimited comments- allows to download offline prototypes as ZIP/PDF and Android- Password Protect Prototypes- Remove Marvel Branding – download offline prototypes for iOS- Organise users into Teams – User Roles-Centralised Billing.

Prototyping for:

iOS & Android

Description:

Marvel is an ultimate browser prototyping tool that eases your prototyping process. Simply sign-in in the account and get accessed to the area where you can experience creating your first prototype.   

Features:

Unlike InVision, Marvel has limited transition, animations and gesture class libraries. You can change background colours and resize images with an addition to have access to 17 vivid templates for prototyping. You can even optimize your designs device specific.

The best part of this easy to use and learn tool is companion app feature that lets you transform your sketch designs into a prototype just by clicking the design’s image. And, as such your images are synced with Marvel account, therefore, you can create quick mockups for experimentation even before designing a single layout in Photoshop or Sketch.

Lastly, you can sync design files from Google drive, box, sketch or Dropbox and remember the files should be in PSD, GIF or JPEG format.

#3 JustInMind

Price:

Free: Free trial version is available for you to have a tour of how JustInMind works.

Premium: The premium version is divided into two sections: Subscriptions & Perpetual licenses. For more information look into pricing section and give your designing experience a chance to create sparkling mockups.

Prototyping for:

Web and Mobile Apps (Android, Windows, Blackberry & iOS)

Description:

If you are searching for all-in-one prototyping tool then your search ends here. JustInMind is a perfect tool for designers allowing them to design, prototyping and collaborating.

Features:

JustInMind allows you to design mockups for web and mobile apps by selecting design elements from a vast UI library. Once you have finalized your layout, you can add motions, animations, and gestures from the pre-existing widget library. The widget library is customized according to the device template you pick and integrate into your design. You can even add CTRs, checkboxes, lists and parallax layouts and also there are tons of other widgets listed in the library which you include ensuring that the library you opt was the best one you can have for your design.

For beginners, there are a number of video tutorial available in the shelve helping you to make your design mockups impactful and impressive at the same time.

#4 Balsamiq

Price:

A single user license is for $89 and multi-user license is for $178

Prototyping for:

Desktop & Web Apps

Description:

Balsamiq is a quick wireframing tool that allows you to design your wireframes in speed and with efficiency. It’s similar like we design screens on paper (low precision). There is no need to have a good experience while using this hand-sketched tool. Simple to use and easy to understand.

Features:

Balsamiq offers a wide array of designing elements allowing you to make your design look stylish. It gives you an experience of using a whiteboard while sketching but on the computer. It is easy to iterate and get feedbacks helping you to enhance your designs and improve the user experience.

In Closing

Abrupt ending won’t work, let’s compare the above tools and see which one wins. But, it’s you who gonna decide which tool will best fit you.

Compare Table

App Prototyping Comparison Table

Webinar on Amazon Lambda

Roma Udernani

Roma Udernani

I am passionate about writing. Basically, love to explore so that’s what brought me to this profession. Currently, focusing on mobile apps and trends.