Design iPhone Applications in Photoshop

To view this page ensure that Adobe Flash Player version 9.0.124 or greater is installed.

Please login or register to make a comment!

by Marine Leroux, Bamboudesign Photoshop Users Group 4 February, 2010 Design iPhone Applications in Photoshop About Bamboudesign Founder & CEO: Marine Leroux (formerly at Adobe) Launched in 2008 in San Francisco Mobile Application Development iPhone, iPad, Android, and other platforms www.bamboudesign.com We design and develop next generation applications based on high-end user experience and advanced technical solutions. Bamboudesign builds haute-couture mobile applications for brand businesses and the entertainment industry. Before the Design Game?

Tool? What is the application 9s purpose? Identify 2 to 3 key features which the app will do very well .

DeIne your application DeIne the Usage 1. Who are the users? 2.

Identify key tasks. 3. Identify use scenarios.

cWhen using the app, Scott wants to see the cars available in his neighborhood frst. d (Zipcar) cScott is organizing an impromptu dinner with friends and needs a car to get groceries. He launches the app and looks for an available medium sized car at the Zipcar lot closest to his current location. d (Zipcar) Sketching & UI Guidelines Sketch Out The Screens Organize the content De*ne the navigation scheme Identify the interaction Templates Unique screens Menus Views 480 px 320 px Status bar 20 px Top menu/nav. 44-60 px ... more. less.

Bottom menu 44 px Visible content area 356-372 px 480 px Status bar 20 px Top menu/nav. 44-60 px Bottom menu 44 px Visible content area 212-228 px 320 px Row height 44 px Helvetica (or equivalent) Font Text size 17 to 22 px 12 px 20 px Emphasis/List/Sort Bold Avoid underlining! 44 x 44 px Icons & Buttons 57 x 57 px 44 x 27 px Image File Type: PNG (transparent background) iPhone GUI Sources Use existing iPhone graphics: Exist in xCode Create your own graphics: Save as PNGs and / or http://www.teehanlax.com/blog/category/iphone/ Courtesy of Teehan + Lax PSD Iles http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/ Courtesy of The Working Group Each icon comes as a vector PNG Ile. Design! iMartini Create A File Structure Design Templates & Menus 1 Bottom Menu Bar BasicLiquorsCocktailRecipe Faves Design Roadmap Design Screens & Views 2 Save each graphic as PNG 3 Create button and label highlights when tapped! Build screen Jows 4 Specify the Interaction 5 How do each screen appear? $ Zoom into the screen $ Slide in from left, right $ Flip from right to left How does the user interact with the UI? How does the system respond? $ Tap once > button highlights > cxyz d screen zooms into the screen You completed the UI. Now what? PSD SCREENS GRAPHICS FLOWS INTERACTION User Interaction SpeciIcations <code> Et voila! Q&A Marine Leroux marine@bamboudesign.com www.bamboudesign.com 123 10th Street, San Francisco, CA 94103

less