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.

C4861b1dfdf3bbb21faec4a1acdf183d?s=128

Ellen Shapiro

April 27, 2017
Tweet

Transcript

  1. UI Prototyping With Playgrounds Ellen Shapiro | Mobile Dev +

    Test, San Diego | April 2017 @designatednerd | spothero.com | justhum.com
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. via Kara Brugman at https://www.instagram.com/p/pvqUXsmBS5/

  9. None
  10. app.psd

  11. app.psd app_ios_v2.psd

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

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

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

  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

  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

  17. via twitter.com/DigitalSynopsis

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

  21. None
  22. None
  23. Allow Designers To Express Their Intent In A Way Which

    Shows Up In Code
  24. Naming Things Consistently

  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
  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
  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
  28. Name From Designer Corvette Tangerine Canary Palm Tree Ocean Violet

  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
  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
  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
  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
  33. via https://www.flickr.com/photos/designmilk/8552219138

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

  36. Get designers to use a specified format

  37. Get designers to use a specified format* * This is

    a lot easier said than done
  38. None
  39. None
  40. None
  41. None
  42. Underlying values change seamlessly

  43. Name changes break obviously

  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. Selling Your Designers on this cockamamie brilliant idea

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

  60. None
  61. None
  62. None
  63. None
  64. None
  65. Distributing playgrounds • Git • Email • AirDrop • Dropbox

    • Continuous Integration uploading to S3 or an internal site
  66. None
  67. None
  68. Re-incorporating design changes

  69. Working collaboratively vs. Working asynchronously

  70. Building a Framework

  71. None
  72. Advantages of UI Frameworks

  73. Separation of concerns

  74. Reusability across multiple apps

  75. Reusability across multiple extensions

  76. None
  77. Snapshot Testing

  78. Limitations of UI Frameworks

  79. @IBDesignable?

  80. None
  81. Separation of concerns

  82. Separation ⚔ of concerns

  83. Con rency cur

  84. Concurrency

  85. None
  86. None
  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
  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
  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?)
  90. A Few Parting Recommendations • Start small.

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

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

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

    UILabel subclasses • Margins, font sizes, padding, • UIButtons, UITextFields, and other state-driven UI
  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
  95. Build the Building Blocks via https://www.flickr.com/photos/designmilk/8552219138

  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/