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.

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
    andrea@modo.md
    #webappconf18
    

    View Slide