DesignOps: Removing Friction from Your Front-end Development Workflow

DesignOps: Removing Friction from Your Front-end Development Workflow

Implementing UX/UI change is not easy when code is architected without front-end flexibility in mind. If the process for making design changes is cumbersome, it slows down product iteration. Architect your app so that design changes and adding new features can be as frictionless as possible.

(Slides for my talk at Fluent 2013)
http://fluentconf.com/fluent2013/public/schedule/detail/28025

755c2a9445eec2d2451804f43bc34654?s=128

jessicaspacekat

May 29, 2013
Tweet

Transcript

  1. DesignOps: Removing friction from your front-end development workflow Jessica Allen

    by
  2. Title Text san francisco

  3. beep! beep

  4. I do like comics

  5. Title Text macarons + photodecora

  6. kitty cats I’m going to pair with you today. Problem?

  7. decora + kitty cats??

  8. baby unicorns

  9. Get excited and make things!

  10. None
  11. jessconf

  12. jessconf for developers named Jessica

  13. @jessicard @jlsuttles @jessicag me (in disguise)

  14. *not pictured @jessicaspacekat*

  15. Engine Yard is a place to host and scale your

    web apps.
  16. None
  17. Business Time

  18. None
  19. This place is f’reals

  20. None
  21. @ejgreenberg “omg I stayed there!”

  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. why is this so hard?!

  31. there are... ways to make it better

  32. keeping it real

  33. None
  34. None
  35. None
  36. None
  37. None
  38. small tweaks & as-you-go improvements

  39. design-friendly dev environment

  40. Production Development &

  41. Development UI Production UI application real user data

  42. Development UI Production UI application real user data

  43. Development UI Production UI application real user data

  44. mocked data Development UI + Application Production UI + Application

    real user data
  45. mocked data Development UI + Application Production UI + Application

    real user data
  46. mocked data Development UI + Application Production UI + Application

    real user data
  47. mocked customers

  48. mocked customers new user

  49. mocked customers new user small customer

  50. mocked customers new user small customer medium customer

  51. mocked customers new user small customer medium customer large customer

  52. mocked customers new user small customer medium customer large customer

    crazy customer
  53. ⌘S ⌘tab ⌘R

  54. None
  55. None
  56. save on your way out

  57. save on your way out “[text editor] save on focus

    lost”
  58. gem ‘xray-rails’

  59. None
  60. don’t break production

  61. (unobtrusive) safety goggles.

  62. // before // after %body{:class => Rails.env} %body Rails app

    haml
  63. <body class=”development”> resulting page html

  64. body { min-width: 960px; background: transparent url(/images/layout/bg_sky.png) top left repeat-x;

    // Add a visual banner to the top corner for dev mode &.development { &:after { position: fixed; content: 'development'; background-color: hsl(295, 77%, 74%); @include rotate(-45deg); white-space: nowrap; top: 26px; left: -50px; width: 200px; padding: 10px 0; text-align: center; color: $color_white; font-size: 14px; } } } Rails app sass
  65. - if Rails.env.development? %link(rel="shortcut icon" href="/favicon-dev.png") - else %link(rel="shortcut icon"

    href="/favicon.ico") Rails app haml
  66. kid gloves.

  67. tests that don’t suck.

  68. new hotness

  69. you got this

  70. test breaker

  71. all. the. time.

  72. ul.block.instance-role Rails app haml

  73. ul.block.instance-role Rails app haml what is this class “.instance-role” ?

  74. ul.block.instance-role Rails app haml // before // after ul.block

  75. ul.block.instance-role Rails app haml // before // after ul.block heck

    yeah concise!
  76. Failure/Error: response.should have_selector(".instance-role") expected css ".instance-role" to return something

  77. Failure/Error: response.should have_selector(".instance-role") expected css ".instance-role" to return something oh

    come on!
  78. html css tests page.should have_selector(".instance-role") <div class=“instance-role”> .instance-role { padding:

    10px; } .instance-role gets around
  79. html css tests <div class=“header”> .header { padding: 10px; }

    .instance-role gets around page.should have_selector(".instance-role")
  80. html css tests page.should have_selector( "[data-purpose='instance-role']") <div class=“header” data-purpose=“instance-role” >

    .header { padding: 10px; } data-purpose for tests
  81. surviving the sprite-pocalypse

  82. None
  83. None
  84. None
  85. None
  86. ahhhhhh!

  87. None
  88. ahhhhhhhhhhhh hhhhhhhhhhhhh hhhhhhhhhhhh!

  89. photoshop? no thank you

  90. webfont icons

  91. color size crispness

  92. Ps

  93. None
  94. %button %span.picons-settings Settings Rails app haml

  95. old new!

  96. None
  97. .arrow-down { display: inline-block; width: 0; height: 0; border-left: 5px

    solid transparent; border-right: 5px solid transparent; border-top: 5px solid grey; border-bottom: none; } css css-tricks.com/snippets/css/css-triangle/
  98. CSS frameworks

  99. the good parts

  100. the good parts •hell yeah grid systems

  101. the good parts •hell yeah grid systems •mobile-responsive

  102. the good parts •hell yeah grid systems •mobile-responsive •prototyping

  103. the good parts •hell yeah grid systems •mobile-responsive •prototyping •living

    style guide
  104. the good parts •hell yeah grid systems •mobile-responsive •prototyping •living

    style guide •great starting point
  105. None
  106. less good parts

  107. less good parts •xtra css

  108. less good parts •xtra css •limits your expression

  109. less good parts •xtra css •limits your expression •looks familiar

  110. sure!

  111. style guide maintenance

  112. so...you need a dropdown?

  113. so...you need a dropdown?

  114. so...you need a dropdown?

  115. so...you need a dropdown?

  116. None
  117. None
  118. None
  119. None
  120. None
  121. JavaScript

  122. live demo JavaScript

  123. live demo code snippet JavaScript

  124. live demo code snippet JavaScript variations

  125. ta-da

  126. sharing tools with your back-end comrades

  127. None
  128. vs.

  129. None
  130. $ git branch moar-sparklez

  131. $ git pull $ git checkout -b “moar-sparklez” make rad

    design changes here $ git add -p $ git commit -m “sparklier pages” $ git push origin moar-sparklez
  132. None
  133. None
  134. None
  135. None
  136. Propane for Campfire + CloudApp + Dropbox sharing images

  137. ye olde whiteboard

  138. None
  139. @lanejoshlane “Hey that looks... familiar”

  140. big picture feedback

  141. details in code

  142. like form interaction

  143. ...and integration

  144. big small

  145. Make it pretty

  146. Make it pretty

  147. everyone has an opinion, but...

  148. customers are experts in what sucks about your UI everyone

    has an opinion, but...
  149. colleagues doing customer support

  150. colleagues doing customer support are experts in what sucks about

    your UI
  151. UX Office Hours

  152. None
  153. •stay user-centric

  154. •stay user-centric •prioritize customer needs

  155. •stay user-centric •prioritize customer needs •new feature planning

  156. quick recap

  157. clean up as you go

  158. develop with real(alistic) users

  159. “save on focus lost”

  160. visual difference development

  161. flexible tests with data attributes

  162. web fonts Ps

  163. CSS frameworks 1 1 1 1 1 1 1 1

  164. tend your style guide

  165. shared tools

  166. new feature planning

  167. @jessicaspacekat thanks! Office Hours at 1:45pm East Lounge (Table A)