Chapter 4

Building a Cross-Platform Social Photo-Sharing Application

BECAUSE THE FOCUS of the book is on mobile development and not mobile design, this chapter uses a simple design to illustrate the concepts it’s going to teach. Of course, mobile design is critical to the success of your app in the market. Mobile applications don’t have user’s manuals; if users can’t make sense of the app after a few clicks, they will probably never use it again.

When building designs for clients, we usually try to create wireframes or simple mockups of the application screens. This process provides a baseline for what we believe we are trying to build and the images stimulate questions in a way that sometimes words on a page cannot.

Using Balsamiq to Design Mockups

I like to use simple tools for laying out the information since this is really more of a requirements/features/functions phase and not a user interface design phase. A simple tool I have used with success (and the one that’s used for the images in this chapter) is Balsamiq.

The website sums up to two keys reasons I like Balsamiq:

  • Mockups reproduce the experience of sketching on a whiteboard, but this allows them to be distributed, reviewed, and updated.
  • These wireframes remove the distraction of the user interface design and put the focus on the features and the functions. The design team can then use these wireframes in a later phase of the project.

Let’s walk through the sample mockup screens. To start with, Figure 4-1 shows a ...

Get Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.