$30 off During Our Annual Pro Sale. View Details »

Practical Mobile UI / UX for Developers

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.

SmartyP

October 08, 2013
Tweet

More Decks by SmartyP

Other Decks in Technology

Transcript

  1. PRACTICAL
    Presented by Roger Peters
    Atlanta Mobile Developers Group
    October 8th, 2013
    MOBILE UI / UX
    FOR DEVELOPERS

    View Slide

  2. ALL MOBILE
    Roger Peters (@SmartyP)
    Independent Mobile Developer
    AllMobileEverything.com
    SmartyPantsCoding.com
    SmartyP.net
    EVERYTHING

    View Slide

  3. OVERVIEW
    Creative Process
    Sketching
    Wireframing
    Mobile Design Basics
    Creating Assets

    View Slide

  4. CREATIVE PROCESS

    View Slide

  5. CREATIVE PROCESS
    explore explore
    refine
    refine

    View Slide

  6. CREATIVE PROCESS
    h"p://www.lostgarden.com/2010/08/visualizing-­‐crea=ve-­‐process.html

    View Slide

  7. SKETCHING

    View Slide

  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

    View Slide

  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

    View Slide

  10. FANCY SKETCHING TEMPLATES
    Free swag at all major conferences

    View Slide

  11. PRACTICAL SKETCHING TEMPLATES
    These work just as well

    View Slide

  12. EXAMPLES

    View Slide

  13. EXAMPLES

    View Slide

  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

    View Slide

  15. WIREFRAMING

    View Slide

  16. WIREFRAMING TOOLS
    Balsamiq Indigo Studio

    View Slide

  17. fluid.com
    proto.io
    WIREFRAMING TOOLS

    View Slide

  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

    View Slide

  19. MOBILE DESIGN BASICS

    View Slide

  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

    View Slide

  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.

    View Slide

  22. DESIGN PATTERNS & INSPIRATION
    pttrns.com

    View Slide

  23. DESIGN PATTERNS & INSPIRATION
    mobile-patterns.com

    View Slide

  24. DESIGN PATTERNS & INSPIRATION
    dribbble.com

    View Slide

  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/

    View Slide

  26. EVERYTHING IS FUZZY
    Everything you design today should be designed with
    flexibility of screen size in mind. There are no fixed sizes.

    View Slide

  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

    View Slide

  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.

    View Slide

  29. STACKED VIEWS / TABLE VIEWS (Examples)
    Facebook
    Settings

    View Slide

  30. Scoutmob
    STACKED VIEWS / TABLE VIEWS (Examples)

    View Slide

  31. RELATIVE LAYOUTS
    Based on relationships between elements and the
    containing frame. Largely consists of docks and fills.

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  35. LiveView (iOS)
    LiveView for iPhone & iPad: http://www.zambetti.com/projects/liveview/

    View Slide

  36. Android Design Preview
    Android Design Preview - http://code.google.com/p/android-ui-utils/

    View Slide

  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

    View Slide

  38. TIP: TRANSPARENCY PAPER FTW
    Use transparency paper to trace successive passes
    at what you have in mind. Gradually evolve into a
    refined structure.

    View Slide

  39. KEEP IT SIMPLE
    Keep as close to the native stylings and interactions
    as possible with limited but intentional branding.

    View Slide

  40. CREATING ASSETS

    View Slide

  41. PHOTOSHOP TEMPLATES
    iOS7 GUI PSD - www.teehanlax.com/tools/ios7

    View Slide

  42. ILLUSTRATOR TEMPLATES
    iOS7 Wireframing Kit for Illustrator - blakeperdue.com/ios7-wireframe-kit

    View Slide

  43. http://graphicriver.net/item/retina-app-icons-creator/2478159
    ICON STARTER TEMPLATES

    View Slide

  44. ICON ASSETS
    Glyphish - www.glyphish.com

    View Slide

  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%)

    View Slide

  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

    View Slide

  47. www.pixelresort.com/blog/app-icon-template
    ICON TEMPLATES

    View Slide

  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.

    View Slide

  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

    View Slide

  50. PROMO IMAGES
    placeit.net

    View Slide

  51. MARKETPLACE ASSETS
    iTunes App Store
    allows images other
    than screenshots.
    Make sure to spend time creating any
    ‘featured app’ assets as well.

    View Slide

  52. THANK YOU!

    View Slide

  53. Q&A

    View Slide

  54. ALL MOBILE
    Roger Peters (@SmartyP)
    Independent Mobile Developer
    AllMobileEverything.com
    SmartyPantsCoding.com
    SmartyP.net
    EVERYTHING

    View Slide