UI Prototyping with Playgrounds - Mobile Dev + Test, San Diego CA, April 2017

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.

C4861b1dfdf3bbb21faec4a1acdf183d?s=128

Ellen Shapiro

April 27, 2017
Tweet

Transcript

  1. 1.

    UI Prototyping With Playgrounds Ellen Shapiro | Mobile Dev +

    Test, San Diego | April 2017 @designatednerd | spothero.com | justhum.com
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 9.
  9. 10.
  10. 18.
  11. 19.
  12. 21.
  13. 22.
  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 Button UIButton Button Top Navigation 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 Button UIButton Button Top Navigation UINavigationBar Toolbar
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 34.
  22. 37.
  23. 38.
  24. 39.
  25. 40.
  26. 41.
  27. 44.
  28. 45.
  29. 46.
  30. 47.
  31. 48.
  32. 49.
  33. 50.
  34. 51.
  35. 52.
  36. 53.
  37. 54.
  38. 55.
  39. 56.
  40. 57.
  41. 60.
  42. 61.
  43. 62.
  44. 63.
  45. 64.
  46. 65.

    Distributing playgrounds • Git • Email • AirDrop • Dropbox

    • Continuous Integration uploading to S3 or an internal site
  47. 66.
  48. 67.
  49. 71.
  50. 76.
  51. 80.
  52. 85.
  53. 86.
  54. 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
  55. 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
  56. 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?)
  57. 92.

    A Few Parting Recommendations • Start small. • Colors, fonts,

    UILabel subclasses • Margins, font sizes, padding
  58. 93.

    A Few Parting Recommendations • Start small. • Colors, fonts,

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