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

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 full-size slide

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

    View full-size slide

  3. app.psd
    app_ios_v2.psd

    View full-size slide

  4. app.psd
    app_ios_v2.psd
    designs_v2.5.psd

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. via twi'er.com/DigitalSynopsis

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Naming Things Consistently
    across design and development processes

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. 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 full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Get designers to use a
    specified format

    View full-size slide

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

    View full-size slide

  25. Underlying values change
    seamlessly

    View full-size slide

  26. Name changes break
    obviously

    View full-size slide

  27. Building a Framework

    View full-size slide

  28. Advantages
    of UI Frameworks

    View full-size slide

  29. Separa&on
    of concerns

    View full-size slide

  30. Reusability
    across mul*ple apps

    View full-size slide

  31. Reusability
    across mul*ple extensions

    View full-size slide

  32. Snapshot Tes%ng

    View full-size slide

  33. Limita&ons
    of UI Frameworks

    View full-size slide

  34. @IBDesignable?

    View full-size slide

  35. Separa&on
    of concerns

    View full-size slide

  36. Separa&on

    of concerns

    View full-size slide

  37. Selling Your Designers
    on this cockamamie brilliant idea

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Re-incorpora+ng
    design changes

    View full-size slide

  43. Working collabora'vely
    vs.
    Working asynchronously

    View full-size slide

  44. Con rency cur

    View full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

  47. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

  54. 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 full-size slide