Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Styleguiding is not a crime

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.

decarola

October 18, 2018
Tweet

More Decks by decarola

Other Decks in Design

Transcript

  1. Styleguiding is not a crime

    Modo chez WebappConf 2018

    #webappconf18

    View Slide

  2. #webappconf18

    View Slide

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

    View Slide

  4. View Slide

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

    View Slide

  6. $
    Noi B/E
    Designer
    ➡ &

    View Slide

  7. View Slide

  8. View Slide

  9. Styleguide
    is the new
    Brand Identity Manual

    View Slide

  10. NASA Graphics
    Standards Manual

    View Slide

  11. NASA Graphics
    Standards Manual

    View Slide

  12. NYC subway identity
    manual

    View Slide

  13. NYC subway identity
    manual

    View Slide

  14. Stessa cosa, per il web

    View Slide

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

    View Slide

  16. View Slide

  17. Freestyle
    La vecchia scuola

    View Slide

  18. Manazza

    View Slide

  19. https://clearleft.com/

    View Slide

  20. Code for America

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. Emmaboshi

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. Quindi:
    • Le cose I componenti hanno un nome.
    • Separazione tra front end e back end.
    • Anche fatta a manazza, è comunque meglio di niente.

    View Slide

  30. Rodney Mullen

    View Slide

  31. Street skating
    Moderno, completo

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. Radio 24

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. Chi è felice?

    View Slide

  46. Designer
    • Ha l’inventario dei componenti a
    disposizione.
    • Più sensibile alle dinamiche di
    sviluppo.
    • Rischio effetto “mani legate”.
    (

    View Slide

  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.
    )

    View Slide

  48. Quindi:
    • Componenti pulite, ordinate, manutenibili.
    • Aiutano a quantificare il lavoro.
    • Strumento utile per designer & sviluppatori.

    View Slide

  49. Bastien Salabanzi

    View Slide

  50. MEGARAMP
    Extreme & PRO only

    View Slide

  51. View Slide

  52. View Slide

  53. Storybook
    • Pattern library interattiva
    • React or Vue or Angular
    • https://storybook.js.org

    View Slide

  54. Styleguidist
    • Pattern library interattiva
    • Creato partendo da React
    Styleguidist
    • https://github.com/vue-
    styleguidist/vue-styleguidist

    View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. Component oriented

    View Slide

  61. Bob Burnquist

    View Slide

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

    View Slide

  63. Graphic manual

    View Slide

  64. Skateboard 

    manual

    View Slide

  65. Grazie!
    @decarola
    [email protected]
    #webappconf18

    View Slide