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
7. via Kara Brugman at h.ps:/ /www.instagram.com/p/pvqUXsmBS5/
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
19. via h&ps:/ /www.smashingmagazine.com/2011/05/two-cats-in-a-sack-designer-developer-discord/
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
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
41. Underlying values change seamlessly
42. Name changes break obviously
47. Building a Framework
49. Advantages of UI Frameworks
50. Separa&on of concerns
51. Reusability across mul*ple apps
52. Reusability across mul*ple extensions
54. Snapshot Tes%ng
55. Limita&ons of UI Frameworks
56. @IBDesignable?
58. Separa&on of concerns
59. Separa&on ⚔ of concerns
72. Selling Your Designers on this cockamamie brilliant idea
73. via h&p:/ /www.cultofmac.com/388474/apple-pencil-versus-wacom-cin<q/
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
86. (˽°□°҂˽Ɨ ˍʓˍ
90. Re-incorpora+ng design changes
91. Working collabora'vely vs. Working asynchronously
92. Con rency cur
93. Concurrency
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/