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
PRO

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 Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

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

    View Slide

  9. View Slide

  10. app.psd

    View Slide

  11. app.psd
    app_ios_v2.psd

    View Slide

  12. app.psd
    app_ios_v2.psd
    designs_v2.5.psd

    View Slide

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

    View Slide

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

    View Slide

  15. 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 Slide

  16. 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 Slide

  17. via twitter.com/DigitalSynopsis

    View Slide

  18. View Slide

  19. View Slide

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

    View Slide

  21. View Slide

  22. View Slide

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

    View Slide

  24. Naming Things Consistently

    View Slide

  25. 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 Slide

  26. 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 Slide

  27. 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 Slide

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

    View Slide

  29. 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 Slide

  30. 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 Slide

  31. 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 Slide

  32. 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 Slide

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

    View Slide

  34. View Slide

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

    View Slide

  36. Get designers to use a
    specified format

    View Slide

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

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Underlying values change
    seamlessly

    View Slide

  43. Name changes break
    obviously

    View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. Selling Your Designers
    on this cockamamie brilliant idea

    View Slide

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

    View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

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

    View Slide

  66. View Slide

  67. View Slide

  68. Re-incorporating
    design changes

    View Slide

  69. Working collaboratively
    vs.
    Working asynchronously

    View Slide

  70. Building a Framework

    View Slide

  71. View Slide

  72. Advantages
    of UI Frameworks

    View Slide

  73. Separation
    of concerns

    View Slide

  74. Reusability
    across multiple apps

    View Slide

  75. Reusability
    across multiple extensions

    View Slide

  76. View Slide

  77. Snapshot Testing

    View Slide

  78. Limitations
    of UI Frameworks

    View Slide

  79. @IBDesignable?

    View Slide

  80. View Slide

  81. Separation
    of concerns

    View Slide

  82. Separation

    of concerns

    View Slide

  83. Con rency cur

    View Slide

  84. Concurrency

    View Slide

  85. View Slide

  86. View Slide

  87. 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 Slide

  88. 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 Slide

  89. 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 Slide

  90. A Few Parting Recommendations
    • Start small.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  94. 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 Slide

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

    View Slide

  96. 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 Slide