Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
In Search of the
Single Source
of Truth
@JINA // DEVCONFU // JŪRMALA // 2014
@jina
Senior Product Designer
— NATE FORTIN
“A fractured process
makes for a fractured
user experience.”
Style Guides
are all the rage
…AND THEY HAVE COME A LONG WAY.
2004 // PDF Style Guide
PDFs are a pain
to maintain.
HEY, THAT RHYMES.
2007–2008 // Wordpress Style Guide
alistapart.com/article/writingainterfacestyleguide
Design & Brand Standards
Front-end Development Standards
Keeping Style Guides Current & Useful
Wordpress was
only slightly easier.
…AND NOBODY EXCEPT ME WOULD UPDATE IT.
2010–2011 // Living Style Guide with Sass
Engine Yard App Cloud Style Guide, Early 2011
ZOMG!
Engine Yard App Cloud Style Guide, Early 2011
Sass & Style Guides
are awesome together!
blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides
Make Documentation
a regular part of
your workflow.
01 //
Don’t try to document
everything at once.
YOU’LL LIKELY GIVE UP.
Document
going forward.
Making
something new?
Document it.
Revising something?
Refactor it.
Then document it.
During design & code
reviews, make sure
decisions are documented.
2012–2013 // Living Style Guide with Sass for Web App & Site
Github Wiki for iOS & Android
Do CSS Style Guide, Late 2013
Do Responsive Layout Guide, Early 2013
For mobile, changes to
colors & sizes were a
nightmare to update.
PHOTOSHOP ⟶"DROPBOX ⟶"WIKI ⟶"☹
Document your ideal
CSS Architecture.
02 //
vendor/
dependencies/
base/
components/
regions/
helpers/
responsive/
tools/
}my ideal css architecture
Make a
UI Library.
03 //
oocss.org
ux.mailchimp.com/patterns
Create pages
Create systems
bradfrostweb.com/blog/post/atomic-web-design
01 // Base HTML elements
02 // Modular components
03 // Page regions
04 // Layout system
Show the object
with all of its
associated states.
developer.android.com/design
developer.android.com/design/building-blocks/seek-bars
Show the code you
want people to use,
not the final output.
Add development tools
for rapid development
and testing.
04 //
starbucks.com/static/reference/styleguide
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
starbucks.com/static/reference/styleguide/layout_promo_e.aspx
Try a responsive
sandbox during
development.
Do Responsive Layout Guide, Early 2013
Keep documentation
current & useful.
05 //
jacobrask.github.io/styledocco
2013 // Living Style Guide with Sass + ERB & YAML
sass-lang.com
sass-lang.com/styleguide
github.com/mattkersley/Responsive-Design-Testing
sass-lang.com/styleguide/responsive-test
We open sourced the
website. Anyone can
contribute to design.
What if a new color
gets added?
THE STYLE GUIDE NEEDS TO BE UPDATED, TOO.
Can the CSS & Style Guide both
share the same attributes in
one single configuration?
Single Source of Truth
Don’t Repeat Yourself
colors:
- name: hopbush
hex: "c69"
- name: bouquet
hex: "b37399"
- name: venus
hex: "998099"
- name: patina
hex: "699"
- n...
colors:
- name: hopbush
hex: "c69"
- name: bouquet
hex: "b37399"
- name: venus
hex: "998099"
- name: patina
hex: "699"
- n...
Sass Color Style Guide
2014 // Living Style Guide & Prototype with Sass & Angular as Spec
+ Living Variables System for All Devices & Platforms
sfdc-styleguide.herokuapp.com
Prototypes
Aura (our web framework)
Native iOS
Native Android
Native Windows
How do we keep
our colors, spacing,
& sizes consistent?
Theo
BY SALESFORCE UX // OPEN SOURCING // COMING VERY SOON!
Theo: theme tokenizer
with JSON input
Sass
Stylus
LESS
Aura
plist
XML
{
sfdc-styleguide.herokuapp.com
@SalesforceUX
dribbble.com/salesforce
sass-lang.com
@TeamSassDesign
dribbble.com/TeamSassDesign
themixinsf.com
susy.oddbird.net
artinmycoffee.com
— GUSTAVE FLAUBERT
“Be regular and orderly in your
life so that you may be violent
and original in your work.”
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
Jina Bolton - in the search of the single source of truth
Upcoming SlideShare
Loading in …5
×

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

955 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
  • Be the first to comment

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

×