It’s always nice to have a little validation!
Ok, on to the art: we have the application icon. Apple requires a 512 x 512 file in JPG or PNG format. It uses this large file to create the application icon which can be seen on the iTunes landing page for the rosary app and it’s page in the iTunes App store:
The leather background and bevel for the rosary app was done in Fireworks. We were going for a classy but subdued look, and avoid any sentimentality. We also wanted to appeal to men to help get around that fact that some people see the rosary as an “old ladies” prayer. Hardly! Read the recent Wall Street Journal article about how tough guys are getting on their knees with a rosary lately, and how a rosary app like this fits the bill.
The “gem” itself was created in 2 part in Blender (an open source 3D drawing and rendering program), and composited in Photoshop. Here is the original art for that. The jewel was created as a translucent box that we subdivided at angles until we approximated a hand-cut gem. We then set lighting as a jewel photographer might:
The interface
The interface is linear, from top to bottom, left to right. A traditional rosary is circular, but trying to emulate that in the iPhone rosary app created affordance issues. As it is, we have some fat-finger syndrome in the interface due to the number of “gems” needed to complete the prayer cycle. While you can click any gem at any time, the large arrow button at the bottom is the main navigation tool. Simply click the arrow and the rosary advances, lighting up each jewel along the way. We used the Symbols feature of Fireworks which was indispensable because it took many tweaks to get each gem right. While we tweaked, we only had to make changes to the master copy and all the others would update. What a time saver!
Text helps and guide
Using Objective-C, we created the logic for the app, including the modal screens that are launched from the secondary icons above the arrow bar. The text was set in standard HTML imported into XCode, but styled by hand in Dreamweaver. The modal graphics are deliberately muted so the iPhone doesn’t glow too much, which we think any best rosary app is going to have to get right. It would have been very bright, by contrast, to go from a muted UI screen to largely bright white UI screen, so we opted for a toned down textured look:
Splash screen
Although Apple didn’t quite intend to allow the use of a “default.png” to substitute as a splash screen, it is quite often used that way. This is the screen that launches when you first click the icon from the iPhone UI. This was also created in Fireworks. We used the custom polygon tool and a drop shadow that knocks out it’s own shape to create the 12 stars. The text is Trajan with a gradient fill to simulate gold, along with a slight indented emboss to simulate metal being set into leather. The overall goal for this screen, as well as the other UI elements, was to create something that had a handmade feel, along the lines of a leather money clip or key fold:
And that’s it’s for “Rosary Gems”. We have more novel rosary UI’s on the way. Stay tuned!
