In Search of the Single Source of Truth

Talk given at DevConFu.

Transcript

1. In Search of the
   Single Source
   of Truth
   @JINA // DEVCONFU // JŪRMALA // 2014
   

   View Slide

2. @jina
   

   View Slide

3. Senior Product Designer
   

   View Slide

4. — NATE FORTIN
   “A fractured process
   makes for a fractured
   user experience.”
   

   View Slide

5. Style Guides
   are all the rage
   …AND THEY HAVE COME A LONG WAY.
   

   View Slide

6. 2004 // PDF Style Guide
   

   View Slide

7. PDFs are a pain
   to maintain.
   HEY, THAT RHYMES.
   

   View Slide

8. 2007–2008 // Wordpress Style Guide
   

   View Slide

9. alistapart.com/article/writingainterfacestyleguide
   

   View Slide

10. Design & Brand Standards
    Front-end Development Standards
    Keeping Style Guides Current & Useful
    

    View Slide

11. Wordpress was
    only slightly easier.
    …AND NOBODY EXCEPT ME WOULD UPDATE IT.
    

    View Slide

12. 2010–2011 // Living Style Guide with Sass
    

    View Slide

13. View Slide

14. Engine Yard App Cloud Style Guide, Early 2011
    

    View Slide

15. ZOMG!
    

    View Slide

16. Engine Yard App Cloud Style Guide, Early 2011
    

    View Slide

17. Sass & Style Guides
    are awesome together!
    

    View Slide

18. blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides
    

    View Slide

19. Make Documentation
    a regular part of
    your work ow.
    01 //
    

    View Slide

20. Don’t try to document
    everything at once.
    YOU’LL LIKELY GIVE UP.
    

    View Slide

21. Document
    going forward.
    

    View Slide

22. Making
    something new?
    Document it.
    

    View Slide

23. Revising something?
    Refactor it.
    Then document it.
    

    View Slide

24. During design & code
    reviews, make sure
    decisions are documented.
    

    View Slide

25. 2012–2013 // Living Style Guide with Sass for Web App & Site
    Github Wiki for iOS & Android
    

    View Slide

26. Do CSS Style Guide, Late 2013
    

    View Slide

27. Do Responsive Layout Guide, Early 2013
    

    View Slide

28. For mobile, changes to
    colors & sizes were a
    nightmare to update.
    PHOTOSHOP ⟶"DROPBOX ⟶"WIKI ⟶"☹
    

    View Slide

29. Document your ideal
    CSS Architecture.
    02 //
    

    View Slide

30. vendor/
    dependencies/
    base/
    components/
    regions/
    helpers/
    responsive/
    tools/
    }
    my ideal css architecture
    

    View Slide

31. Make a
    UI Library.
    03 //
    

    View Slide

32. oocss.org
    

    View Slide

33. ux.mailchimp.com/patterns
    

    View Slide

34. Create pages
    

    View Slide

35. Create systems
    

    View Slide

36. bradfrostweb.com/blog/post/atomic-web-design
    

    View Slide

37. 01 // Base HTML elements
    02 // Modular components
    03 // Page regions
    04 // Layout system
    

    View Slide

38. Show the object
    with all of its
    associated states.
    

    View Slide

39. developer.android.com/design
    

    View Slide

40. developer.android.com/design/building-blocks/seek-bars
    

    View Slide

41. Show the code you
    want people to use,
    not the nal output.
    

    View Slide

42. Add development tools
    for rapid development
    and testing.
    04 //
    

    View Slide

43. starbucks.com/static/reference/styleguide
    

    View Slide

44. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
    

    View Slide

45. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
    

    View Slide

46. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
    

    View Slide

47. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
    

    View Slide

48. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
    

    View Slide

49. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
    

    View Slide

50. Try a responsive
    sandbox during
    development.
    

    View Slide

51. Do Responsive Layout Guide, Early 2013
    

    View Slide

52. Keep documentation
    current & useful.
    05 //
    

    View Slide

53. jacobrask.github.io/styledocco
    

    View Slide

54. 2013 // Living Style Guide with Sass + ERB & YAML
    

    View Slide

55. sass-lang.com
    

    View Slide

56. sass-lang.com/styleguide
    

    View Slide

57. github.com/mattkersley/Responsive-Design-Testing
    

    View Slide

58. sass-lang.com/styleguide/responsive-test
    

    View Slide

59. We open sourced the
    website. Anyone can
    contribute to design.
    

    View Slide

60. What if a new color
    gets added?
    THE STYLE GUIDE NEEDS TO BE UPDATED, TOO.
    

    View Slide

61. Can the CSS & Style Guide both
    share the same attributes in
    one single con guration?
    

    View Slide

62. Single Source of Truth
    

    View Slide

63. Don’t Repeat Yourself
    

    View Slide

64. colors:
    - name: hopbush
    hex: "c69"
    - name: bouquet
    hex: "b37399"
    - name: venus
    hex: "998099"
    - name: patina
    hex: "699"
    - name: nebula
    hex: "d2e1dd"
    - name: white
    hex: "fff"
    <% data.color.colors.each do |swatch| %>
    $<%= swatch.name %>: #<%= swatch.hex %>;
    <% end %>
    data/color.yml _color.scss.erb
    

    View Slide

65. colors:
    - name: hopbush
    hex: "c69"
    - name: bouquet
    hex: "b37399"
    - name: venus
    hex: "998099"
    - name: patina
    hex: "699"
    - name: nebula
    hex: "d2e1dd"
    - name: white
    hex: "fff"
    %ul.swatches
    - for swatch in data.color.colors
    %li{class: "swatch-" + swatch.name}
    %pre
    %code
    = "$" + swatch.name
    %br/
    = "#" + swatch.hex
    data/color.yml _color.haml
    

    View Slide

66. Sass Color Style Guide
    

    View Slide

67. 2014 // Living Style Guide & Prototype with Sass & Angular as Spec
    + Living Variables System for All Devices & Platforms
    

    View Slide

68. sfdc-styleguide.herokuapp.com
    

    View Slide

69. Prototypes
    Aura (our web framework)
    Native iOS
    Native Android
    Native Windows
    

    View Slide

70. How do we keep
    our colors, spacing,
    & sizes consistent?
    

    View Slide

71. Theo
    BY SALESFORCE UX // OPEN SOURCING // COMING VERY SOON!
    

    View Slide

72. Theo: theme tokenizer
    with JSON input
    Sass
    Stylus
    LESS
    Aura
    plist
    XML
    {
    

    View Slide

73. sfdc-styleguide.herokuapp.com
    

    View Slide

74. @SalesforceUX
    

    View Slide

75. dribbble.com/salesforce
    

    View Slide

76. sass-lang.com
    

    View Slide

77. @TeamSassDesign
    

    View Slide

78. dribbble.com/TeamSassDesign
    

    View Slide

79. themixinsf.com
    

    View Slide

80. susy.oddbird.net
    

    View Slide

81. artinmycoffee.com
    

    View Slide

82. — GUSTAVE FLAUBERT
    “Be regular and orderly in your
    life so that you may be violent
    and original in your work.”
    

    View Slide

83. T W I T T E R , D R I B B B L E , I N STAG RA M , & G I T H U B
    @jina
    

    View Slide