Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Ellen Shapiro
PRO

August 15, 2017
Tweet

More Decks by Ellen Shapiro

Other Decks in Technology

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