Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fabbrucci -
0 likes540 views
The document discusses the importance and utility of living styleguides in design and development, emphasizing their role in enhancing visual consistency, rapid prototyping, and effective communication among teams. It describes workflows and techniques for implementing styleguides, including pattern libraries, prototypes, and repositories, while highlighting the necessity of adaptability in design processes. Additionally, it offers tips for CSS best practices and encourages experimentation in building personalized styleguides.
Come creare e manutenere una Styleguide visiva per i tuoi clienti - Fabio Fabbrucci -
- 1. STYLEGUIDE DESIGN AND DEVELOPMENT Hi, I’m a happy styleguide!
- 2. TOPICS FOR TODAY Why and when we need a styleguide What is a living styleguide Different workflows Find me on Twitter: @Fabbrucci
- 4. I feel fine here
- 5. I feel strange here …
- 6. Thanks for wrapping me!
- 7. Thanks for overriding me!
- 8. “Every day a Nody becomes sad. We can’t turn our back on it.”
- 9. This is Teamy We have super powers!
- 10. We did a great job!
- 11. We have to change something … For instance: change the new menu, support blackberry, sell on kindle …
- 12. Oh oh! We are screwed … For instance: we can’t cahnge the code, we need to restart …
- 13. “Every day a Teamy become sad. We can’t turn our back on it.”
- 14. This is Needy I need a cool product!
- 15. Has Doesn’t want Needs Be sadRisksFears Uncertainties Product
- 16. looks for come to an agreement Collaborators Competitors
- 17. Rubbish Different Product (that works) Initial Product
- 18. “Every day a Needy become sad. We can’t turn our back on it.”
- 19. How can we css help them?
- 20. A LITTLE BIT OF CONTEXT Once upon a time …
- 21. Risks Management
- 22. Artifacts focus on blame WHAT THE HELL!!!
- 23. Reality Check Plan ————— Idea Execution ————— Reality This is heaven Does it exist?
- 24. Agile Short cycles Focus on value Soft planning
- 25. Side Effects New risks, more fears, more uncertainties More reality, more chances
- 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. Design is execution, but also discovery
- 28. The way you design CSS changes in each context
- 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. WHAT IS A LIVING STYLEGUIDE Do you remember me? Yuk! http://styleguides.io/
- 31. 1. Pattern library A bucket list of components that people can “use” (typography, colors, icons, visual patterns, buttons…) Its focus is granularity.
- 33. 2. Prototype A rudimentary working model for demonstration purpose (working prototypes, static pages, a pre-product) Its focus is consistency.
- 35. 3. Repository A collection of assets and knowledge (build tools, coding standard, frontend architecture…) Its focus is simplicity.
- 36. A living styleguide is a multilanguage dictionary
- 37. WORKFLOWS I love Italian food!
- 38. 1. All-in Visual Interfaces time Living Styleguide Prototype Product Understand and decide Risks and builds Problems: Whose?
- 39. 2. Upfront time Living Styleguide Prototype Product Understand and decide Risks and builds Problems: Whose?
- 40. 3. Small Steps time Living Styleguide Prototype Product Understand and decide. Problems: whose? Risks and build
- 41. 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
- 43. Choose the workflows that best fit product success and Needy relationship
- 45. Huge Costellation OOCSS Design Refactoring Team Build tools Devices Responsive Design Naming Browsers Performance
- 46. My favourite four CSS tips for you
- 47. How and when should I use helpers, mixins, extends, OOCSS? 1. Focus on changeability
- 48. 2. Start thinking in terms of components more than pages
- 49. visual regression, deferral commitment 3. Learn how to refactor
- 50. 4. Spend 10% of your time on a toolkit Let your computer do the job for you
- 51. 5. Calibrate quality Continuous relearning, be able to downgrade when needed
- 52. How to start your experimentation? Where are my feet?
- 54. 2. Go and build your first styleguide
- 55. 3. Which of your clients best fit this approach?
- 56. CSS is definitely for real pro
- 57. It’s PROMO time Frontend Automation 27-28th Oct, Bologna Digital products design