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.

C4861b1dfdf3bbb21faec4a1acdf183d?s=128

Ellen Shapiro

August 15, 2017
Tweet

Transcript

  1. 1.

    Playing Nice With Design Ellen Shapiro | 360iDev | August

    2017 @designatednerd | spothero.com | justhum.com
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 8.
  8. 9.
  9. 17.
  10. 18.
  11. 20.
  12. 21.
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 33.
  21. 36.
  22. 37.
  23. 38.
  24. 39.
  25. 40.
  26. 43.
  27. 44.
  28. 45.
  29. 46.
  30. 48.
  31. 53.
  32. 57.
  33. 60.
  34. 61.
  35. 62.
  36. 63.
  37. 64.
  38. 65.
  39. 66.
  40. 67.
  41. 68.
  42. 69.
  43. 70.
  44. 71.
  45. 74.
  46. 75.
  47. 76.
  48. 77.
  49. 78.
  50. 79.
  51. 80.
  52. 81.
  53. 82.
  54. 83.

    Distribu(ng Playground Books • Git • Email • AirDrop •

    Dropbox • Con2nuous Integra2on uploading to S3 or an internal site
  55. 84.

    Distribu(ng Playground Books • Git* • Email • AirDrop •

    Dropbox* • Con3nuous Integra3on uploading to S3 or an internal site* * - In theory
  56. 85.
  57. 87.
  58. 88.
  59. 89.
  60. 94.
  61. 95.
  62. 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
  63. 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
  64. 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?)
  65. 101.

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

    UILabel subclasses • Margins, font sizes, padding
  66. 102.

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

    UILabel subclasses • Margins, font sizes, padding, • UIButtons, UITextFields, and other state-driven UI
  67. 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
  68. 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/