Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI Prototyping with Playgrounds - Mobile Dev + Test, San Diego CA, April 2017

UI Prototyping with Playgrounds - Mobile Dev + Test, San Diego CA, April 2017

A talk about getting designers and developers to communicate better, and how to use Playgrounds to facilitate that.

Ellen Shapiro

April 27, 2017
Tweet

More Decks by Ellen Shapiro

Other Decks in Technology

Transcript

  1. UI Prototyping With
    Playgrounds
    Ellen Shapiro | Mobile Dev + Test, San Diego | April 2017
    @designatednerd | spothero.com | justhum.com

    View full-size slide

  2. via Kara Brugman at https://www.instagram.com/p/pvqUXsmBS5/

    View full-size slide

  3. app.psd
    app_ios_v2.psd

    View full-size slide

  4. app.psd
    app_ios_v2.psd
    designs_v2.5.psd

    View full-size slide

  5. app.psd
    app_ios_v2.psd
    designs_v2.5.psd
    app_designs_final.psd

    View full-size slide

  6. app.psd
    app_ios_v2.psd
    designs_v2.5.psd
    app_designs_final.psd
    app_designs_final(2).psd

    View full-size slide

  7. app.psd
    app_ios_v2.psd
    designs_v2.5.psd
    app_designs_final.psd
    app_designs_final(2).psd
    app_designs_final_revised.psd

    View full-size slide

  8. app.psd
    app_ios_v2.psd
    designs_v2.5.psd
    app_designs_final.psd
    app_designs_final(2).psd
    app_designs_final_revised.psd
    i_quit.psd

    View full-size slide

  9. via twitter.com/DigitalSynopsis

    View full-size slide

  10. via https://www.smashingmagazine.com/2011/05/two-cats-in-a-sack-designer-developer-discord/

    View full-size slide

  11. Allow Designers To Express Their Intent
    In A Way Which Shows Up In Code

    View full-size slide

  12. Naming Things Consistently

    View full-size slide

  13. Thing iOS Thing Android Thing
    Color UIColor R.color
    Non-editable Text UILabel TextView
    Short Text Input UITextField EditText
    Long Text Input UITextView EditText
    Button UIButton Button
    Top Navigation UINavigationBar Toolbar

    View full-size slide

  14. Thing iOS Thing Android Thing
    Color UIColor R.color
    Non-editable Text UILabel TextView
    Short Text Input UITextField EditText
    Long Text Input UITextView EditText
    Button UIButton Button
    Top Navigation UINavigationBar Toolbar

    View full-size slide

  15. Thing iOS Thing Android Thing
    Color UIColor R.color
    Non-editable Text UILabel TextView
    Short Text Input UITextField EditText
    Long Text Input UITextView EditText
    Button UIButton Button
    Top Navigation UINavigationBar Toolbar

    View full-size slide

  16. Name From Designer
    Corvette
    Tangerine
    Canary
    Palm Tree
    Ocean
    Violet

    View full-size slide

  17. Name From Designer iOS Var Name Android Name
    Corvette exm_darkRed R.color.red
    Tangerine exm_orange R.color.orange
    Canary exm_mutedYellow R.color.pee
    Palm Tree exm_green R.color.lt_green
    Ocean exm_navyBlue R.color.ocean
    Violet exm_purpleDrank R.color.go_u_nu

    View full-size slide

  18. Name From Designer iOS Var Name Android Name
    Corvette exm_corvette R.color.corvette
    Tangerine exm_tangerine R.color.tangerine
    Canary exm_canary R.color.canary
    Palm Tree exm_palmTree R.color.palm_tree
    Ocean exm_ocean R.color.ocean
    Violet exm_violet R.color.violet

    View full-size slide

  19. Name From Designer iOS Class Name Android Style Name
    Headline Text EXMHeadlineLabel HeadlineTextStyle
    Sub-Head Text EXMSubHeadLabel SubHeadTextStyle
    Body Text EXMBodyLabel BodyTextStyle
    Caption Text EXMCaptionLabel CaptionTextStyle
    Warning Text EXMWarningText WarningTextStyle
    Fine Print Text EXMFinePrintText FinePrintTextStyle

    View full-size slide

  20. Name From Designer iOS Class Name Android Style Name
    Primary Call To Action Button EXMPrimaryCTAButton PrimaryCTAButtonStyle
    Secondary Call To Action Button EXMSecondaryCTAButton SecondaryCTAButtonStyle
    Transactional Button EXMTransactionalButton TransactionalButtonStyle
    DestructiveButton EXMDestructiveButton DestructiveButtonStyle
    Edit Button EXMEditButton EditButtonStyle
    Checkbox Button EXMCheckboxButton CheckboxButtonStyle
    Radio Button EXMRadioButton RadioButtonStyle
    Giant Button EXMGiantButton GiantButtonStyle
    Super-Giant Button EXMSuperGiantButton SuperGiantButtonStyle

    View full-size slide

  21. via https://www.flickr.com/photos/designmilk/8552219138

    View full-size slide

  22. Automatically Generate Code
    Based on the Designer's Intentions

    View full-size slide

  23. Get designers to use a
    specified format

    View full-size slide

  24. Get designers to use a
    specified format*
    * This is a lot easier said than done

    View full-size slide

  25. Underlying values change
    seamlessly

    View full-size slide

  26. Name changes break
    obviously

    View full-size slide

  27. Selling Your Designers
    on this cockamamie brilliant idea

    View full-size slide

  28. via http://www.cultofmac.com/388474/apple-pencil-versus-wacom-cintiq/

    View full-size slide

  29. Distributing playgrounds
    • Git
    • Email
    • AirDrop
    • Dropbox
    • Continuous Integration uploading to S3 or an internal site

    View full-size slide

  30. Re-incorporating
    design changes

    View full-size slide

  31. Working collaboratively
    vs.
    Working asynchronously

    View full-size slide

  32. Building a Framework

    View full-size slide

  33. Advantages
    of UI Frameworks

    View full-size slide

  34. Separation
    of concerns

    View full-size slide

  35. Reusability
    across multiple apps

    View full-size slide

  36. Reusability
    across multiple extensions

    View full-size slide

  37. Snapshot Testing

    View full-size slide

  38. Limitations
    of UI Frameworks

    View full-size slide

  39. @IBDesignable?

    View full-size slide

  40. Separation
    of concerns

    View full-size slide

  41. Separation

    of concerns

    View full-size slide

  42. Con rency cur

    View full-size slide

  43. Playgrounds With Designers: Easy Mode
    • Hand off via email, AirDrop, or synced folder
    • Use a single, ginormous playground file**
    • Create basic elements but don't include anything complicated
    • Copy and paste files into the sources folder
    ** May be REAL slow

    View full-size slide

  44. Playgrounds With Designers: Advanced Mode
    • Automatically generate every time there's a build of the
    application
    • Copy source files of framework into Sources folder in playground
    using a script
    • Use a multi-page playground to separate things
    • Let designers download from a consistent place

    View full-size slide

  45. Playgrounds With Designers: Expert Mode
    • #SquadGoals
    • Automatically generate only when changes have taken place in
    the UI framework
    • Create a Playground Book that allows designers to muck about
    with stuff on their iPad
    • Automatically upload so the designers can get it on their iPad
    (iCloud? Dropbox?)

    View full-size slide

  46. A Few Parting Recommendations
    • Start small.

    View full-size slide

  47. A Few Parting Recommendations
    • Start small.
    • Colors, fonts, UILabel subclasses

    View full-size slide

  48. A Few Parting Recommendations
    • Start small.
    • Colors, fonts, UILabel subclasses
    • Margins, font sizes, padding

    View full-size slide

  49. A Few Parting Recommendations
    • Start small.
    • Colors, fonts, UILabel subclasses
    • Margins, font sizes, padding,
    • UIButtons, UITextFields, and other state-driven UI

    View full-size slide

  50. A Few Parting Recommendations
    • Start small.
    • Colors, fonts, UILabel subclasses
    • Margins, font sizes, padding,
    • UIButtons, UITextFields, and other state-driven UI
    • Custom Views And Animations

    View full-size slide

  51. Build the
    Building Blocks
    via https://www.flickr.com/photos/designmilk/8552219138

    View full-size slide

  52. Links!
    • TrueColors app and the CyndiLauper parser: https://
    github.com/vokal/TrueColors-macOS
    • Sourcery: https://github.com/krzysztofzablocki/Sourcery
    • Embedding frameworks in an .xcworkspace: https://
    useyourloaf.com/blog/adding-playgrounds-to-xcode-projects/

    View full-size slide