Icon & App Design Secrets for Mobile

Mobile Design Intermediate Web Design MM2213Art Institutes of California Sunnyvale Bess Ho May 2011

Silence

Who am I?10+ UI UX Web2+ UI UX MobileAdjunct ProfessorBook AuthorConference Speaker

Spock Bess Half Vulcan Half Developer Half Human Half Designer Pointed Ears Pointed Eyes“I am a Developer, Not a Designer”

Dancing Piano Dancing Drum Dancing Steel Drum Doctor Tricorder Sound Tricorder

a se e le s tR 1 pp App Store’s Category ListA Beauty Pageant

a se e le s tR 1 pp App Store’s Category ListA Beauty Pageant 24 HRS

a se e le s tR 1A pp

Category List 1 App Icon 2 App Name 3 Price

Custom App Icon Professional Designer Outsource at least $500 Average range $600-$1,200

App Design Project Designer 20 hrs per week Developer 60 hrs per week

App Design ROILifelike Alarm Clock and Weather HD< 2 weeks #9 paid app for iPadGross $4,781 in a single dayBarely 5 Million iPad in Jun 2010

iPhone Icon Promotion 57 x 57 pixel iPad Icon512 x 512 pixel 72 x 72 pixel iPhone App Store Submission

N GP App Store Home Page 75 x 75 App Page iTunesArtwork 175 x 175 iTunes Purchased Page 70 x 70 Apple apply rounded corner Option to turn glossy off512 x 512 pixel iPhone App Store Submission

162 ppi 132 ppiDisplay Density (pixels per inch)

Camera+ will help bring that creativity out in you, all with a fun,innovative, and beautiful design.

Thermo is a simple approach to Weather. This little pocketthermometer shows the current temperature outside along withthe temperature from the day before.

Busy checking photo links from your old Twitter client? Scopyextract photos from your timeline and present them quickly andbeautifully. Browse pictures from your friends, or search a topic.Be prepared to be surprised!

Tea Round is Russian roulettefor those wanting to sort out whofetches the tea at the ofﬁce forthe day. The design elementsused in the app are gorgeous andsubtle detail like the steam, makeit a real winner.

Classics brings some of thosefavorite classic books a coupletaps away on your phone. Pageﬂips make you feel like you aredealing with a real book and thenice cream color is easy on theeyes. The sexy icon makes mewonder why I don’t have thesebooks on my shelf at home linedup like this.

Delivery Status Touch helpskeep track of those packages thatyou’re expecting in the mail. Theapp uses nice subtle gradients ina table-like structure with avariety of unique colors. Theicon resembles a 3D packageand makes you giddy knowingyour new item(s) will beshowing up soon.

Voices is a nice voice morphingapp that brings some silliness toyour iPhone. The icons in theapp have a lot of detail andprovide some cool characters tothe app. The red carpet andwood are great looking andmake you feel as if you are onstage as you tweak your voice toyour hearts content.

Where To? is a point of interestapp that allows you to easily ﬁndrestaurants, banks, etc. The appuses a great black turn wheelwith a blue glow for highlighteditems. The app uses a leathertexture, which is a change fromthe many types of wood texturesother apps use. The app icon iseasily recognizable too if you arefamiliar with exit signs on theroads.

Convert bot is another usefulconvert utility from the tapbotscrew. The app icon matches theinterface well and it uses thosesubtle gray gradients and darkdrop shadows that they areknown for. The unit icons areeasy to make sense of too.

Convert took other complexconverters by storm by underdoing the competition andmaking conversions functionsimple like a calculator. The uniticons make it very easy torecognize what unit you aredealing with and the app iconmeshed with the app perfectly.

Reeder is an RSS feed reader, whichsyncs with your Google Readeraccount. The app icon looks greatwith a hint of orange and the popularRSS bars. I think what makes it greatis the simplicity of the app using agray color. With tiny little iconsrepresenting the news source and it’sability to focus on the content, itmake the app stand out from otherbloated readers.

Groceries is a nice lookinggrocery shopping list app. Thecork looking background andpaper provide realism. Thedetailed app icon features qualitysoup cans, which is sure to catchsome lookers who are in need ofan app to track their groceries.

The Jamie Oliver app has 55recipes and is designed to helpyou cook some delicious mealsin 20 minutes or so. They use adarker wood and have greatpaper textures throughout theapp. The fonts and colors govery well together and makes theapp seem user friendly.

Hipstamatic brings back ananalog look to your digitalphotographs. The camera, lenses,and ﬂashes in the icon andinterface have great detail. Theoverall interface has a verygrungy look, which is verydifferent from other apps in thestore.

iHandy Level is probably one ofthe sexiest leveling tools in theApp Store. With it’s great use ofrealistic wood and brushedmetal, along with a detailedbubble. There is no wonder whyI no longer need a leveling toolfrom the garage anymore.

Pastebot is the easiest way tomanage your clipboard clippingson your iPhone. It sports subtlegray gradients and ambientglows throughout the app. Thedesigner, Mark Jardine, alwaysmakes his app icons look cuteand friendly and they match wellwith the interface.

TimeTuner is a full-featuredradio alarm clock. It uses moremuted looking colors with a nicelooking scale for a sleep timer tomix it up over other apps. Theapp icon serves as both a clockand depicts radio waves, whichis subtle but recognizable.

Cellar makes managing yourwine collection sexy and worththe effort. The app uses greatdrop shadows and has ambientlighting almost everywhere. Thedetails on the wine bottles andglasses is exceptional and hardnot to notice.

Ghostly Discovery is a mood-based radio station, which helpsyou discover songs based onyour mood. It has some greatlooking dial knobs. The colorwheel looks great on the darkgray background and the icon isdifferent enough to easily beremembered.

Beats combines a BPM counterwith an advanced DJ metronome.The icon looks sharp and identicalto the interface. The use ofdiagonal lines and purple colorsmakes this app stand out amongthe other apps in the musiccategory. The dial pad / turn wheellooks very realistic and makes youfeel like you have a nice stereosystem at your ﬁnger tips.

Tweetie is a popular Twitterclient on the Mac, and Tweetie 2is the mobile app that continuesit’s legacy. Blue glows andsubtle details like the favoritetweets star make the app feelpolished and functional. The appicon is simple and effective atdisplaying a sexy chat bubble.

Twitteriﬁc Pro is another gamechanging Twitter client for theiphone. Just from the app iconalone, you can see the detail likethe feathers, which really makesthe app stand out in the store.The great use of dark pixel work,shadows, and glows makes theinterface jump out and a pleasureto use.

Awesome Note goes above andbeyond the default notesapplication on the iPhone.Awesome Note has beenfeatured by Apple as one of thebest Apps of 2009. It’s not hardto notice why when you see thedark wood and detailed texturesthroughout the app that grabyour attention of quality work.

With Groups, you can manageyour contacts easily with thisgreat looking tabbed interface. Awide range of colors makes theapp interesting and eye catching.The icon is 3D and easy todistinguish in the store.

Facebook is probably one ofyour favorite social networksand it’s easy to see why.Facebook pays attention to detailand uses it’s notorious blue colorso people can recognize it. It hassome great detail in the iconsand resembles very closely to theactual web site in terms offunctionality.

App Icon Design1 Icon is your 1st message Icon is your 1st impression Keep it simple yet clear Visual display of your app in 57x57 pixels

App Icon Design2 Pixel perfect design Use of gradients, highlights, reﬂections, shadows Use rich texture, layers, 3D

App Icon Design3 Icon design reﬂect app design Use unique design elements

App Icon Design4 Shine your icon design on white or gray background “Kodak” moment

Utility

iHandy Level is probably one ofthe sexiest leveling tools in theApp Store. With it’s great use ofrealistic wood and brushedmetal, along with a detailedbubble. There is no wonder whyI no longer need a leveling toolfrom the garage anymore.

Convert bot is another usefulconvert utility from the tapbotscrew. The app icon matches theinterface well and it uses thosesubtle gray gradients and darkdrop shadows that they areknown for. The unit icons areeasy to make sense of too.

Productivity

Tea Round is Russian roulettefor those wanting to sort out whofetches the tea at the ofﬁce forthe day. The design elementsused in the app are gorgeous andsubtle detail like the steam, makeit a real winner.

With Groups, you can manageyour contacts easily with thisgreat looking tabbed interface. Awide range of colors makes theapp interesting and eye catching.The icon is 3D and easy todistinguish in the store.

Notica is the ultimate way toconnect the things you see whatyou want to remember aboutthem. With a highly intuitiveinterface designed for photos &videos, Notica is your perfectvisual memory companion.

Classics brings some of thosefavorite classic books a coupletaps away on your phone. Pageﬂips make you feel like you aredealing with a real book and thenice cream color is easy on theeyes. The sexy icon makes mewonder why I don’t have thesebooks on my shelf at home linedup like this.

Navigation

Where To? is a point of interestapp that allows you to easily ﬁndrestaurants, banks, etc. The appuses a great black turn wheelwith a blue glow for highlighteditems. The app uses a leathertexture, which is a change fromthe many types of wood texturesother apps use. The app icon iseasily recognizable too if you arefamiliar with exit signs on theroads.

Life Style

Cellar makes managing yourwine collection sexy and worththe effort. The app uses greatdrop shadows and has ambientlighting almost everywhere. Thedetails on the wine bottles andglasses is exceptional and hardnot to notice.

Find a open store with drivethrough? Explore coffees, ﬁndnutrition info, build perfectdrinks. Share drink by email,SMS, directly to their phoneswith Facebook & Twitter.

Starbucks Card is the perfectcompanion to your card. Itdisplays a barcode to makepurchase. It’s fast. It’s easy.Check your balance, reload cardwith credit card or PayPal, viewtransactions, track your stars &rewards.

Photography

Hipstamatic brings back ananalog look to your digitalphotographs. The camera, lenses,and ﬂashes in the icon andinterface have great detail. Theoverall interface has a verygrungy look, which is verydifferent from other apps in thestore.

Camera+ will help bring thatcreativity out in you, all with afun, innovative, and beautifuldesign.

SocialNetwork

Interaction Design Principles1 1st Time Experience Limited amount of functionality for user to meet the objectives

Interaction Design Principles2 Reduce no. of steps it takes a user to complete a task Key tasks should be efficient

Interaction Design Principles3 It becomes easier for user to use each time Design less effort for frequently use tasks

Interaction Design Principles4 Design for no user mistakes in user interface

Interaction Design Principles5 Keep common task simple Avoid unnecessary functionality Keep visual design & layout clean

Interaction Design Principles6 Design exactly what user expect to do

Interaction Design Principles7 Most important info should be most visible while less important info should be less visible

Interaction Design Principles8 Give visual and/or audio cue for user action

Interaction Design Principles9 Like-items should display and act consistently across the entire app or between applications Keep UI Standards

Interaction Design Principles10 Keep users happy Measure User’s Happiness

Design Guideline Design for Simplicity1 Reduce functionality Keep navigation narrow & shallow Avoid extra info Reduce or remove preferences Use progressive disclosure

Design Guideline Design for Small Screen2 Minimize user input Minimize vertical scrolling Avoid horizontal scrolling Use hyperlinking effectively Provide useful error messages Prioritize information on each screen

Design Guideline Provide Useful Feedback3 Identify critical feedback Quick response time

Design Guideline Maintain Existing Design Standards4 Use existing UI standards Use Real World Metaphors

Design Guideline Respect physical & mental effort5 Use wizards to simplify complex interactions Design for efficiency

Resources

iOS Human Interface Guideline Human Interface Principles App Design Strategies User Experience Guidelines iOS UI Element Usage Guidelines Custom Icon & Image CreationGuidelines

Icon Templatehttp://pixelresort.com/blog/app-icon-template/

Icon Templatehttp://www.tapptics.com/iphone-ipad-ios-icon- speciﬁcations-and-templates/

Paper Wireframe Pen + Paper

Digital Wireframe Balsamiq http://www.balsamiq.com/

http://www.slideshare.net/bess.ho Q&A

http://www.servicesmobiles.fr	496
http://servicesmobiles.fr	32
http://servicesmobiles.typepad.com	9
http://www.typepad.com	5
http://translate.googleusercontent.com	2
http://paper.li	1
http://feeds.feedburner.com	1
http://www.servicesmobiles.typepad.com	1

Icon & App Design Secrets for Mobile

by bess.ho on May 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 547

Statistics

Icon & App Design Secrets for Mobile — Presentation Transcript