SlideShare a Scribd company logo
Linee guida di design per i servizi web delle PA
PIANO NAZIONALE SCUOLA DIGITALE – CASERTA 25-27 NOVEMBRE 2016
MARCO MILESI
I N C O L L A B O R A Z I O N E C O N
Linee Guida
Le linee guida di design nascono per semplificare l’accesso
alle informazioni e ai servizi di carattere istituzionale.
Rappresentano uno strumento finalizzato a favorire il dialogo
tra PA e cittadini che ha l’obiettivo di garantire agli utenti
un’esperienza web chiara, semplice e intuitiva.
2017http://design.italia.it/
La redazione delle linee guida si fonda sulla
collaborazione attiva di tutti i partecipanti.
Design.italia.it
Colori a tinta unita
Impatto chiaro
Tenenza a mettere in evidenza contenuti
Design «RESPONSIVE» che si adatta a ogni schermo
«No frills»
Considerazioni
Occorre creare un progetto ex novo ogni volta? NO!
Come usare le linee guida?
Cosa è un CMS?
In informatica un content
management system è un
strumento software,
installato su un server web,
il cui compito è facilitare la
gestione dei contenuti di siti
web svincolando chi amministra
il sito da conoscenze tecniche
specifiche di programmazione
Web.
Cosa è un CMS?
Un «qualcosa» che consente
di separare contenuto e presentazione
Cosa è un CMS?
Un «qualcosa» che consente
di separare contenuto e presentazione
Creare un modello grafico:
- disponibile senza vincoli
- disponibile per i maggiori CMS
TAPPE
Analisi dello stato dell’arte dei siti e dei servizi delle scuole
primarie e secondarie
Analisi dell’architettura dell’informazione
Sviluppo di un tema base
WordPress
Il CMS più usato al mondo!
Navigazione gerarchica
Navigazione gerarchica
To be continued…
Dove sviluppare in modo collaborativo?
https://github.com/italia-it/designer.italia.it
Let’s start the game!
HACKATHON PNSD CASERTA 25/27 NOVEMBRE 2016

More Related Content

Viewers also liked

UN CMS PER LA SCUOLA: PLONE
UN CMS PER LA SCUOLA: PLONEUN CMS PER LA SCUOLA: PLONE
UN CMS PER LA SCUOLA: PLONE
Fabrizio Rota
 
Un CMS per la scuola - Wordpress
Un CMS per la scuola - WordpressUn CMS per la scuola - Wordpress
Un CMS per la scuola - WordpressRenata Durighello
 
Moduli google
Moduli googleModuli google
Moduli google
nicolinoingenito
 
Open doors online
Open doors onlineOpen doors online
Open doors online
Alberto Ardizzone
 
WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...
WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...
WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...
Marco Milesi
 
Siti scolastici: alcune indicazioni
Siti scolastici: alcune indicazioniSiti scolastici: alcune indicazioni
Siti scolastici: alcune indicazioni
Alberto Ardizzone
 
Chatbot per la modulistica con indoona - #Gasw2016
Chatbot per la modulistica con indoona - #Gasw2016Chatbot per la modulistica con indoona - #Gasw2016
Chatbot per la modulistica con indoona - #Gasw2016
Marco Milesi
 
Un cms per la scuola
Un cms per la scuolaUn cms per la scuola
Un cms per la scuola
Renata Durighello
 
Come realizzare siti scolastici a norma e che funzionino?
Come realizzare siti scolastici a norma e che funzionino?Come realizzare siti scolastici a norma e che funzionino?
Come realizzare siti scolastici a norma e che funzionino?
Alberto Ardizzone
 

Viewers also liked (9)

UN CMS PER LA SCUOLA: PLONE
UN CMS PER LA SCUOLA: PLONEUN CMS PER LA SCUOLA: PLONE
UN CMS PER LA SCUOLA: PLONE
 
Un CMS per la scuola - Wordpress
Un CMS per la scuola - WordpressUn CMS per la scuola - Wordpress
Un CMS per la scuola - Wordpress
 
Moduli google
Moduli googleModuli google
Moduli google
 
Open doors online
Open doors onlineOpen doors online
Open doors online
 
WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...
WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...
WordPress per siti scolastici a norma: motori di ricerca, utenti e gestione g...
 
Siti scolastici: alcune indicazioni
Siti scolastici: alcune indicazioniSiti scolastici: alcune indicazioni
Siti scolastici: alcune indicazioni
 
Chatbot per la modulistica con indoona - #Gasw2016
Chatbot per la modulistica con indoona - #Gasw2016Chatbot per la modulistica con indoona - #Gasw2016
Chatbot per la modulistica con indoona - #Gasw2016
 
Un cms per la scuola
Un cms per la scuolaUn cms per la scuola
Un cms per la scuola
 
Come realizzare siti scolastici a norma e che funzionino?
Come realizzare siti scolastici a norma e che funzionino?Come realizzare siti scolastici a norma e che funzionino?
Come realizzare siti scolastici a norma e che funzionino?
 

Similar to Hackathon Caserta - 25/27 novembre 2016

Un design system allineato alle best practice internazionali, aperto ai contr...
Un design system allineato alle best practice internazionali, aperto ai contr...Un design system allineato alle best practice internazionali, aperto ai contr...
Un design system allineato alle best practice internazionali, aperto ai contr...
Team per la Trasformazione Digitale
 
Principi di usabilità 2.0 nel Web Design for Hospitality
Principi di usabilità 2.0 nel Web Design for HospitalityPrincipi di usabilità 2.0 nel Web Design for Hospitality
Principi di usabilità 2.0 nel Web Design for Hospitality
Valentina Iannaco
 
I siti dei comuni italiani - Designers Italia
I siti dei comuni italiani - Designers ItaliaI siti dei comuni italiani - Designers Italia
I siti dei comuni italiani - Designers Italia
Team per la Trasformazione Digitale
 
Presentazione Estensa
Presentazione EstensaPresentazione Estensa
Presentazione Estensa
Estensa Srl
 
BBJ Media Agency
BBJ Media AgencyBBJ Media Agency
BBJ Media Agency
guestde5725
 
Barcamp Camera: Proposta di Task Force per il Service Design per la PA
Barcamp Camera: Proposta di Task Force per il Service Design per la PABarcamp Camera: Proposta di Task Force per il Service Design per la PA
Barcamp Camera: Proposta di Task Force per il Service Design per la PA
Alessandro Nasini
 
The Webbetter Framework
The Webbetter FrameworkThe Webbetter Framework
The Webbetter Framework
Silvia Podestà
 
Brochure magellano
Brochure magellanoBrochure magellano
Brochure magellano
Lab13 srl
 
Libro Web Usability
Libro Web UsabilityLibro Web Usability
Libro Web Usability
Jacopo Pasquini
 
Presentazione clikka
Presentazione clikkaPresentazione clikka
Presentazione clikka
Clikkapuntocom
 
Clikka!Com - The Web Company
Clikka!Com - The Web CompanyClikka!Com - The Web Company
Clikka!Com - The Web CompanyClikka Punto Com
 
Clikka - the web company (SEM)
Clikka - the web company (SEM)Clikka - the web company (SEM)
Clikka - the web company (SEM)
Clikkapuntocom
 
Smau Firenze 2014 - Strategie per la progettazione web: i clienti vogliono i...
Smau Firenze 2014 -  Strategie per la progettazione web: i clienti vogliono i...Smau Firenze 2014 -  Strategie per la progettazione web: i clienti vogliono i...
Smau Firenze 2014 - Strategie per la progettazione web: i clienti vogliono i...SMAU
 
L'esperienza di progettare esperienze utente
L'esperienza di progettare esperienze utenteL'esperienza di progettare esperienze utente
L'esperienza di progettare esperienze utente
Sketchin
 
Presentazione Gruppo 36
Presentazione Gruppo 36Presentazione Gruppo 36
Dnn Evoq per le aziende
Dnn Evoq per le aziendeDnn Evoq per le aziende
Dnn Evoq per le aziende
Claudio Venturoli
 
Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18
Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18
Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18
FMX - Florence Marketing eXperience
 
User Experience ROI
User Experience ROIUser Experience ROI
User Experience ROI
Luca Mascaro
 
User Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush MarathonUser Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush Marathon
Marco Micheli
 
Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011allo75
 

Similar to Hackathon Caserta - 25/27 novembre 2016 (20)

Un design system allineato alle best practice internazionali, aperto ai contr...
Un design system allineato alle best practice internazionali, aperto ai contr...Un design system allineato alle best practice internazionali, aperto ai contr...
Un design system allineato alle best practice internazionali, aperto ai contr...
 
Principi di usabilità 2.0 nel Web Design for Hospitality
Principi di usabilità 2.0 nel Web Design for HospitalityPrincipi di usabilità 2.0 nel Web Design for Hospitality
Principi di usabilità 2.0 nel Web Design for Hospitality
 
I siti dei comuni italiani - Designers Italia
I siti dei comuni italiani - Designers ItaliaI siti dei comuni italiani - Designers Italia
I siti dei comuni italiani - Designers Italia
 
Presentazione Estensa
Presentazione EstensaPresentazione Estensa
Presentazione Estensa
 
BBJ Media Agency
BBJ Media AgencyBBJ Media Agency
BBJ Media Agency
 
Barcamp Camera: Proposta di Task Force per il Service Design per la PA
Barcamp Camera: Proposta di Task Force per il Service Design per la PABarcamp Camera: Proposta di Task Force per il Service Design per la PA
Barcamp Camera: Proposta di Task Force per il Service Design per la PA
 
The Webbetter Framework
The Webbetter FrameworkThe Webbetter Framework
The Webbetter Framework
 
Brochure magellano
Brochure magellanoBrochure magellano
Brochure magellano
 
Libro Web Usability
Libro Web UsabilityLibro Web Usability
Libro Web Usability
 
Presentazione clikka
Presentazione clikkaPresentazione clikka
Presentazione clikka
 
Clikka!Com - The Web Company
Clikka!Com - The Web CompanyClikka!Com - The Web Company
Clikka!Com - The Web Company
 
Clikka - the web company (SEM)
Clikka - the web company (SEM)Clikka - the web company (SEM)
Clikka - the web company (SEM)
 
Smau Firenze 2014 - Strategie per la progettazione web: i clienti vogliono i...
Smau Firenze 2014 -  Strategie per la progettazione web: i clienti vogliono i...Smau Firenze 2014 -  Strategie per la progettazione web: i clienti vogliono i...
Smau Firenze 2014 - Strategie per la progettazione web: i clienti vogliono i...
 
L'esperienza di progettare esperienze utente
L'esperienza di progettare esperienze utenteL'esperienza di progettare esperienze utente
L'esperienza di progettare esperienze utente
 
Presentazione Gruppo 36
Presentazione Gruppo 36Presentazione Gruppo 36
Presentazione Gruppo 36
 
Dnn Evoq per le aziende
Dnn Evoq per le aziendeDnn Evoq per le aziende
Dnn Evoq per le aziende
 
Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18
Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18
Dal marketing digitale alla UX (e viceversa) - Antonio Paolo - #FMX18
 
User Experience ROI
User Experience ROIUser Experience ROI
User Experience ROI
 
User Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush MarathonUser Experience & Web Analytics - VIII SEMrush Marathon
User Experience & Web Analytics - VIII SEMrush Marathon
 
Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011Php.to.start indigenidigitali-11072011
Php.to.start indigenidigitali-11072011
 

More from Marco Milesi

WordPress per siti scolastici a norma: dominio, hosting e strumenti
WordPress per siti scolastici a norma: dominio, hosting e strumentiWordPress per siti scolastici a norma: dominio, hosting e strumenti
WordPress per siti scolastici a norma: dominio, hosting e strumenti
Marco Milesi
 
WordPress per siti scolastici a norma
WordPress per siti scolastici a normaWordPress per siti scolastici a norma
WordPress per siti scolastici a norma
Marco Milesi
 
WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...
WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...
WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...
Marco Milesi
 
Giornata Aperta sul Web 2015 - WordPress
Giornata Aperta sul Web 2015 - WordPressGiornata Aperta sul Web 2015 - WordPress
Giornata Aperta sul Web 2015 - WordPress
Marco Milesi
 
WordPress per le PA - Monza 27.05.2015
WordPress per le PA - Monza 27.05.2015WordPress per le PA - Monza 27.05.2015
WordPress per le PA - Monza 27.05.2015
Marco Milesi
 
Pasw2015 a SMAU MILANO 2014
Pasw2015 a SMAU MILANO 2014Pasw2015 a SMAU MILANO 2014
Pasw2015 a SMAU MILANO 2014
Marco Milesi
 

More from Marco Milesi (7)

WordPress per siti scolastici a norma: dominio, hosting e strumenti
WordPress per siti scolastici a norma: dominio, hosting e strumentiWordPress per siti scolastici a norma: dominio, hosting e strumenti
WordPress per siti scolastici a norma: dominio, hosting e strumenti
 
WordPress per siti scolastici a norma
WordPress per siti scolastici a normaWordPress per siti scolastici a norma
WordPress per siti scolastici a norma
 
WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...
WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...
WordPress, un CMS per la scuola: novità e sviluppi - Porte Aperte sul Web a S...
 
Giornata Aperta sul Web 2015 - WordPress
Giornata Aperta sul Web 2015 - WordPressGiornata Aperta sul Web 2015 - WordPress
Giornata Aperta sul Web 2015 - WordPress
 
WordPress per le PA - Monza 27.05.2015
WordPress per le PA - Monza 27.05.2015WordPress per le PA - Monza 27.05.2015
WordPress per le PA - Monza 27.05.2015
 
Pasw2015 a SMAU MILANO 2014
Pasw2015 a SMAU MILANO 2014Pasw2015 a SMAU MILANO 2014
Pasw2015 a SMAU MILANO 2014
 
Iwa smau13 mm
Iwa smau13 mmIwa smau13 mm
Iwa smau13 mm
 

Hackathon Caserta - 25/27 novembre 2016

  • 1. Linee guida di design per i servizi web delle PA PIANO NAZIONALE SCUOLA DIGITALE – CASERTA 25-27 NOVEMBRE 2016 MARCO MILESI I N C O L L A B O R A Z I O N E C O N
  • 2. Linee Guida Le linee guida di design nascono per semplificare l’accesso alle informazioni e ai servizi di carattere istituzionale. Rappresentano uno strumento finalizzato a favorire il dialogo tra PA e cittadini che ha l’obiettivo di garantire agli utenti un’esperienza web chiara, semplice e intuitiva. 2017http://design.italia.it/ La redazione delle linee guida si fonda sulla collaborazione attiva di tutti i partecipanti.
  • 4.
  • 5.
  • 6. Colori a tinta unita Impatto chiaro Tenenza a mettere in evidenza contenuti Design «RESPONSIVE» che si adatta a ogni schermo «No frills» Considerazioni
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. Occorre creare un progetto ex novo ogni volta? NO! Come usare le linee guida?
  • 12. Cosa è un CMS? In informatica un content management system è un strumento software, installato su un server web, il cui compito è facilitare la gestione dei contenuti di siti web svincolando chi amministra il sito da conoscenze tecniche specifiche di programmazione Web.
  • 13. Cosa è un CMS? Un «qualcosa» che consente di separare contenuto e presentazione
  • 14. Cosa è un CMS? Un «qualcosa» che consente di separare contenuto e presentazione
  • 15. Creare un modello grafico: - disponibile senza vincoli - disponibile per i maggiori CMS
  • 16. TAPPE Analisi dello stato dell’arte dei siti e dei servizi delle scuole primarie e secondarie Analisi dell’architettura dell’informazione Sviluppo di un tema base
  • 17. WordPress Il CMS più usato al mondo!
  • 18.
  • 19.
  • 20.
  • 21.
  • 25. Dove sviluppare in modo collaborativo? https://github.com/italia-it/designer.italia.it
  • 26. Let’s start the game! HACKATHON PNSD CASERTA 25/27 NOVEMBRE 2016