Prototyping tools for iOS app design: Part 2 - Pen & Stencils

Previous post about iOS app design prototyping tools presented the classification of such tools:

• Prototyping tools for iOS app design: Part 1 - classification

Here is the second part of my prototyping tools catalog: papers and stencils. The choices are not that many for traditional tools.

1. UI Stencils: Very popular and high quality stencils. Very classy and attractive. iPhone and iPad stencils available. Pricing starts at 24.95$. Sketch Pads offered starting at 12.95$. Very well done and high quality. Highly recommended. One more thing, you can even get sticky versions of the sketch pad for drawing board sessions. 
2. MobileStencil: iPad, iPhone models all supported with most of the UI basic elements. Prices starts at 9.99$ for iPhone version. iPad version sells for 14.99$. They are plastic stencils that you can use with model papers of iPad or iPhone devices. 
3. Pocket Sketches: pocket sketchbooks, actual size of the device. Pricing is 20$ for a 5 pack of 16 double sided sheets or 8$ for a single sketchbook. Sketchbooks is of the same size of the device. iPad version not offered yet. 
4. Finally, don't miss this: 10 Free Printable Web Design Wireframing Templates. 

As you can see, traditional tools are not popular, but those two kits are the best on the market.

Prototyping tools for iOS app design: Part 3 - Bitmap based kits

Previous post about iOS app design prototyping tools presented the classification of such tools:

• Prototyping tools for iOS app design: Part 1 - classification
• Prototyping tools for iOS app design: Part 2 - Pen, Stencils

Here is the third part of my prototyping tools catalog: electronic templates. There are so many electronic templates that I had to create two different categories for them: bitmap-based

Bitmap-based kits are very popular for one reason: Adobe's Photoshop prevalence in the design community. Here is the list of very popular kits. 

1. iPhone PSD Vector Kit
2. iPhone GUI Design Template
3. FreshBooks iPhone Application GUI
4. Matte iPhone UI
5. iPad GUI Kit in PSD Format
6. iPhone GUI PSD 3.0
7. Yahoo! Design Stencil Kit (many formats, PSD available)

Prototyping tools for iOS app design: Part 1 - classification

For those who come often to read my blog, you know that I'm a big fan of prototyping iOS apps before doing any development. For this purposes, tools are needed and many blog posts in the past we're published on the subject:

• Review of Blueprint for iPad - the best prototyping tool
• Review of iMockups for iPad
• Prototyping tools - request for comments and suggestions
• Basic prototyping tools - part 1
• MockApp - a nice UI prototyping tool

For newcomers to iOS development party, choosing the right prototyping tool can be tedious and lend to a lot of trial and error. This can be a waste of time. In order to help people in the process of selecting a prototyping tool, I decided to build a complete catalog of tools available. In order to achieve this, the first thing to do is create a classification of those tools. So, in the first blog post on the subject, here is a proposed classification.
Stay tuned for the next blog post about traditional tools: paper and stencils. If you have any suggestions of tools of that kind that you know about and want to share, post your info in the post comment section. Thanks.

Conclusions on my first open beta under TestFlightService

I've been using TestFlightApp service for 10 days now for an open beta of Ultimate Password Manager 3.0 that should come out in the next few days. Here are a few interesting facts.

• More than 40 peoples signed up for the open beta. 
• 12 builds have been seeded to beta testers. 
• I've received many feedbacks. Lot of them demonstrated very engaged and professional iOS developers. 
• The service is invaluable to help build better software.
• About a third of all testers actually installed the application on their registered device.

Following is a graph of beta tester involvements with my open beta.

As you can see, this is a small portion of testers who sends feedback. What can I say about this? This could be because the application is mature and nearly ready to go on the App Store and there is not too many issues to report. The amount of feedback is not really important, what is important is the quality of the issue reported. I was lucky to have a few testers with very interesting comments about the general design of the application and I took the feedback very seriously. The end result is an improved application to release to the App Store.

For a complete review read my blog post "TestFlightApp, a complete review".

TestFlightApp: a complete review

In this blog post, I want to review something new, something cool for all iOS developers. I want to review a new service that may change the iOS development landscape quite a bit because it is quite... magic.

If I could name what is the most frustrating and time consuming aspect of building iPhone apps after the actual development time would be the management of the beta phase. What are the issues regarding beta testing iOS apps right now?

1. finding beta testers to test your iOS app can be hard beyond iOS developer own network
2. managing the provisioning profiles to include beta testers UDID of their devices
3. keeping in touch with all beta testers and provide them new builds
4. managing beta testers feedback

Currently Apple's offering doesn't address any of these problems. To help developers overcome these shortcoming, a new service went live in open beta form and is called TestFlight available at http://www.testflightapp.com.

TestFlight's magic comes with beta distribution of your apps over the air. Here is how the service work. After registering yourself as a team leader and registering your own devices for testing, you build a network of beta testers by sending invites or by advertising a link to you application opened for testing. Registered users along with their registered devices get a chance to download you app, over the air simply by logging in to the web service from their device. No need to send them an .ipa file with the provisioning profile. iTunes is not needed. Something Apple should have done itself.

So you first create a team. You can create a team in order to work for different clients or for different jobs. A team is a group of people with one or many devices.  Inside a team, you can create distribution list. These will allow you to target a group of testers. You use them to send notifications of new uploaded builds.

When uploading a new build, you may choose to advertise it to a few testers, not all by using distribution lists that you create

Next, you make sure that all registered user devices are defined on the Provisioning portal at developer.apple.com. You download your new profile and install it on your Mac. You create a new build of your application with the "Build and Archive" command. Then, from Organizer, you share this build as a file (and make sure you sign it with the right provisioning profile just downloaded). Finally, you upload your build to the TestFlightApp web site. 

You upload the build created from Xcode's Organizer

Beta tester will receive an email asking them to install the new build like shown below.

Installing a beta build - from start to finish

What I love about TestFlightApp

• The web site design is simply gorgeous. Really. I'm really impressed.
• The service is simple to use because the web site is very well designed.
• The service helps me create a network of beta testers and build some awareness of my iOS app I'm currently working on. You can invite member of the press to test a nearly ready for market app very effectively.

What TestFlight cannot do

• You still need to add each device on the provisioning portal at developer.apple.com.
• You still have to generate a new provisioning profile before building a new Ad Hoc release.
• You still need to build and archive a new version of your application for distribution and sign it with the new provisioning profile.

A few more things to notes

• after uploading a new build, users must visit the web site from their device in order to view available build of every applications.
• each beta tester needs to register with TestFlightApp and register at least one device with the service. We cannot distribute app to anonymous beta tester.
• we can use an URL to share with peers to advertise a beta campaign. Those who follow this link will get registered as recruits. 

What is still missing or area open for improvements.

TestFlightApp is still in beta but is surprisingly well done, stable and complete. But, I see a lot of potential for this service like:

• having a place to discuss found bugs. Right now, the only way is by email directly to the developer;
• being able to remove failed uploads of apps;
• being able to know which teammate downloaded a specific build, we only have a general download counter;
• visiting the site from an iPad after being authenticated doesn't allow viewing the dashboard; you only get the install apps view;
• developer profile could be created with testing abilities, area of interest, how much effort that will be invested in beta testing (user interface, design, type of application);
• analytics that we can include in beta build that would interact with TestFlight services and provide automated feedback from the beta testers.

All in all, TestFlighApp maybe one of the most useful tool to come to the market in 2011 for iOS developers (well, maybe Xcode 4 will be more useful). So, if you are a developer, go and register yourself with the service... One more thing: it is free. How cool is that!

Beta testers needed for UPM 3.0 (through TestFlightApp)

Using the new and really cool TestFlight service, I want to try an open beta of the next release of Ultimate Password Manager. Version 3.0 comes with a lot of new features and updates. If you are an iOS developer, take this opportunity to test this service and my application too!

Enter the beta with TestFlight here: http://testflightapp.com/join/e44da85044a1f3083b14a6182e13f6a1-MTQxMg/

Password Safe in Ultimate Password Manager 3.0

Change log:

[NEW] : iOS 4.0 Fast application switching support.
[NEW] : Search in password safe.
[NEW] : Alphabetic index in password safe.
[NEW] : Local notifications for expired password entries.
[NEW] : Use "Pull To Refresh" to get a new set of generated passwords.
[NEW] : Filter password safe entries with the new action menu instead of the segmented bar.
[NEW] : Restore mode now accessible from the Dropbox sync view.
[NEW] : You can now set a password to never expire by tapping a button instead of using the slider.
[NEW] : Show the password for a safe entry without editing the entry.
[UPDATED] : Full support for Retina Display.
[UPDATED] : Application's icon.
[UPDATED] : Application's name on home screen.
[UPDATED] : Optimized network connectivity detection.
[UPDATED] : Passwords tab is now called Generate.
[UPDATED] : Rules are now set from within Generate.
[UPDATED] : Profiles are now called Policies.
[UPDATED] : Application's initialization routines.
[UPDATED] : Safe entry's description and note fields are now much bigger.
[UPDATED] : Application's settings logical grouping.
[UPDATED] : All application feedback messages are now dependant of the Show Live feedback in Settings.
[UPDATED] : Password Safe design and look.
[UPDATED] : Dropbox status now includes the account name.
[UPDATED] : The period for expiring passwords is now 7 days instead of 3.
[UPDATED] : Application icon.
[UPDATED] : Tabbar icon.
[UPDATED] : Icons in Settings, Password types and Categories
[UPDATED] : Redone the Quick Startup Guide.
[FIXED] : Date displayed are now in local time (instead of GMT).
[FIXED] : Data corruption could happen in rare cases.

Blueprint updated to version 1.3

Blueprint (reviewed in this blog post) got an update this week.

Version 1.3 bring the following improvements:

• Better options for PDF exporting
• Better PDF quality when exporting
• Ability to import pictures from iTunes file sharing and from other projects
• Bug fixes

iOS Visual Consistency tool - using a color palette

User Interface design is about presenting visual consistency and building expectation consistency. One aspect of this is the use of colors. When I first started Ultimate Password Manager, I was using colors without really thinking about it, I only had a vague idea of which colors I wanted to use. As the application grew is complexity and the number of views started to grow accordingly, I started to notice that the use of colors in the application wasn't always the same from one view to another. This became a problem. So I decided to invest some time creating a color palette for the UI application design.

The basic colors were chosen from a gradient that I created using two colors. I wanted a relatively dark, blue-ish theme. So I picked up black and a blue then created the following gradient. I added a few things like strokes and a white text to see how it would look.

Most of the UI element colours were chosen from a gradient palette that I liked.

For the first year of my endeavour as an indie iOS dev, I was using Apple's Keynote a lot to do my user interface elements design. So the color palette was built using Keynote.

Using the Apple's color picker, I made color choices and made technical description of each one so I could reproduce the RGB color in other software as needed.

In order to validate my color picks, I made a rough UI prototype. This way, it gaves me a better idea of the overall look of the final product.

Here is an example of one of the application view, a password safe entry.

Noisy background is using one of the basic color with a noise filter applied to it in Pixelmator

Today, most of my UI work is done in Pixelmator or Sketch but I consistently refer to this color palette done with Keynote. 

Review of Blueprint for iPad - the best prototyping tool

Back in december, I wrote a review of iMockups for iPad. While I found the application good, I felt it was lacking in so many areas. Since then, I found out Blueprint. I think this is the best iOS application user interface prototyping tool right now. Here is a complete review.

Blueprint initial interface is modeled on Apple's iWork apps for iPad. I think this is a great idea to replicate this paradigm because it is well adapted to the iPad document management style. 

Application first view - very similar to Apple's iWork apps

The application comes with a project example. Blueprint is so capable the makers of it created from scratch the default clock application of the iPhone. It is pretty close to the actual design. You can look at the full creation process on the company's web site.

From there you create a new project or duplicate an existing one. 

Choose a target device for the project

The next step is to select the target device for the prototype. As you can see, all current iOS device are supported in portrait or landscape orientation. Once done, the initial editing environment is presented. Any iOS developer will find similarities with Xcode Interface Builder.

The default editing view

The tool palette on the right is made of different parts. The top section correspond to the currently selected object on the design canvas. The following sections are the user interface element containing the selected object. I find this to be very effective. Also, the palette has two modes: properties or actions. Switching to the actions view, you will get the actions that you can set for the selected object.

Actions that can be assigned to an object

As you can see, for each object, you can assign an action for a tap, double tap or swipe. This is where you create links between screens in order to create a prototype of the application workflow. So you can build a very complete prototype by assigning different actions to all objects of the user interface. This is very cool. As you can see in the following screen shot, you'll see how complex a project can become.

Very complex prototypes can be built with Blueprint

I have spent quite a while in Blueprint and I have many observations. Here is a list.

• Objects can be placed on the design canvas with precision
• Foreground / background object placement can be set in order to build layers of objects
• Undo is available to help you correct mistake or do limited what-if
• Every UIKit widget is available with all the attributes you would expect to be able to set for each of them
• iPad is well supported with inclusion of the split view
• Blueprint supports iOS 4 multitasking (fast app switching)
• Some validation rules won't let you place object inside another, this is nice
• There is a complete control over text formatting, I mean full control (font, size, colour, etc.)
• All keyboards are available (alphabetic, numeric, etc.)
• Design options for UITableView allow all the needed flexibility to design plain or grouped tables with as many sections, headers, footer as you want - this is really nice
• Editing can be done in full screen mode, pinch to zoom is supported
• Color of links between screens can be set in order to help visually show related screens or workflow

Blueprint is well worth the money and kind of put iMockups for iPad to shame. There are a few things that I would like to see in Blueprint though:

• Support for the iPad external monitoring for presentation purposes
• Add a visual cue for the starting screen of a very complex prototype. The starting point is not always easily spotted on the canvas
• Add more expert options: currently only PDF is supported. 
• Add support for Dropbox
• Fix a few visual glitches
• Some user interface refinements could make this app even more compelling

Recently, Blueprint received a minor update that fixes a few things and improve others. The developer was responsive to my request. They also introduced a Blueprint viewer (iTunes link) that allows you to "play" the design on the iPhone, iPod touch or the iPad. This is really cool and it is free. So you export the project and using iTunes file sharing you can import it back in the viewer on the device in order to test the prototype or show it to somebody else. A preview mode is also available on Blueprint so the viewer is a bonus.

All in all, Blueprint is a must have for serious iOS developers or designers who wants (and should!) build realistic prototypes of iOS applications. Want to try it? Install the free lite version (iTunes link). 

Here are a few palettes that you will find in Blueprint.

Tools and palettes examples

Review of iMockups for iPad

The iPad seems a very attractive device for building rough prototypes of iOS apps:

• the screen is big enough to fit a virtual iPhone screen and tools
• the touch interface is a natural way of interacting with user interface objects

Searching the App Store for iPad applications to do prototyping brings out a few titles. One of the best according to user comments seems to be iMockups for iPad.

Since the iPad came out that I wish I could jot ideas of iOS apps on it. So I decided to take the plunge and buy iMockups for iPad. The application uses the same file browser metaphor as iWork for iPad from Apple. You start by creating a new project. Each project contains one or many screens that can be linked together in order to create a simulated application workflow and this, all project on an external monitor. Sounds great?

The default view in iMockups

As an exercise, I decided to create a very basic iOS app design: a UITabbar navigation based application. I've spend about an hour in the application to try different things.

iOS prototype example

I must say that I would give a 3 stars rating for this application. At 6.99$, I think it could be better. The application is still missing quite a few basic things in order to build good prototypes of iOS apps. See later for the list of things I find lacking.

Make no mistakes, iMockups for iPad is not bad at all but overall, I feel the wireframe theme of the app is too rough and no matter what, I won't be able to create a good looking and easy to sell iOS app prototype. Remember, prototypes are good for many things like jotting ideas of screens and UI elements placement. There also good to help sell an idea or a concept to someone and for that purpose, I think iMockups should provide a near pixel-perfect mode and put aside his wireframe mode.

What I like about iMockups:

• Can create prototypes of more than iOS apps
• Can output a prototype to an external monitor for presentation purposes
• Mimic Apple's iWork file browser providing a consistent user interface experience across many apps
• Can create link between pages
• Many export options

What is lacking in iMockups:

• Cannot choose tab bar icons, only placeholders
• Cannot import picture from Photos
• Cannot set background
• Cannot use grouped UITableView
• Cannot use rounded box
• No way to center text inside of a field
• Lack of fit and finish
• Can't drag the base drawing canvas to re-center
• Interface design is too rough, no near pixel-perfect mode

Stay tuned for another review of a prototyping tool for iPad that I think is really really nicely done.