Prototyping Mobile Apps

by Stefano Virgilli

Adobe Community Professionals - PhotoshopAdobe User Group ManagerAdobe Certified Instructor (ACI) Expert (ACE) After Effects 6.0 / 7.0 / CS3 / CS4Adobe Certified Instructor (ACI) Expert (ACE) Acrobat 9 ProfessionalAdobe Certified Instructor (ACI) Expert (ACE) Captivate 3Adobe Certified Instructor (ACI) Creative Suite® MasterAdobe Certified Expert (ACE) Creative Suite® Master CS3Adobe Certified Expert (ACE) Design Master CS4Adobe Certified Expert (ACE) Design Specialist CS3 / CS4Adobe Certified Instructor (ACI) Expert (ACE) Dreamweaver CS3Adobe Certified Instructor (ACI) Expert (ACE) Encore CS3Adobe Certified Instructor (ACI) Expert (ACE) Illustrator CS3 / CS4 / CS5Adobe Certified Instructor (ACI) Expert (ACE) InDesign CS3 / CS4 / CS5Adobe Certified Instructor (ACI) Expert (ACE) Photoshop CS2 / CS3 / CS4 / CS5Adobe Certified Expert (ACE) Photoshop LightroomAdobe Certified Instructor (ACI) Expert (ACE) Premiere Pro 2.0 / CS3 / CS4Adobe Certified Expert (ACE) Video Specialist CS3Adobe Certified Instructor (ACI) Contribute CS3Adobe Certified Instructor (ACI) Photoshop Lightroom 1.0Adobe Certified Associate Educator in Visual Communication using Photoshop CS4Adobe Certified Associate Educator in Web Communication using Dreamweaver CS4Adobe Certified Associate Educator in Rich Media Communication using Adobe Flash® ProfessionalAdobe Certified Associate in Visual Communication using Photoshop CS4Adobe Certified Associate in Web Communication using Dreamweaver CS4Adobe Certified Associate in Rich Media Communication using Adobe Flash® ProfessionalAdobe Certified Associate in Video Communication using Adobe® Premiere®Apple Certified Final Cut Pro 7 End User

The Apps Scene

Not so pretty Apps

The Apps Scene

Pretty Apps

Branding Apps

Designing Apps

Adobe rules

Repetitive background for games

Filter > Offset

Command > Preview Package

To preview the App in an iPhone simulator, and export accordingly.

Mobile Apps design

Design guidelines

iPhone 4 prototyping kit:http://teehanlax.com/s3.php?path=files/iPhone_GUI_PSD_4.psd.zip

iPad prototyping kit:http://www.teehanlax.com/blog/2010/12/10/ipad-gui-psd-version-2/

Design guidelines

Android icons template:http://developer.android.com/guide/practices/ui_guidelines/icon_design.html#templatespack

Case history

Offline

Online

Online

iSpin Horror Puzzle

Live demo