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 full-size slide

  2. #webappconf18

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. $
    Noi B/E
    Designer
    ➡ &

    View full-size slide

  6. Styleguide
    is the new
    Brand Identity Manual

    View full-size slide

  7. NASA Graphics
    Standards Manual

    View full-size slide

  8. NASA Graphics
    Standards Manual

    View full-size slide

  9. NYC subway identity
    manual

    View full-size slide

  10. NYC subway identity
    manual

    View full-size slide

  11. Stessa cosa, per il web

    View full-size slide

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

    View full-size slide

  13. Freestyle
    La vecchia scuola

    View full-size slide

  14. https://clearleft.com/

    View full-size slide

  15. Code for America

    View full-size slide

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

    View full-size slide

  17. Rodney Mullen

    View full-size slide

  18. Street skating
    Moderno, completo

    View full-size slide

  19. Chi è felice?

    View full-size slide

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

    View full-size slide

  21. 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 full-size slide

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

    View full-size slide

  23. Bastien Salabanzi

    View full-size slide

  24. MEGARAMP
    Extreme & PRO only

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. Component oriented

    View full-size slide

  28. Bob Burnquist

    View full-size slide

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

    View full-size slide

  30. Graphic manual

    View full-size slide

  31. Skateboard 

    manual

    View full-size slide

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

    View full-size slide