Practical Mobile UI / UX for Developers

10d21184dd4238cdb334ed3939a1d0bd?s=47 SmartyP
October 08, 2013

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.

10d21184dd4238cdb334ed3939a1d0bd?s=128

SmartyP

October 08, 2013
Tweet

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