Styleguiding is not a crime

Eaf6bcd3b320c1167f2522470d0e3e26?s=47 decarola
October 18, 2018

Styleguiding is not a crime

Strumenti, approcci, storie passate e sogni futuri delle style guide.
Le style guide, seppur in forme e modi diversi, sono uno strumento ormai decennale utile a più figure professionali. Un terreno comune dove diversi linguaggi trovano accoglienza e possono dialogare.

Eaf6bcd3b320c1167f2522470d0e3e26?s=128

decarola

October 18, 2018
Tweet

Transcript

  1. Styleguiding is not a crime
 Modo chez WebappConf 2018
 #webappconf18

  2. #webappconf18

  3. Andrea De Carolis @decarola @wearemodo http://modo.md

  4. None
  5. Facciamo front end • Architetture • Performance • Per agenzie

  6. $ Noi B/E Designer ➡ & ➡

  7. None
  8. None
  9. Styleguide is the new Brand Identity Manual

  10. NASA Graphics Standards Manual

  11. NASA Graphics Standards Manual

  12. NYC subway identity manual

  13. NYC subway identity manual

  14. Stessa cosa, per il web

  15. https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/

  16. None
  17. Freestyle La vecchia scuola

  18. Manazza

  19. https://clearleft.com/

  20. Code for America

  21. None
  22. None
  23. None
  24. None
  25. Emmaboshi

  26. None
  27. None
  28. None
  29. Quindi: • Le cose I componenti hanno un nome. •

    Separazione tra front end e back end. • Anche fatta a manazza, è comunque meglio di niente.
  30. Rodney Mullen

  31. Street skating Moderno, completo

  32. None
  33. None
  34. None
  35. None
  36. None
  37. Radio 24

  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. Chi è felice?

  46. Designer • Ha l’inventario dei componenti a disposizione. • Più

    sensibile alle dinamiche di sviluppo. • Rischio effetto “mani legate”. (
  47. Sviluppatore B/E • Documentazione esaustiva su ogni componente. • Ha

    degli esempi chiari su come funzionano i vari componenti. • Percepisce la complessità della parte presentazionale. )
  48. Quindi: • Componenti pulite, ordinate, manutenibili. • Aiutano a quantificare

    il lavoro. • Strumento utile per designer & sviluppatori.
  49. Bastien Salabanzi

  50. MEGARAMP Extreme & PRO only

  51. None
  52. None
  53. Storybook • Pattern library interattiva • React or Vue or

    Angular • https://storybook.js.org
  54. Styleguidist • Pattern library interattiva • Creato partendo da React

    Styleguidist • https://github.com/vue- styleguidist/vue-styleguidist
  55. None
  56. None
  57. None
  58. None
  59. None
  60. Component oriented

  61. Bob Burnquist

  62. – Anonimo skater 16enne “Skate before is too late”.

  63. Graphic manual

  64. Skateboard 
 manual

  65. Grazie! @decarola andrea@modo.md #webappconf18