Design iPhone apps in Photoshop: iMartini or My Dry Martini?

All the pizza was gone by the time I managed to get to first Photoshop User Group meeting of the year at Adobe’s voluminous cafeteria located at 601 Townsend Street. It took awhile for me to drive across the Bay Bridge, a drizzly wet Thursday evening with both FastTrack and cash customers who were backed up behind the metering lights, my first attempt at driving across the Bay Bridge since a cable had snapped last Labor Day weekend with ensuing accidents over the bridge’s now infamous new structural “S-curve.” But tonight I was good. My GPS device was honed in on my target, I arrived in time to find a chair and hear surrounding chatter (“We stayed in Lisbon for three days. It was cold and rainy and there were a lot of cobblestones.”) I waited for the lights to go down, when two t-shirted men from Aquent, a talent agency, which had been responsible for providing the now empty boxes of pizza, gave a current job forecast and encouraged one and all to stop by after the meeting. Before they exited stage right, they offered a few job pointers which included: developing a good resume, calling your old employers “to be sure you’ll get a good referral,” networking with people at user groups and staying current and relevant. They closed with “Mobile is big. So are visual front-end developers and everything Flash.” Now it was Marine’s turn. She didn’t waste time getting started despite her wrestling match with a clip-on microphone. I’d met Marine last year at the iPhone Network Lounge, but since that time, Bamboudesign has been in the news, including the New York Times and Information Week as a leading new iPhone and a new iPad developer. Marine waltzed the congregation through the development of an iPhone application using Photoshop, a nice cocktail app giving users an idea how to mix up Martinis. What else would it be called but iMartini? She started off with her own set of pointers that sounded a lot like old school journalism’s “who, what, when and where”--know the objective of your application; who are its users; identify key task, use scenarios, and then finally, sketch out your screens that will be later morphed into Design Templates. It’s all about fundamentals and being organized. A former employee of Macromedia in a former life, Marine gave the dimensions of iPhone applications that are available in Apple’s UI Guidelines and SDK. In portrait view, they translate to 320 px by 480 px with definitions for the bottom menu bar of 44px that are roughly equivalent to the size of a male’s fingertip, she quipped. There are more definitions, but check the SDK. Sans serif fonts, like Helvetica is the one to choose, although Arial also will make the grade. Text should be in the vicinity of 17 to 22 px with other definitions for labels and list view. Forget to underline, that is don’t! Other specifications include using the image file type = PNG since these vector images have a better alpha channel with greater color depth; moreover, 72 dpi is totally acceptable for graphic resolution size. Now for a lego starter kit of free pre-fab iPhone graphics, Marine suggested two good sources and here are the URLies: www.teehanlax.com/blog/category/iphone http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/ The rest of Marine’s talk would’ve made Benjamin Franklin proud. It was all about being organized, efficient, and frugal. She explained how to create a file structure of assets that included basic screens, templates, and screens that were unique to the application with PNG/PSD folders for buttons, images, labels, and whatever else you have hanging around. Layer and name everything in Photoshop, she advised, and, “Plan to have the status bar above the title because it’s more convenient for users.”Develop your PSD screens, PNG graphics (and don’t forget about developing your post-pressed buttons), screen flows, and specify your interaction. The last two steps, she explained, are largely for developers who get handed off the information. “Don’t let your developers guess,” she advised. “They’re very smart people, but not your typical user. Give them the full recipe so they can make the cake exactly the way you want it.” Tips from the audience included using Photoshop to create highlighted (action) buttons. Just “batch ‘em.” Also craigslist is a good place to find roaming developers. As for me, pass the Martini… http://www.bamboudesign.com/preso/photoshop/iphoneappdesign_Photoshop_PDF.pdf To contact Marine: marine@bamboudesign.com Lenore Weiss http://techtabletalk.posterous.com/

Posted via email from techtabletalk's posterous