Playing Nice With Design - 360iDev, Denver, August 2017

Playing Nice With Design - 360iDev, Denver, August 2017

Video:
https://vimeopro.com/360conferences/360idev-2017-public-session-recordings/video/231814252

My deck on using UI Frameworks and Playgrounds to build a set of building blocks to for composable, reusable UI.

Will update with the link to the open-source repo of stuff I showed off once I actually get the damned playground loading.

C4861b1dfdf3bbb21faec4a1acdf183d?s=128

Ellen Shapiro

August 15, 2017
Tweet

Transcript

  1. Playing Nice With Design Ellen Shapiro | 360iDev | August

    2017 @designatednerd | spothero.com | justhum.com
  2. None
  3. None
  4. None
  5. None
  6. None
  7. via Kara Brugman at h.ps:/ /www.instagram.com/p/pvqUXsmBS5/

  8. None
  9. app.psd

  10. app.psd app_ios_v2.psd

  11. app.psd app_ios_v2.psd designs_v2.5.psd

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

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

  14. app.psd app_ios_v2.psd designs_v2.5.psd app_designs_final.psd app_designs_final(2).psd app_designs_final_revised.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 i_quit.psd

  16. via twi'er.com/DigitalSynopsis

  17. None
  18. None
  19. via h&ps:/ /www.smashingmagazine.com/2011/05/two-cats-in-a-sack-designer-developer-discord/

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

    Shows Up In Code
  23. Naming Things Consistently across design and development processes

  24. Thing iOS Thing Android Thing Color UIColor R.color Non-editable Text

    UILabel TextView Short Text Input UITextField EditText Long Text Input UITextView EditText Bu9on UIButton Button Top Naviga;on UINavigationBar Toolbar
  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 Bu3on UIButton Button Top Naviga8on 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 Bu7on UIButton Button Top Naviga:on UINavigationBar Toolbar
  27. Name From Designer Corve&e Tangerine Canary Kale Ocean Violet

  28. Name From Designer iOS Var Name Android Res Name Corve&e

    darkRed R.color.red Tangerine orange R.color.orange Canary mutedYellow R.color.pee Kale green R.color.lt_green Ocean navyBlue R.color.ocean Violet purpleDrank R.color.go_u_nu
  29. Name From Designer iOS Var Name Android Res Name Corve&e

    corvette R.color.corvette Tangerine tangerine R.color.tangerine Canary canary R.color.canary Kale kale R.color.kale Ocean ocean R.color.ocean Violet violet R.color.violet
  30. Name From Designer iOS Class Name Android Style Name Headline

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

    Call To Ac.on Bu2on EXMPrimaryCTAButton PrimaryCTAButtonStyle Secondary Call To Ac.on Bu2on EXMSecondaryCTAButton SecondaryCTAButtonStyle Transac.onal Bu2on EXMTransactionalButton TransactionalButtonStyle Destruc.veBu2on EXMDestructiveButton DestructiveButtonStyle Edit Bu2on EXMEditButton EditButtonStyle Checkbox Bu2on EXMCheckboxButton CheckboxButtonStyle Radio Bu2on EXMRadioButton RadioButtonStyle Giant Bu2on EXMGiantButton GiantButtonStyle Super-Giant Bu2on EXMSuperGiantButton SuperGiantButtonStyle
  32. via h&ps:/ /www.flickr.com/photos/designmilk/8552219138

  33. None
  34. Automa'cally Generate Code Based on the Designer's Inten1ons

  35. Get designers to use a specified format

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

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

  42. Name changes break obviously

  43. None
  44. None
  45. None
  46. None
  47. Building a Framework

  48. None
  49. Advantages of UI Frameworks

  50. Separa&on of concerns

  51. Reusability across mul*ple apps

  52. Reusability across mul*ple extensions

  53. None
  54. Snapshot Tes%ng

  55. Limita&ons of UI Frameworks

  56. @IBDesignable?

  57. None
  58. Separa&on of concerns

  59. Separa&on ⚔ of concerns

  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. Selling Your Designers on this cockamamie brilliant idea

  73. via h&p:/ /www.cultofmac.com/388474/apple-pencil-versus-wacom-cin<q/

  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. Distribu(ng Playground Books • Git • Email • AirDrop •

    Dropbox • Con2nuous Integra2on uploading to S3 or an internal site
  84. Distribu(ng Playground Books • Git* • Email • AirDrop •

    Dropbox* • Con3nuous Integra3on uploading to S3 or an internal site* * - In theory
  85. None
  86. (˽°□°҂˽Ɨ ˍʓˍ

  87. None
  88. None
  89. None
  90. Re-incorpora+ng design changes

  91. Working collabora'vely vs. Working asynchronously

  92. Con rency cur

  93. Concurrency

  94. None
  95. None
  96. 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
  97. Playgrounds With Designers: Advanced Mode • Automa(cally generate every (me

    there's a build of the applica(on • Copy source files of framework into Sources folder in playground using a script • Use a mul(-page playground to separate things • Let designers download from a consistent place
  98. Playgrounds With Designers: Expert Mode • #SquadGoals • Automa(cally 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 • Automa(cally upload so the designers can get it on their iPad (iCloud? Dropbox?)
  99. A Few Par)ng Recommenda)ons • Start small.

  100. A Few Par)ng Recommenda)ons • Start small. • Colors, fonts,

    UILabel subclasses
  101. A Few Par)ng Recommenda)ons • Start small. • Colors, fonts,

    UILabel subclasses • Margins, font sizes, padding
  102. A Few Par)ng Recommenda)ons • Start small. • Colors, fonts,

    UILabel subclasses • Margins, font sizes, padding, • UIButtons, UITextFields, and other state-driven UI
  103. A Few Par)ng Recommenda)ons • Start small. • Colors, fonts,

    UILabel subclasses • Margins, font sizes, padding, • UIButtons, UITextFields, and other state-driven UI • Custom Views And AnimaBons
  104. Build the Building Blocks via h&ps:/ /www.flickr.com/photos/designmilk/8552219138

  105. Links! • TrueColors app and the CyndiLauper parser: h-ps:/ /

    github.com/vokal/TrueColors-macOS • Sourcery: h-ps:/ /github.com/krzysztofzablocki/Sourcery • Embedding frameworks in an .xcworkspace: h-ps:/ / useyourloaf.com/blog/adding-playgrounds-to-xcode-projects/ • Playground Books: h-ps:/ /ashfurrow.com/blog/swiH- playground-books/