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.

Transcript

1. Playing Nice
   With Design
   Ellen Shapiro | 360iDev | August 2017
   @designatednerd | spothero.com | justhum.com
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. via Kara Brugman at h.ps:/
   /www.instagram.com/p/pvqUXsmBS5/
   

   View Slide

8. View Slide

9. app.psd
   

   View Slide

10. app.psd
    app_ios_v2.psd
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    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
    i_quit.psd
    

    View Slide

16. via twi'er.com/DigitalSynopsis
    

    View Slide

17. View Slide

18. View Slide

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

    View Slide

20. View Slide

21. View Slide

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

    View Slide

23. Naming Things Consistently
    across design and development processes
    

    View Slide

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
    

    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
    Bu3on UIButton Button
    Top Naviga8on 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
    Bu7on UIButton Button
    Top Naviga:on UINavigationBar Toolbar
    

    View Slide

27. Name From Designer
    Corve&e
    Tangerine
    Canary
    Kale
    Ocean
    Violet
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. via h&ps:/
    /www.flickr.com/photos/designmilk/8552219138
    

    View Slide

33. View Slide

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

    View Slide

35. Get designers to use a
    specified format
    

    View Slide

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

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. Underlying values change
    seamlessly
    

    View Slide

42. Name changes break
    obviously
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. Building a Framework
    

    View Slide

48. View Slide

49. Advantages
    of UI Frameworks
    

    View Slide

50. Separa&on
    of concerns
    

    View Slide

51. Reusability
    across mul*ple apps
    

    View Slide

52. Reusability
    across mul*ple extensions
    

    View Slide

53. View Slide

54. Snapshot Tes%ng
    

    View Slide

55. Limita&ons
    of UI Frameworks
    

    View Slide

56. @IBDesignable?
    

    View Slide

57. View Slide

58. Separa&on
    of concerns
    

    View Slide

59. Separa&on
    ⚔
    of concerns
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. Selling Your Designers
    on this cockamamie brilliant idea
    

    View Slide

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

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

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

    View Slide

84. Distribu(ng Playground Books
    • Git*
    • Email
    • AirDrop
    • Dropbox*
    • Con3nuous Integra3on uploading to S3 or an internal site*
    * - In theory
    

    View Slide

85. View Slide

86. (˽°□°҂˽Ɨ ˍʓˍ
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. Re-incorpora+ng
    design changes
    

    View Slide

91. Working collabora'vely
    vs.
    Working asynchronously
    

    View Slide

92. Con rency cur
    

    View Slide

93. Concurrency
    

    View Slide

94. View Slide

95. View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

99. A Few Par)ng Recommenda)ons
    • Start small.
    

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

104. Build the
     Building Blocks
     via h&ps:/
     /www.flickr.com/photos/designmilk/8552219138
     

     View Slide

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/
     

     View Slide