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. 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
  2. 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
  3. 12.
  4. 13.
  5. 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
  6. 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
  7. 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
  8. 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.
  9. 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/
  10. 26.

    EVERYTHING IS FUZZY Everything you design today should be designed

    with flexibility of screen size in mind. There are no fixed sizes.
  11. 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
  12. 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.
  13. 31.
  14. 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
  15. 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
  16. 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.
  17. 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
  18. 38.

    TIP: TRANSPARENCY PAPER FTW Use transparency paper to trace successive

    passes at what you have in mind. Gradually evolve into a refined structure.
  19. 39.

    KEEP IT SIMPLE Keep as close to the native stylings

    and interactions as possible with limited but intentional branding.
  20. 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%)
  21. 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
  22. 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.
  23. 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
  24. 51.

    MARKETPLACE ASSETS iTunes App Store allows images other than screenshots.

    Make sure to spend time creating any ‘featured app’ assets as well.
  25. 53.

    Q&A