Practical Mobile UI / UX for Developers

In this talk we covered the basics of sketching, wireframing, creative process, and practical advice on creating graphical assets for your mobile apps and games.

Transcript

1. PRACTICAL Presented by Roger Peters Atlanta Mobile Developers Group October 8th, 2013 MOBILE UI / UX FOR DEVELOPERS
2. ALL MOBILE Roger Peters (@SmartyP) Independent Mobile Developer AllMobileEverything.com SmartyPantsCoding.com SmartyP.net EVERYTHING
3. OVERVIEW Creative Process Sketching Wireframing Mobile Design Basics Creating Assets
4. CREATIVE PROCESS
5. CREATIVE PROCESS explore explore refine refine
6. CREATIVE PROCESS h"p://www.lostgarden.com/2010/08/visualizing-­‐crea=ve-­‐process.html
7. SKETCHING
8. SKETCHING THE APP Every app starts with a sketch. If you don’t have any sketches yet, then it’s little more than an idea. • Draw what the primary screens of the app might look like (repeat, repeat, repeat) • Nail down functionality of the app, how a user might use it, and navigational flows • Initially focus on quantity, not quality • Work towards final screens
9. GETTING STARTED SKETCHING It’s simple - just draw a rectangle and go from there. • Focus on functional elements (buttons, text fields, labels, menus, etc.) • Iterate, iterate, iterate - evolve from a loose idea to one (or several) series of screens that illustrate how the app might function
10. FANCY SKETCHING TEMPLATES Free swag at all major conferences
11. PRACTICAL SKETCHING TEMPLATES These work just as well
12. EXAMPLES
13. EXAMPLES
14. MORE ON SKETCHING Sketching tips • Start early, better to do over time than quickly • Use a bound notebook over loose-paper • If you’re using grid paper, a 2-to-3 ratio (ex: 16x24) matches the older size of iPhones (320x480) • Print templates online (konigi.com/tools/graph-paper) More information • Attend local UX meetups (IxDA Atlanta, Chi*Atlanta), attend regional UX conferences (SXSW, Big Design, etc.) or find presentation recordings on sketching • Attend local sketching workshops • Plenty of books on the subject
15. WIREFRAMING
16. WIREFRAMING TOOLS Balsamiq Indigo Studio
17. fluid.com proto.io WIREFRAMING TOOLS
18. MORE ON WIREFRAMING More information • Attend local UX meetups (IxDA Atlanta, Chi*Atlanta), attend regional UX conferences (SXSW, Big Design, etc.) or find presentation recordings on wireframing • Attend local wireframing workshops • Plenty of books on the subject
19. MOBILE DESIGN BASICS
20. GETTING STARTED WITH MOBILE Review each platform’s design docs: • iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/ userexperience/conceptual/mobilehig/ • Android Design http://developer.android.com/design/index.html • Windows Phone http://developer.windowsphone.com/en-us/design
21. GETTING STARTED WITH MOBILE Get familiar with mobile design • Spend time looking at all the apps you use from a design perspective. • Seek out and frequently use apps which are getting buzz. Look at how they are differentiating themselves. • Stay on top of industry trends • Collect screenshots of apps you find interesting, consider storing them in something like Evernote.
22. DESIGN PATTERNS & INSPIRATION pttrns.com
23. DESIGN PATTERNS & INSPIRATION mobile-patterns.com
24. DESIGN PATTERNS & INSPIRATION dribbble.com
25. DESIGN PATTERNS & INSPIRATION Many more • patterntap.com • lovelyui.com • inspired-ui.com • tappgala.com • mobilemozaic.com • etc. Source: http://www.webresourcesdepot.com/12-mobile-app-design-galleries-for-inspiration/
26. EVERYTHING IS FUZZY Everything you design today should be designed with flexibility of screen size in mind. There are no fixed sizes.
27. STACKED VIEWS / TABLE VIEWS A large majority of views in mobile apps use stacked views inside of vertically scrolling areas. This allows for a (mostly) fixed height per row, and limits scaling to vertical (which tends to have smaller variance). Note: Row heights can change per row, not illustrated above
28. iPHONE PSEUDO-FIXED-SIZE LAYOUTS Since all iPhones have the same width, iPhone designs can always assume a specific width. Combined with vertically scrollable areas, fixed-sized layouts can be achieved.
29. STACKED VIEWS / TABLE VIEWS (Examples) Facebook Settings
30. Scoutmob STACKED VIEWS / TABLE VIEWS (Examples)
31. RELATIVE LAYOUTS Based on relationships between elements and the containing frame. Largely consists of docks and fills.
32. NAVIGATION Off-screen navigation Tabs One of the biggest mistakes in poorly designed apps is a confusion of various navigation schemes. Be sure you understand the difference between these items: Action bar
33. Make sure you understand your navigational flows. Consider how users drill into, and back out of your screens and how tabs or other navigational elements factor in. NAVIGATION
34. DESIGN ON THE RIGHT CANVAS The single biggest mistake you can make when designing for mobile is to never see it on a mobile device until you’re finished.
35. LiveView (iOS) LiveView for iPhone & iPad: http://www.zambetti.com/projects/liveview/
36. Android Design Preview Android Design Preview - http://code.google.com/p/android-ui-utils/
37. DESIGN TIPS • Be weary of contrast, brightness, and color variance across devices and screen types • Screen protectors (often used with Otter- boxes) make the screen seem sparkly and small text harder to read
38. TIP: TRANSPARENCY PAPER FTW Use transparency paper to trace successive passes at what you have in mind. Gradually evolve into a refined structure.
39. KEEP IT SIMPLE Keep as close to the native stylings and interactions as possible with limited but intentional branding.
40. CREATING ASSETS
41. PHOTOSHOP TEMPLATES iOS7 GUI PSD - www.teehanlax.com/tools/ios7
42. ILLUSTRATOR TEMPLATES iOS7 Wireframing Kit for Illustrator - blakeperdue.com/ios7-wireframe-kit
43. http://graphicriver.net/item/retina-app-icons-creator/2478159 ICON STARTER TEMPLATES
44. ICON ASSETS Glyphish - www.glyphish.com
45. IMAGE ASSETS You will need every image in your app in numerous resolutions. • iOS is a bit easier in that you know the width of the screen to render at, and just have to provide retina (@2x) and non-retina images • Android has a lot of screen variance, so it supports defining various layouts for based on screen width or classification • Android supports numerous image sizes to support low memory devices to tablets. You typically will have 2-4 versions of each image at various resolutions (ex: 75%, 100% (baseline), 150%, 200%)
46. IMAGE ASSETS (Continued) Tips for dealing with image sizes: • Use image scaling automation whenever possible. • There are scripts for Photoshop and Fireworks for generating ldpi (0.75x), mdpi (1.0x), hdpi (1.5x), and xhdpi (2.0x) sizes for Android. • Icons • There are numerous templates for generating icon sizes from one master 1024x1024 or 2048x2048 image • You will likely need to touchup any smaller icon images that are generated
47. www.pixelresort.com/blog/app-icon-template ICON TEMPLATES
48. IMAGE ASSETS (Continued) Image source: http://unitid.nl/2012/07/10-free-tips-to-create-perfect-visual-assets-for-ios-and-android-tablet-and-mobile/ 9-patches are useful on Android to ensure higher- fidelity image scaling. This is useful for background images on scalable areas for example.
49. IMAGE ASSETS (Continued) Android Resources: Android Asset Studio http://android-ui-utils.googlecode.com/hg/asset- studio/dist/index.html Supporting Multiple Screens http://developer.android.com/guide/practices/ screens_support.html
50. PROMO IMAGES placeit.net
51. MARKETPLACE ASSETS iTunes App Store allows images other than screenshots. Make sure to spend time creating any ‘featured app’ assets as well.
52. THANK YOU!
53. Q&A
54. ALL MOBILE Roger Peters (@SmartyP) Independent Mobile Developer AllMobileEverything.com SmartyPantsCoding.com SmartyP.net EVERYTHING