Icon & App Design Secrets for Mobile
14 likes1,631 views
The document discusses the intersection of mobile app design and development, highlighting the essential role of app icons and user interfaces in attracting users. It covers various apps, detailing their unique features and design elements that enhance user experience, along with principles and guidelines for effective interaction design. The emphasis is on creating visually appealing and functional applications while maintaining simplicity and efficiency to meet user expectations.
Icon & App Design Secrets for Mobile
- 1. Mobile Design The Art Institutes Bess Ho May 2011
- 2. Silence
- 3. Spock Bess Half Vulcan Half Developer Half Human Half Designer Pointed Ears Pointed Eyes “I am a Developer, Not a Designer”
- 4. Spock Bess Complex Mind Complex Background “It would be illogical to assume that all conditions remain stable.” - Spock “It would be illogical to assume that a good developer can’t design.” - Bess
- 5. Dancing Piano Dancing Drum Dancing Steel Drum Doctor Tricorder Sound Tricorder
- 6. STANFORD UNIVERSITY School of Engineering (EE46) Engineering For Good Save The World Have Fun Doing It
- 7. a se e le s tR 1 pp App Store’s Category List A Beauty Pageant
- 8. a se e le s tR 1 A pp
- 9. Category List 1 App Icon 2 App Name 3 Price
- 10. Custom App Icon Professional Designer Outsource at least $500 Average range $600-$1,200
- 11. App Design Project Designer 20 hrs per week Developer 60 hrs per week
- 12. App Design ROI Lifelike Alarm Clock and Weather HD < 2 weeks #9 paid app for iPad Gross $4,781 in a single day Barely 5 Million iPad in Jun 2010
- 13. iPhone Icon Promotion 57 x 57 pixel iPad Icon 512 x 512 pixel 72 x 72 pixel iPhone App Store Submission
- 14. N G P 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 off 512 x 512 pixel iPhone App Store Submission
- 15. 162 ppi 132 ppi Display Density (pixels per inch)
- 16. Camera+ will help bring that creativity out in you, all with a fun, innovative, and beautiful design.
- 18. Thermo is a simple approach to Weather. This little pocket thermometer shows the current temperature outside along with the temperature from the day before.
- 19. Busy checking photo links from your old Twitter client? Scopy extract photos from your timeline and present them quickly and beautifully. Browse pictures from your friends, or search a topic. Be prepared to be surprised!
- 20. Tea Round is Russian roulette for those wanting to sort out who fetches the tea at the office for the day. The design elements used in the app are gorgeous and subtle detail like the steam, make it a real winner.
- 21. Classics brings some of those favorite classic books a couple taps away on your phone. Page flips make you feel like you are dealing with a real book and the nice cream color is easy on the eyes. The sexy icon makes me wonder why I don’t have these books on my shelf at home lined up like this.
- 22. Delivery Status Touch helps keep track of those packages that you’re expecting in the mail. The app uses nice subtle gradients in a table-like structure with a variety of unique colors. The icon resembles a 3D package and makes you giddy knowing your new item(s) will be showing up soon.
- 23. Voices is a nice voice morphing app that brings some silliness to your iPhone. The icons in the app have a lot of detail and provide some cool characters to the app. The red carpet and wood are great looking and make you feel as if you are on stage as you tweak your voice to your hearts content.
- 24. Where To? is a point of interest app that allows you to easily find restaurants, banks, etc. The app uses a great black turn wheel with a blue glow for highlighted items. The app uses a leather texture, which is a change from the many types of wood textures other apps use. The app icon is easily recognizable too if you are familiar with exit signs on the roads.
- 25. Convert bot is another useful convert utility from the tapbots crew. The app icon matches the interface well and it uses those subtle gray gradients and dark drop shadows that they are known for. The unit icons are easy to make sense of too.
- 26. Convert took other complex converters by storm by under doing the competition and making conversions function simple like a calculator. The unit icons make it very easy to recognize what unit you are dealing with and the app icon meshed with the app perfectly.
- 27. Reeder is an RSS feed reader, which syncs with your Google Reader account. The app icon looks great with a hint of orange and the popular RSS bars. I think what makes it great is the simplicity of the app using a gray color. With tiny little icons representing the news source and it’s ability to focus on the content, it make the app stand out from other bloated readers.
- 28. Groceries is a nice looking grocery shopping list app. The cork looking background and paper provide realism. The detailed app icon features quality soup cans, which is sure to catch some lookers who are in need of an app to track their groceries.
- 29. The Jamie Oliver app has 55 recipes and is designed to help you cook some delicious meals in 20 minutes or so. They use a darker wood and have great paper textures throughout the app. The fonts and colors go very well together and makes the app seem user friendly.
- 30. Hipstamatic brings back an analog look to your digital photographs. The camera, lenses, and flashes in the icon and interface have great detail. The overall interface has a very grungy look, which is very different from other apps in the store.
- 31. iHandy Level is probably one of the sexiest leveling tools in the App Store. With it’s great use of realistic wood and brushed metal, along with a detailed bubble. There is no wonder why I no longer need a leveling tool from the garage anymore.
- 32. Pastebot is the easiest way to manage your clipboard clippings on your iPhone. It sports subtle gray gradients and ambient glows throughout the app. The designer, Mark Jardine, always makes his app icons look cute and friendly and they match well with the interface.
- 33. TimeTuner is a full-featured radio alarm clock. It uses more muted looking colors with a nice looking scale for a sleep timer to mix it up over other apps. The app icon serves as both a clock and depicts radio waves, which is subtle but recognizable.
- 34. Cellar makes managing your wine collection sexy and worth the effort. The app uses great drop shadows and has ambient lighting almost everywhere. The details on the wine bottles and glasses is exceptional and hard not to notice.
- 35. Ghostly Discovery is a mood- based radio station, which helps you discover songs based on your mood. It has some great looking dial knobs. The color wheel looks great on the dark gray background and the icon is different enough to easily be remembered.
- 36. Beats combines a BPM counter with an advanced DJ metronome. The icon looks sharp and identical to the interface. The use of diagonal lines and purple colors makes this app stand out among the other apps in the music category. The dial pad / turn wheel looks very realistic and makes you feel like you have a nice stereo system at your finger tips.
- 37. Tweetie is a popular Twitter client on the Mac, and Tweetie 2 is the mobile app that continues it’s legacy. Blue glows and subtle details like the favorite tweets star make the app feel polished and functional. The app icon is simple and effective at displaying a sexy chat bubble.
- 38. Twitterific Pro is another game changing Twitter client for the iphone. Just from the app icon alone, you can see the detail like the feathers, which really makes the app stand out in the store. The great use of dark pixel work, shadows, and glows makes the interface jump out and a pleasure to use.
- 39. Awesome Note goes above and beyond the default notes application on the iPhone. Awesome Note has been featured by Apple as one of the best Apps of 2009. It’s not hard to notice why when you see the dark wood and detailed textures throughout the app that grab your attention of quality work.
- 40. With Groups, you can manage your contacts easily with this great looking tabbed interface. A wide range of colors makes the app interesting and eye catching. The icon is 3D and easy to distinguish in the store.
- 41. Facebook is probably one of your favorite social networks and it’s easy to see why. Facebook pays attention to detail and uses it’s notorious blue color so people can recognize it. It has some great detail in the icons and resembles very closely to the actual web site in terms of functionality.
- 42. App Icon Design 1 Icon is your 1st message Icon is your 1st impression Keep it simple yet clear Visual display of your app in 57x57 pixels
- 43. App Icon Design 2 Pixel perfect design Use of gradients, highlights, reflections, shadows Use rich texture, layers, 3D
- 44. App Icon Design 3 Icon design reflect app design Use unique design elements
- 45. App Icon Design 4 Shine your icon design on white or gray background “Kodak” moment
- 46. Utility
- 47. iHandy Level is probably one of the sexiest leveling tools in the App Store. With it’s great use of realistic wood and brushed metal, along with a detailed bubble. There is no wonder why I no longer need a leveling tool from the garage anymore.
- 50. Convert bot is another useful convert utility from the tapbots crew. The app icon matches the interface well and it uses those subtle gray gradients and dark drop shadows that they are known for. The unit icons are easy to make sense of too.
- 53. Productivity
- 54. Tea Round is Russian roulette for those wanting to sort out who fetches the tea at the office for the day. The design elements used in the app are gorgeous and subtle detail like the steam, make it a real winner.
- 57. With Groups, you can manage your contacts easily with this great looking tabbed interface. A wide range of colors makes the app interesting and eye catching. The icon is 3D and easy to distinguish in the store.
- 61. Notica is the ultimate way to connect the things you see what you want to remember about them. With a highly intuitive interface designed for photos & videos, Notica is your perfect visual memory companion.
- 64. Books
- 65. Classics brings some of those favorite classic books a couple taps away on your phone. Page flips make you feel like you are dealing with a real book and the nice cream color is easy on the eyes. The sexy icon makes me wonder why I don’t have these books on my shelf at home lined up like this.
- 68. Navigation
- 69. Where To? is a point of interest app that allows you to easily find restaurants, banks, etc. The app uses a great black turn wheel with a blue glow for highlighted items. The app uses a leather texture, which is a change from the many types of wood textures other apps use. The app icon is easily recognizable too if you are familiar with exit signs on the roads.
- 72. Life Style
- 73. Cellar makes managing your wine collection sexy and worth the effort. The app uses great drop shadows and has ambient lighting almost everywhere. The details on the wine bottles and glasses is exceptional and hard not to notice.
- 77. Photography
- 78. Hipstamatic brings back an analog look to your digital photographs. The camera, lenses, and flashes in the icon and interface have great detail. The overall interface has a very grungy look, which is very different from other apps in the store.
- 83. Camera+ will help bring that creativity out in you, all with a fun, innovative, and beautiful design.
- 86. Social Network
- 90. Interaction Design Principles 1 1st Time Experience Limited amount of functionality for user to meet the objectives
- 91. Interaction Design Principles 2 Reduce no. of steps it takes a user to complete a task Key tasks should be efficient
- 92. Interaction Design Principles 3 It becomes easier for user to use each time Design less effort for frequently use tasks
- 93. Interaction Design Principles 4 Design for no user mistakes in user interface
- 94. Interaction Design Principles 5 Keep common task simple Avoid unnecessary functionality Keep visual design & layout clean
- 95. Interaction Design Principles 6 Design exactly what user expect to do
- 96. Interaction Design Principles 7 Most important info should be most visible while less important info should be less visible
- 97. Interaction Design Principles 8 Give visual and/or audio cue for user action
- 98. Interaction Design Principles 9 Like-items should display and act consistently across the entire app or between applications Keep UI Standards
- 99. Interaction Design Principles 10 Keep users happy Measure User’s Happiness
- 100. Design Guideline Design for Simplicity 1 Reduce functionality Keep navigation narrow & shallow Avoid extra info Reduce or remove preferences Use progressive disclosure
- 101. Design Guideline Design for Small Screen 2 Minimize user input Minimize vertical scrolling Avoid horizontal scrolling Use hyperlinking effectively Provide useful error messages Prioritize information on each screen
- 102. Design Guideline Provide Useful Feedback 3 Identify critical feedback Quick response time
- 103. Design Guideline Maintain Existing Design Standards 4 Use existing UI standards Use Real World Metaphors
- 104. Design Guideline Respect physical & mental effort 5 Use wizards to simplify complex interactions Design for efficiency
- 105. Resources
- 106. iOS Human Interface Guideline Human Interface Principles App Design Strategies User Experience Guidelines iOS UI Element Usage Guidelines Custom Icon & Image Creation Guidelines
- 108. Icon Template http://www.tapptics.com/iphone-ipad-ios-icon- specifications-and-templates/
- 109. Paper Wireframe Pen + Paper
- 110. Digital Wireframe Balsamiq http://www.balsamiq.com/
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n
- #98: \n
- #99: \n
- #100: \n
- #101: \n
- #102: \n
- #103: \n
- #104: \n
- #105: \n
- #106: \n
- #107: \n
- #108: \n
- #109: \n
- #110: \n
- #111: \n
- #112: \n
- #113: \n
- #114: \n
- #115: \n
- #116: \n
- #117: \n