When we think about an idea, it is generally very vague. We do know what we want but we have no idea how an application would accomplish this. It is best to sit down and try to think about an interface which should accomplish our desired requirements. App Wire-frame represents the skeletal framework. It lists the layout of an app and various transitions.

But before start wire-framing an app, we need to select a wire-framing tool to accomplish that. The market is filled with numerous tools. Now you might be thinking, it would just be a pen and a canvas allowing you to draw. Actually wire-framing apps are a lot more than that. They allow you to design a complete layout of an app. You can then just pass it on to a development team. Since this is very detailed, this is generally achieved by off-shore development team. This works even better if you are tight on budget. And who isn’t?

Is It Wire frame / Prototype Or Mock up?

Before taking an idea further into the process, you might start hearing these terms from people around you. They would refer to these terms and you think they just are synonyms and people just want to impress you with their vocabulary. Well they might, but although many people do use them like that, they are different terms having some differences. They are actually different models of the same end-system communicating different details about the App-To-Be (I think this is a cool term for this).

As I discussed they have different models of the same system. We are looking at the same system with different sets of details. But the main purpose of all of them is COMMUNICATION between stakeholders. They are based on the idea, A picture is worth a thousand words.

Wire frames are Black ‘n’ White and Gray sketches you might have seen before. They are low fidelity and should have very low cost. Here representation is more important than presentation. It represents the information presented on the interface. Since they don’t have fancy colors, they should be fast to design. Generally, it takes a lot of time to get a buy-in from stake holders.

For mock-ups presentation is also important but they are static visualizations of the interface. They are medium to high fidelity designs with costs between wireframes and prototypes. They are colored so they represent the exact presentation of the screen. Once a mock up is ready, it should be religiously followed by development teams.

Prototypes are the interface skeleton of the App. Here both presentation and representation are important. Although fake data is displayed on prototypes, they are interactive in nature. They represent the exact flow as the real App. They are also medium to high fidelity and costliest of the three.

Here I have created a Wireframe for an App. Let’s name it as GitHub Card App.

I have created this wire frame using balsamiq. You can download the project definition. It is a great tool. You can download a 7-day trial version here:

Factors to consider:

There are numerous tools in the market claiming the ultimate. I thought it would be a good idea to think about the factors I would consider to select a tool for such purpose. Let me list them here as it might help someone else too.

Widgets & UI Library
It must provide all the controls supported with the selected device. On top of that, it should also provide any widgets and custom controls to make it easier to create a more meaningful UI wire frame. This also includes integration with maps and video platforms e.g. You Tube.

Wireframing Platforms
There are various wireframing applications. The applications, running locally, must be identified with the supported platforms. These platforms are for the wireframing applications themselves and not the end-application. It includes operating systems and devices running the wireframing application.

Feedback on Design
You might remember discussions and ideas getting lost in the emails. Since there are so much back and forth communications at this stage, it is best to keep all comments and notes at the same place as design. This would clear out the context of the comment. Any team member should be able to tag any suggestion / comment to any area of the design. They should be searchable. They might be different types including suggestion, Gold Plating, etc.

We should be able to identify the project areas and assign different rights to certain roles. We don’t want to share all the information for everyone, at least, until it is in a share-able format.

Version History
Not only the designs are continuously evolving, sometimes, we need to go back to an earlier design. This is only possible if we are keeping control of the versions of our design.

You can also use tools which provide version histories by default e.g. DropBox supports version histories. You can use DropBox for sharing between different stakeholders. Since DropBox already supports version histories, you don’t have to worry about it at all.

Pricing Plans
This is the first time I have seen something like this. It seems there are many wireframe / mockup tools which don’t provide any details on the pricing plans. They just ask for signing up and trying them. This seems awkward as price is one of the biggest constraint and could cause a big wastage of time if prices don’t fall in our range.

Although many of the tools are paid, there are trial versions available as well. There are also Free Editions for the paid tools with limited features.

Input Formats
Most of the tools require sketching and dragging / dropping items to create a design. But You might be sitting at a coffeeshop when you get an idea. You can draw it on a piece of paper or a napkin. Does your tool allow you to use this? There are tools which provide primitive support for that. They also allow adding links and navigation among those screens.

But the tools I have found, they don’t convert it to an mobile look and feel and the app is always in some sketches. It can be better than that and convert it to an iphone look and feel.

Linking screens and transitions
For developing a prototype, we need to simulate transitions between screens. The tool should allow us to define various screens and kind of workflow between screens. It should be able to identify the triggering actions for such transitions, plus the constraints. We should also be able to record the transitioning effects.

Simulators are a great app during development of an App but they can be deceiving. It is best if the tool also allows testing your app on an actual device but the simulators are generally very useful.

Documentation & Technical Support
The tool must provide extensive and user friendly documentation in order to understand the tool. But if you think about it, there are trade-offs, how many hours of training did you have to go through when you first got your smart phones? Why do these tools have to be any different than that. If a tool requires big documentation, it might be a bad thing. It should be intuitive enough for the user to figure out his way.

There is nothing better than good technical support though. Talking to a real human when something doesn’t work as you intend, is always great help!

Regular & Frequent Updates
Things have a chance to improve as frequently as they are updated. The tool should not be dead. It must be updated regularly to add new features and fixing defects. Before choosing a product, just see how many versions and fixes were released last year.

Available Tools

We have already discussed about Balsamiq. It is a great tool to design wire frames. There are a number of tools used in the market. I am listing some of them here. They support designing wire frames / prototypes and mock-ups for Apps.

Fluid UI
Fluid UI is used by a number of Fortune 100 companies including DELL. Although there is also a free version but this looks only good for playing and getting experience with the tool. For a commercial ready application, it would be necessary to upgrade to a paid account.

App Cooker
A mockup tool for creating iOS App mockups for iPhone and iPad.

InVision App
This looks very promising and seem to have nearly all the options we just discussed.

JustInMind Prototyper

proto.IO

https://popapp.in/