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.
Loading in …3
1 of 58

Living Styleguide: design and development workflows



Download to read offline

Living Styleguide: design and development workflows

  1. 1. STYLEGUIDE DESIGN AND DEVELOPMENT Hi, I’m a happy styleguide!
  2. 2. TOPICS FOR TODAY Why and when we need a styleguide What is a living styleguide Different workflows Find me on Twitter: @Fabbrucci
  3. 3. This is Nody YO!
  4. 4. I feel fine here
  5. 5. I feel strange here …
  6. 6. Thanks for wrapping me!
  7. 7. Thanks for overriding me!
  8. 8. “Every day a Nody becomes sad. We can’t turn our back on it.”
  9. 9. This is Teamy We have super powers!
  10. 10. We did a great job!
  11. 11. We have to change something … For instance: change the new menu, support blackberry, sell on kindle …
  12. 12. Oh oh! We are screwed … For instance: we can’t cahnge the code, we need to restart …
  13. 13. “Every day a Teamy become sad. We can’t turn our back on it.”
  14. 14. This is Needy I need a cool product!
  15. 15. Has Doesn’t want Needs Be sadRisksFears Uncertainties Product
  16. 16. looks for come to an agreement Collaborators Competitors
  17. 17. Rubbish Different Product (that works) Initial Product
  18. 18. “Every day a Needy become sad. We can’t turn our back on it.”
  19. 19. How can we css help them?
  20. 20. A LITTLE BIT OF CONTEXT Once upon a time …
  21. 21. Risks Management
  22. 22. Artifacts focus on blame WHAT THE HELL!!!
  23. 23. Reality Check Plan ————— Idea Execution ————— Reality This is heaven
 Does it exist?
  24. 24. Agile Short cycles Focus on value Soft planning
  25. 25. Side Effects New risks, more fears, more uncertainties More reality, more chances
  26. 26. It’s where needy starts to see things “Yes, it’s what I want but more…” Design becomes crucial Offers reality check Teamy provides feasibility Empowers decision making Tactical and strategic Enables distributed ownership emergent leadership, emergent respect
  27. 27. Design is execution, but also discovery
  28. 28. The way you design CSS changes in each context
  29. 29. Why a living styleguide is important? Discovery Enable “rapid hi-fi prototyping” Fast feedback from stakeholders Execution Continuous Reality Check Visual consistency brings brand reputation
  30. 30. WHAT IS A LIVING STYLEGUIDE Do you remember me? Yuk!
  31. 31. 1. Pattern library A bucket list of components that people can “use” (typography, colors, icons, visual patterns, buttons…) Its focus is granularity.
  32. 32. 2. Prototype A rudimentary working model for demonstration purpose (working prototypes, static pages, a pre-product) Its focus is consistency.
  33. 33. Salesforce Example
  34. 34. 3. Repository A collection of assets and knowledge (build tools, coding standard, frontend architecture…) Its focus is simplicity.
  35. 35. A living styleguide is a multilanguage dictionary
  36. 36. WORKFLOWS I love Italian food!
  37. 37. 1. All-in Visual Interfaces time Living Styleguide Prototype Product Understand and decide Risks and builds Problems: Whose?
  38. 38. 2. Upfront time Living Styleguide Prototype Product Understand and decide Risks and builds Problems: Whose?
  39. 39. 3. Small Steps time Living Styleguide Prototype Product Understand and decide. Problems: whose? Risks and build
  40. 40. Pro & Cons 1 2 3 Easy to plan No visual imprinting Risks are more distributed Emergent lean design High level of reality-check Lack of reality-check All risks are on team Getting meaningful feedback is hard Hard to plan Leadership and conflicts emerge
  41. 41. Collaborators Competition StableAlpha 1 All-in 2
 Upfront 3
 Small steps
  42. 42. Choose the workflows that best fit product success and Needy relationship
  43. 43. TECHNIQUES AND TOOLS 1+2 … 3!
  44. 44. Huge Costellation OOCSS Design Refactoring Team Build tools Devices Responsive Design Naming Browsers Performance
  45. 45. My favourite four CSS tips for you
  46. 46. How and when should I use helpers, mixins, extends, OOCSS? 1. Focus on changeability
  47. 47. 2. Start thinking in terms of components more than pages
  48. 48. visual regression, deferral commitment 3. Learn how to refactor
  49. 49. 4. Spend 10% of your time on a toolkit Let your computer do the job for you
  50. 50. 5. Calibrate quality Continuous relearning, be able to downgrade when needed
  51. 51. How to start your experimentation? Where are my feet?
  52. 52. 1. Explore other people CSS architecture
  53. 53. 2. Go and build your first styleguide
  54. 54. 3. Which of your clients best fit this approach?
  55. 55. CSS is definitely for real pro
  56. 56. It’s PROMO time Frontend Automation 27-28th Oct, Bologna Digital products design
  57. 57. Thank YOU @fabbrucci Credits BAZINGA!