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.

Transcript

1. UI Prototyping With Playgrounds Ellen Shapiro | Mobile Dev + Test, San Diego | April 2017 @designatednerd | spothero.com | justhum.com
8. via Kara Brugman at https://www.instagram.com/p/pvqUXsmBS5/
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
20. via https://www.smashingmagazine.com/2011/05/two-cats-in-a-sack-designer-developer-discord/
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
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
42. Underlying values change seamlessly
43. Name changes break obviously
58. Selling Your Designers on this cockamamie brilliant idea
59. via http://www.cultofmac.com/388474/apple-pencil-versus-wacom-cintiq/
65. Distributing playgrounds • Git • Email • AirDrop • Dropbox • Continuous Integration uploading to S3 or an internal site
68. Re-incorporating design changes
69. Working collaboratively vs. Working asynchronously
70. Building a Framework
72. Advantages of UI Frameworks
73. Separation of concerns
74. Reusability across multiple apps
75. Reusability across multiple extensions
77. Snapshot Testing
78. Limitations of UI Frameworks
79. @IBDesignable?
81. Separation of concerns
82. Separation ⚔ of concerns
83. Con rency cur
84. Concurrency
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/