Dalle Styleguide alla Pattern Libraries: cosa serve e quando
•
0 gostou•972 visualizações
Slide di Alessandro Violini per il CSSDay 2017 a Faenza
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Dalle Styleguide alla Pattern Libraries: cosa serve e quando
Semelhante a Dalle Styleguide alla Pattern Libraries: cosa serve e quando (9)
Mais de extrategy
Mais de extrategy (20)
Dalle Styleguide alla Pattern Libraries: cosa serve e quando
- 1. Dalle Styleguide alle Pattern Libraries: cosa serve e quando 1
- 2. #CSSDAY - Faenza 2017 @Violo - extrategy Alessandro Violini coding to work out Retro Computer Collector Plein Air Lover Drummer Interface Developer Interaction Designer 2
- 3. #CSSDAY - Faenza 2017 @Violo - extrategy Contesto: • single page web application • tablet - desktop - smartphone • progetti > 6 mesi • applicazioni prodotto • team dinamici • team cross professionali • ambito finanziario 3
- 4. #CSSDAY - Faenza 2017 @Violo - extrategy Le diverse figure professionali sono una ricchezza che possono generare debito 4
- 5. #CSSDAY - Faenza 2017 @Violo - extrategy Debito Tecnico e Debito di Dominio 5
- 6. #CSSDAY - Faenza 2017 @Violo - extrategy La Styleguide 6
- 7. #CSSDAY - Faenza 2017 @Violo - extrategy “è un insieme di standard per la progettazione di documenti” 7
- 8. #CSSDAY - Faenza 2017 @Violo - extrategy • connesse alla brand identity • vengono sviluppate da un UI designer • raramente vengono modificate • non necessitano di automatismi 8
- 9. #CSSDAY - Faenza 2017 @Violo - extrategy • orienta lo studio creativo • condivide le informazioni • favorisce la coerenza • tiene traccia delle decisioni • sperimenta le soluzioni 9
- 10. #CSSDAY - Faenza 2017 @Violo - extrategy la styleguide non ti permette di costruire una pagina, ti indica come farlo 10
- 11. #CSSDAY - Faenza 2017 @Violo - extrategy Come sfrutto le Styleguide • creo un ambiente per la condivisione • le condivido con tutto il team • raccolgo feedback che possono influenzare il processo di design 11
- 12. #CSSDAY - Faenza 2017 @Violo - extrategy12 Variabili colore
- 13. #CSSDAY - Faenza 2017 @Violo - extrategy13
- 14. #CSSDAY - Faenza 2017 @Violo - extrategy14 Placeholder
- 15. #CSSDAY - Faenza 2017 @Violo - extrategy La Pattern Library 15
- 16. #CSSDAY - Faenza 2017 @Violo - extrategy “è un modo formale di documentare soluzioni a problemi di design” 16
- 17. #CSSDAY - Faenza 2017 @Violo - extrategy I Design Pattern 17
- 18. #CSSDAY - Faenza 2017 @Violo - extrategy “sono le soluzioni progettuali generali a problemi ricorrenti” 18
- 19. #CSSDAY - Faenza 2017 @Violo - extrategy Thanks to: Christopher Alexander 19
- 20. #CSSDAY - Faenza 2017 @Violo - extrategy20 Styleguide • connesse alla brand identity • vengono sviluppate da un UI designer • raramente vengono modificate • non necessitano di automatismi Pattern Library • derivano dalla styleguide • vengono sviluppate da un UI/ID designer • crescono insieme al progetto • vanno manutenute (automaticamente?)
- 21. #CSSDAY - Faenza 2017 @Violo - extrategy21 Styleguide • orienta lo studio creativo • condivide le informazioni • favorisce la coerenza • tiene traccia delle decisioni • sperimenta le soluzioni Pattern Library • fornisce assets per la pagina • condivide le informazioni • favorisce la coerenza • condivide le soluzioni scelte • offre un ambiente per i test
- 22. #CSSDAY - Faenza 2017 @Violo - extrategy Come creo una buona Pattern Library • pensando all’applicazione in modo modulare e a componenti • sfruttando gli approcci di Atomic Design, BEM e OOCSS 22
- 23. #CSSDAY - Faenza 2017 @Violo - extrategy23 Applicazione modulare
- 24. #CSSDAY - Faenza 2017 @Violo - extrategy24 Atomic Design: atomi, molecole e organismi
- 25. #CSSDAY - Faenza 2017 @Violo - extrategy25 BEM
- 26. #CSSDAY - Faenza 2017 @Violo - extrategy26 OOCSS
- 27. #CSSDAY - Faenza 2017 @Violo - extrategy27 OOCSS
- 28. #CSSDAY - Faenza 2017 @Violo - extrategy I Layout 28
- 29. #CSSDAY - Faenza 2017 @Violo - extrategy Come miglioro la gestione dei layout • permettendo a tutto il team di impostarli in autonomia • utilizzando layout annidabili • ricavando il contenuto scrollabile in modo automatico 29
- 30. #CSSDAY - Faenza 2017 @Violo - extrategy30
- 31. #CSSDAY - Faenza 2017 @Violo - extrategy31
- 32. #CSSDAY - Faenza 2017 @Violo - extrategy32
- 33. #CSSDAY - Faenza 2017 @Violo - extrategy33 Layout annidabili
- 34. #CSSDAY - Faenza 2017 @Violo - extrategy34 Layout annidabili
- 35. #CSSDAY - Faenza 2017 @Violo - extrategy35
- 36. #CSSDAY - Faenza 2017 @Violo - extrategy36 Contenuto scrollabile ricavato automaticamente
- 37. #CSSDAY - Faenza 2017 @Violo - extrategy37 Contenuto scrollabile ricavato automaticamente
- 38. #CSSDAY - Faenza 2017 @Violo - extrategy38 Contenuto scrollabile ricavato automaticamente
- 39. #CSSDAY - Faenza 2017 @Violo - extrategy La chiarezza terminologica e un vocabolario comune è alla base della buona comunicazione La condivisione delle informazioni a tutte le figure professionali del team riduce i colli di bottiglia e gli sprechi di tempo Le scelte di un bravo interface developer può fare la differenza nella manutenibilità dell’interfaccia 39
- 40. #CSSDAY - Faenza 2017 @Violo - extrategy Thanks! 40 @Violo github.com/Violo extrategy.net/it/alessandro-violini