$30 off During Our Annual Pro Sale. View Details »

In Search of the Single Source of Truth

jina
May 29, 2014

In Search of the Single Source of Truth

Talk given at DevConFu.

jina

May 29, 2014
Tweet

More Decks by jina

Other Decks in Technology

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