Jina Bolton - in the search of the single source of truth

850 views

Published on

Product design and development can cover a range of devices and platforms: iPhone, iPad, Android phones and tablets, responsive web applications and web sites, desktop apps… and if you work in a very large organization, you may have a range of products and features within each of these areas. In order to stay productive and effective across teams, platforms, and/or devices, systemic design and development is imperative. Style Guides are a great step towards keeping everything aligned. But how can the style guide be a maintainable, useful resource rather than a distraction? Learn from a product designer's perspective from past and current projects how she and her teams have strived to maintain a "single source of truth" for a truly living spec through a living style guide and prototype — all of which can improve your product design and development lifecycle.

Published in: Software, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jina Bolton - in the search of the single source of truth

  1. 1. In Search of the Single Source of Truth @JINA // DEVCONFU // JŪRMALA // 2014
  2. 2. @jina
  3. 3. Senior Product Designer
  4. 4. — NATE FORTIN “A fractured process makes for a fractured user experience.”
  5. 5. Style Guides are all the rage …AND THEY HAVE COME A LONG WAY.
  6. 6. 2004 // PDF Style Guide
  7. 7. PDFs are a pain to maintain. HEY, THAT RHYMES.
  8. 8. 2007–2008 // Wordpress Style Guide
  9. 9. alistapart.com/article/writingainterfacestyleguide
  10. 10. Design & Brand Standards Front-end Development Standards Keeping Style Guides Current & Useful
  11. 11. Wordpress was only slightly easier. …AND NOBODY EXCEPT ME WOULD UPDATE IT.
  12. 12. 2010–2011 // Living Style Guide with Sass
  13. 13. Engine Yard App Cloud Style Guide, Early 2011
  14. 14. ZOMG!
  15. 15. Engine Yard App Cloud Style Guide, Early 2011
  16. 16. Sass & Style Guides are awesome together!
  17. 17. blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides
  18. 18. Make Documentation a regular part of your workflow. 01 //
  19. 19. Don’t try to document everything at once. YOU’LL LIKELY GIVE UP.
  20. 20. Document going forward.
  21. 21. Making something new? Document it.
  22. 22. Revising something? Refactor it. Then document it.
  23. 23. During design & code reviews, make sure decisions are documented.
  24. 24. 2012–2013 // Living Style Guide with Sass for Web App & Site Github Wiki for iOS & Android
  25. 25. Do CSS Style Guide, Late 2013
  26. 26. Do Responsive Layout Guide, Early 2013
  27. 27. For mobile, changes to colors & sizes were a nightmare to update. PHOTOSHOP ⟶"DROPBOX ⟶"WIKI ⟶"☹
  28. 28. Document your ideal CSS Architecture. 02 //
  29. 29. vendor/ dependencies/ base/ components/ regions/ helpers/ responsive/ tools/ }my ideal css architecture
  30. 30. Make a UI Library. 03 //
  31. 31. oocss.org
  32. 32. ux.mailchimp.com/patterns
  33. 33. Create pages
  34. 34. Create systems
  35. 35. bradfrostweb.com/blog/post/atomic-web-design
  36. 36. 01 // Base HTML elements 02 // Modular components 03 // Page regions 04 // Layout system
  37. 37. Show the object with all of its associated states.
  38. 38. developer.android.com/design
  39. 39. developer.android.com/design/building-blocks/seek-bars
  40. 40. Show the code you want people to use, not the final output.
  41. 41. Add development tools for rapid development and testing. 04 //
  42. 42. starbucks.com/static/reference/styleguide
  43. 43. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
  44. 44. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
  45. 45. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
  46. 46. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
  47. 47. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
  48. 48. starbucks.com/static/reference/styleguide/layout_promo_e.aspx
  49. 49. Try a responsive sandbox during development.
  50. 50. Do Responsive Layout Guide, Early 2013
  51. 51. Keep documentation current & useful. 05 //
  52. 52. jacobrask.github.io/styledocco
  53. 53. 2013 // Living Style Guide with Sass + ERB & YAML
  54. 54. sass-lang.com
  55. 55. sass-lang.com/styleguide
  56. 56. github.com/mattkersley/Responsive-Design-Testing
  57. 57. sass-lang.com/styleguide/responsive-test
  58. 58. We open sourced the website. Anyone can contribute to design.
  59. 59. What if a new color gets added? THE STYLE GUIDE NEEDS TO BE UPDATED, TOO.
  60. 60. Can the CSS & Style Guide both share the same attributes in one single configuration?
  61. 61. Single Source of Truth
  62. 62. Don’t Repeat Yourself
  63. 63. 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
  64. 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" %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
  65. 65. Sass Color Style Guide
  66. 66. 2014 // Living Style Guide & Prototype with Sass & Angular as Spec + Living Variables System for All Devices & Platforms
  67. 67. sfdc-styleguide.herokuapp.com
  68. 68. Prototypes Aura (our web framework) Native iOS Native Android Native Windows
  69. 69. How do we keep our colors, spacing, & sizes consistent?
  70. 70. Theo BY SALESFORCE UX // OPEN SOURCING // COMING VERY SOON!
  71. 71. Theo: theme tokenizer with JSON input Sass Stylus LESS Aura plist XML {
  72. 72. sfdc-styleguide.herokuapp.com
  73. 73. @SalesforceUX
  74. 74. dribbble.com/salesforce
  75. 75. sass-lang.com
  76. 76. @TeamSassDesign
  77. 77. dribbble.com/TeamSassDesign
  78. 78. themixinsf.com
  79. 79. susy.oddbird.net
  80. 80. artinmycoffee.com
  81. 81. — GUSTAVE FLAUBERT “Be regular and orderly in your life so that you may be violent and original in your work.”
  82. 82. 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

×