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

Sass & Style Guides

jina
March 28, 2015

Sass & Style Guides

for Squares Conference 2015

jina

March 28, 2015
Tweet

More Decks by jina

Other Decks in Design

Transcript

  1. SASS &

    STYLE GUIDES
    @JINA // SQUARES 2015

    View Slide

  2. @JINA
    SENIOR PRODUCT DESIGNER

    DESIGN SYSTEMS

    View Slide

  3. UX

    View Slide

  4. SAFE HARBOR
    Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
    This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the
    assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements
    we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability,
    subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations,
    statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.
    The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service,
    new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or
    delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and
    acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and
    manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization
    and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our
    annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and
    others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
    Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be
    delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available.
    Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

    View Slide

  5. SASS &

    STYLE GUIDES

    View Slide

  6. “IT USED TO BE THAT DESIGNERS MADE
    AN OBJECT AND WALKED AWAY.
    TODAY THE EMPHASIS MUST SHIFT TO
    DESIGNING THE ENTIRE LIFE CYCLE.”
    — PAUL SAFFO

    View Slide

  7. STYLE GUIDES ARE
    ALL THE RAGE
    …AND THEY HAVE COME A LONG WAY

    View Slide

  8. 2004 // PDF STYLE GUIDE

    View Slide

  9. PDFS ARE A PAIN
    TO MAINTAIN

    View Slide

  10. 2007–2008 // WORDPRESS STYLE GUIDE

    View Slide

  11. HTTP://ALISTAPART.COM/ARTICLE/WRITINGAINTERFACESTYLEGUIDE

    View Slide

  12. DESIGN GUIDELINES
    UI/PATTERN LIBRARY
    FRONT-END DEVELOPMENT TOOL

    View Slide

  13. KEEP DOCUMENTATION
    CURRENT & USEFUL

    View Slide

  14. WORDPRESS WAS
    ONLY SLIGHTLY EASIER
    …AND I WAS THE ONLY ONE UPDATING IT

    View Slide

  15. 2010–2011 // LIVING STYLE GUIDE WITH SASS

    View Slide

  16. View Slide

  17. LIVING STYLE GUIDE
    A STYLE GUIDE THAT USES THE SAME CODE AS YOUR APP

    View Slide

  18. ZOMG!

    View Slide

  19. SASS + STYLE GUIDES
    = AWESOME!

    View Slide

  20. MAINTAINABILITY

    View Slide

  21. BLOG.ENGINEYARD.COM/2011/FRONT-END-MAINTAINABILITY-WITH-SASS-AND-STYLE-GUIDES

    View Slide

  22. 2012–2013 // LIVING STYLE GUIDE WITH SASS FOR WEB
    WIKI FOR IOS & ANDROID

    View Slide

  23. DO CSS STYLE GUIDE, LATE 2013

    View Slide

  24. NAMING CONVENTIONS?

    View Slide

  25. CLARITY > BREVITY

    View Slide

  26. KEEP PROPERTIES ORGANIZED

    View Slide

  27. VENDOR/
    DEPENDENCIES/
    BASE/
    COMPONENTS/
    HELPERS/
    LAYOUTS/

    View Slide

  28. ADD TOOLS FOR RAPID
    DEVELOPMENT & TESTING

    View Slide

  29. STARBUCKS.COM/STATIC/REFERENCE/STYLEGUIDE/LAYOUT_PROMO_E.ASPX

    View Slide

  30. STARBUCKS.COM/STATIC/REFERENCE/STYLEGUIDE/LAYOUT_PROMO_E.ASPX

    View Slide

  31. STARBUCKS.COM/STATIC/REFERENCE/STYLEGUIDE/LAYOUT_PROMO_E.ASPX

    View Slide

  32. STARBUCKS.COM/STATIC/REFERENCE/STYLEGUIDE/LAYOUT_PROMO_E.ASPX

    View Slide

  33. STARBUCKS.COM/STATIC/REFERENCE/STYLEGUIDE/LAYOUT_PROMO_E.ASPX

    View Slide

  34. STARBUCKS.COM/STATIC/REFERENCE/STYLEGUIDE/LAYOUT_PROMO_E.ASPX

    View Slide

  35. A RESPONSIVE
    SANDBOX DURING
    DEVELOPMENT

    View Slide

  36. DO RESPONSIVE LAYOUT GUIDE, EARLY 2013

    View Slide

  37. PRODUCT DESIGN
    HAS INTERESTING CHALLENGES

    View Slide

  38. SUPPORT MULTIPLE
    PLATFORMS & DEVICES

    View Slide

  39. QUALITY, CRAFT,
    & CONSISTENCY

    View Slide

  40. DESIGN FOR SCALE
    & MAINTAINABILITY

    View Slide

  41. DESKTOP/WEB
    iOS WATCH, PHONES, TABLETS
    ANDROID WATCH, PHONES, TABLETS
    WIN8 PHONES, TABLETS

    View Slide

  42. UI LIBRARY

    View Slide

  43. SMACSS.COM

    View Slide

  44. BRADFROSTWEB.COM/BLOG/POST/ATOMIC-WEB-DESIGN

    View Slide

  45. ELEMENTS
    COMPONENTS
    LAYOUTS

    View Slide

  46. TYPES
    STATES
    VARIATIONS

    View Slide

  47. DEVELOPER.ANDROID.COM/DESIGN/BUILDING-BLOCKS/SEEK-BARS

    View Slide

  48. REDLINES

    View Slide

  49. View Slide

  50. VISUAL CHANGES
    FOR NATIVE MOBILE
    WERE A NIGHTMARE

    View Slide

  51. PSD ⟶ DROPBOX ⟶ WIKI ⟶ ☹

    View Slide

  52. 2013 // LIVING STYLE GUIDE WITH SASS + ERB & YAML/JSON

    View Slide

  53. SASS-LANG.COM

    View Slide

  54. SASS-LANG.COM/STYLEGUIDE

    View Slide

  55. SASS-LANG.COM/STYLEGUIDE/RESPONSIVE-TEST

    View Slide

  56. GITHUB.COM/MATTKERSLEY/RESPONSIVE-DESIGN-TESTING

    View Slide

  57. WE OPEN SOURCED
    THE SITE. ANYONE
    CAN CONTRIBUTE

    View Slide

  58. WHAT IF A NEW
    COLOR GETS ADDED?
    THE STYLE GUIDE NEEDS TO BE UPDATED, TOO

    View Slide

  59. CAN THE SASS &
    STYLE GUIDE SHARE
    A SINGLE SOURCE?

    View Slide

  60. DON’T REPEAT
    YOURSELF

    View Slide

  61. c:
    - name: hopbush
    hex: "c69"
    - name: bouquet
    hex: "b37399"
    <% data.color.c.each do |s| %>
    $<%= s.name %>: #<%= s.hex %>;
    <% end %>
    YML
    SCSS.ERB

    View Slide

  62. c:
    - name: hopbush
    hex: "c69"
    - name: bouquet
    hex: "b37399"
    - for s in data.color.c
    %li{class: "s-" + s.name}
    %code
    = "$" + s.name
    %br/
    = "#" + s.hex
    YML
    HAML

    View Slide

  63. SASS COLOR STYLE GUIDE

    View Slide

  64. NOW // LIVING DESIGN SYSTEM

    View Slide

  65. STYLE GUIDES
    MUST BE CURRENT
    AND USEFUL

    View Slide

  66. JACOBRASK.GITHUB.IO/STYLEDOCCO

    View Slide

  67. SFDC-STYLEGUIDE.HEROKUAPP.COM

    View Slide

  68. ENTERPRISE

    PRODUCT DESIGN
    CAN HAVE BIGGER CHALLENGES

    View Slide

  69. MULTIPLE PLATFORMS & DEVICES
    MANY PRODUCTS & FEATURES
    TONS OF PARTNERS BUILDING ON PLATFORM
    INNOVATING WHILE MAINTAINING LEGACY
    ACCESSIBILITY REQUIREMENTS

    View Slide

  70. DOZENS OF SCRUM TEAMS
    HUNDREDS OF DEVELOPERS
    SMALL TEAM OF DESIGNERS

    View Slide

  71. HOW DO WE COMMUNICATE
    DESIGN ACROSS A

    LARGE ORGANIZATION?

    View Slide

  72. WHERE CAN I FIND THE ICONS?
    WHERE CAN I FIND THE ICONS?
    WHAT COLOR IS THE BUTTON BORDER?

    View Slide

  73. REDLINES?

    View Slide

  74. View Slide

  75. #FML

    View Slide

  76. DESIGN PAGES

    View Slide

  77. DESIGN SYSTEMS

    View Slide

  78. “A FRACTURED PROCESS
    MAKES FOR A FRACTURED
    USER EXPERIENCE.”
    — NATE FORTIN

    View Slide

  79. DUPLICATION
    䡿 INCONSISTENCIES

    View Slide

  80. NO MAINTAINABILITY
    䡿 INEFFICIENCY

    View Slide

  81. LACK OF CLARITY
    䡿 CONFUSION

    View Slide

  82. WHEN STYLE GUIDES
    AREN’T CURRENT,
    THEY’RE NOT USEFUL

    View Slide

  83. DON’T CREATE A
    ZOMBIE STYLE GUIDE

    View Slide

  84. MAKE DOCUMENTATION
    A REGULAR PART

    OF YOUR WORKFLOW

    View Slide

  85. MAKING SOMETHING NEW?
    DOCUMENT IT

    View Slide

  86. REVISING SOMETHING?
    REFACTOR & DOCUMENT IT

    View Slide

  87. APPLICATION AREA COLORS

    View Slide

  88. HOW DO WE KEEP
    COLORS, SPACING,
    & SIZES CONSISTENT?

    View Slide

  89. HOW DO WE MAKE
    FUTURE DESIGN
    CHANGES FASTER?

    View Slide

  90. HOW DO WE KEEP
    OUR DESIGN
    SYSTEM AGNOSTIC?

    View Slide

  91. SINGLE SOURCE

    OF TRUTH
    OR… DON’T REPEAT YOURSELF

    View Slide

  92. TYPOGRAPHY
    COLORS & GRADIENTS
    BORDERS
    METRICS & SPACING
    ANIMATIONS & TRANSITIONS

    View Slide

  93. Sass/LESS/Stylus
    Lightning
    JSON (iPhone)
    XML (Android)
    HTML (style guide)
    {

    View Slide

  94. {
    "name": "COLOR_TEXT",
    "value": "#000",
    "category": "text-color",
    "comment": "Body text"
    }
    // Body text
    $color-text: #000;
    THEO
    SASS

    View Slide

  95. {
    "name": "COLOR_TEXT",
    "value": "#000",
    "category": "text-color",
    "comment": "Body text"
    }
    // Body text
    color-text = #000;
    THEO
    STYLUS

    View Slide

  96. {
    "name": "COLOR_TEXT",
    "value": "#000",
    "category": "text-color",
    "comment": "Body text"
    }
    // Body text
    @color-text: #000;
    THEO
    LESS

    View Slide

  97. {
    "name": "COLOR_TEXT",
    "value": "#000",
    "category": "text-color",
    "comment": "Body text"
    }
    colorText = rgba(0, 0, 0, 1)
    THEO
    IOS

    View Slide

  98. {
    "name": "COLOR_TEXT",
    "value": "#000",
    "category": "text-color",
    "comment": "Body text"
    }
    colorText
    #000

    View Slide

  99. {
    "name": "COLOR_TEXT",
    "value": "#000",
    "category": "text-color",
    "comment": "Body text"
    }


    THEO
    AURA

    View Slide

  100. View Slide

  101. THEO-GENERATED DESIGN PROPERTIES REFERENCE

    View Slide

  102. CSS — HEX
    IOS — RGBA
    ANDROID — 8-DIGIT HEX

    View Slide

  103. CSS — REM/EM/PX
    IOS — PT
    ANDROID — SP/DIP

    View Slide

  104. NO MORE

    HARD-CODED VALUES

    View Slide

  105. NO MORE
    PROLIFERATION OF
    INCONSISTENT STYLES

    View Slide

  106. NO MORE HAVING TO
    CONTACT EVERY DEV TEAM
    FOR A MINOR COLOR CHANGE

    View Slide

  107. ACCESSIBILITY

    View Slide

  108. GITHUB.COM/SALESFORCE-UX/THEO

    View Slide

  109. ASSETS

    View Slide

  110. ICONS STORED
    IN A REPOSITORY
    AS SVGS

    View Slide

  111. ICONS DISPLAY IN
    OUR STYLE GUIDE
    AUTOMATICALLY

    View Slide

  112. ASSETS DISPLAYED IN STYLE GUIDE

    View Slide

  113. A CHANGE IN ONE
    PLACE CHANGES
    EVERYWHERE

    View Slide

  114. TRUE CONSISTENCY

    View Slide

  115. COLLABORATION
    BETWEEN UX + ENGINEERING

    View Slide

  116. MEDIUM.COM/SALESFORCE-UX/LIVING-DESIGN-SYSTEM-3AB1F2280EF7

    View Slide

  117. MEDIUM.COM/SALESFORCE-UX

    View Slide

  118. @SALESFORCEUX

    View Slide

  119. DRIBBBLE.COM/SALESFORCE

    View Slide

  120. DRIBBBLE.COM/TEAMSASSDESIGN

    View Slide

  121. @TEAMSASSDESIGN

    View Slide

  122. “BE REGULAR AND ORDERLY
    IN YOUR LIFE SO THAT YOU
    MAY BE VIOLENT AND
    ORIGINAL IN YOUR WORK.”
    — GUSTAVE FLAUBERT

    View Slide

  123. SUSY.ODDBIRD.NET

    View Slide

  124. SAN FRANCISCO SASS & FRONTEND MEETUP
    @
    the mixin

    View Slide

  125. THANK YOU

    View Slide