Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Meet Quanta - Plone's Style Guide

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 64 Anuncio

Más Contenido Relacionado

Similares a Meet Quanta - Plone's Style Guide (20)

Anuncio

Más reciente (20)

Meet Quanta - Plone's Style Guide

  1. 1. A bit of history Albert Casado Celma @albertcasado • Barceloneta Theme (2015) • Pastanaga UI (2017) • Pastanaga Icons (2017)
  2. 2. A bit of history Late 2017
  3. 3. A bit of history 2018
  4. 4. Albert: “The truth is that I only wanted to update Volto’s logo, somehow I ended up creating Quanta as well 😂”
  5. 5. A bit of history 2020
  6. 6. What’s a style guide?
  7. 7. Why a style guide matters? Faster deliverables Design consistency One-stop guide to reference New team members first stop Code and design linked Standardize code DRY
  8. 8. Design systems
  9. 9. Design systems Pre-built blocks Ranging from basic to complex Can be reused and combined They play well with each other Standardize code DRY
  10. 10. Works extremely well with Plone 6 blocks model
  11. 11. Design system Style guide +
  12. 12. AND Design System
  13. 13. New times, new workflows How is it going Figma Sketch Zeplin Adobe XD How it started PDF files Image files Adobe PhotoShop Adobe Illustrator
  14. 14. quanta.pastanaga.io Living Style Guides Storybook StyleGuideDist
  15. 15. Style Guide driven development
  16. 16. Storybook driven development Unit Test Code StoryBook Acceptance Test
  17. 17. docs.voltocms.com/storybook
  18. 18. docs.voltocms.com/storybook
  19. 19. docs.voltocms.com/storybook HELP!
  20. 20. Quanta Universal Rules Foundamentals Builders Text Form Code Bits Knobs Controls Fields Indicators Panels Dialogs Modules Base Ground Activatable Modules
  21. 21. PastanagaUI and Quanta fundamentals Simplify and focus Don’t make the user think Let the user go with the flow Happy path action Structured visual hierarchy as building blocks Earn the user trust every day Make the user feel understood Treat the user as a person
  22. 22. Strategy Theme CMSUI

×