jina bolton - in the search of the single source of truth
DESCRIPTION
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.TRANSCRIPT
In Search of theSingle Source of Truth@ J I N A / / D E V CO N F U / / JŪR M A L A / / 2 0 1 4
@jina
Senior Product Designer
— N AT E F O R T I N
“A fractured process makes for a fractured user experience.”
Style Guides are all the rage… A N D T H E Y H A V E CO M E A LO N G W A Y.
2004 // PDF Style Guide
PDFs are a pain to maintain.H E Y, T H AT R H Y M E S .
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.… A N D N O B O D Y E X C E PT M E W O U L D U P D AT E I T.
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 work!ow.
0 1 / /
Don’t try to document everything at once.Y O U ’ L L L I K E LY G I V E U P.
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 & SiteGithub 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.P H O TO S H O P ⟶"D R O P B O X ⟶"W I K I ⟶"☹ � �
Document your ideal CSS Architecture.
0 2 / /
vendor/
dependencies/
base/
components/
regions/
helpers/
responsive/
tools/
} my ideal css architecture
Make aUI Library.
0 3 / /
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 !nal output.
Add development tools for rapid development and testing.
0 4 / /
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.
0 5 / /
jacobrask.github.io/styledocco
2013 // Living Style Guide with Sass + ERB & YAML
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?T H E S T Y L E G U I D E N E E D S TO B E U P D AT E D , TO O .
Can the CSS & Style Guide both share the same attributes in one single con!guration?
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"
- 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
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
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?
TheoB Y S A L E S F O R C E U X / / O P E N S O U R C I N G / / CO M I N G V E R Y S O O N !
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
— G U S TA V E F L A U B E R T
“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 S T A G R A M , & G I T H U B
@jina