Regione Puglia Manuale d'identità web - Guida alla realizzazione dei portali federati della Regione Puglia Versione 3.5
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Regione Puglia Manuale d’identità web Guida alla realizzazione dei portali federati della Regione Puglia Versione 3.5
Struttura speciale 'Comunicazione Istituzionale' Manuale d’identità web Guida alla realizzazione dei portali federati della Regione Puglia Adattamento alle “Linee guida per il design dei servizi digitali della Pubblica Amministrazione” Versione 3.5 febbraio 2020 AgID e Team Digitale CC-BY 3.0 - Agenzia per l’Italia Digitale Team di lavoro Antonella Bisceglia Fabio Di Fonte Luigi Scavelli Marcello Marangio Consulenza e redazione Indra
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
INDICE
2 Introduzione 30 Contenuti web
3 Impostazione progettuale 30 Modelli di pagina e content type
31 Notizia
4 Identità web 32 Bando
4 Logo della Regione 33 Lista di informazioni
5 Leggibilità del logo 34 Pagina descrittiva
6 Convivenza dei loghi 35 Link utili
7 Uso del logo 36 Scheda persona
8 Logo sulle immagini 37 Scheda ufficio/ente e
9 Typekit scheda personale interno
38 Evento
10 I colori 39 Scheda servizio
10 Ispirazione 40 Bottoni bianchi e grigi
11 Differenziare i portali tematici 40 Scheda box grigio (contatti e informazioni)
40 Widget di Contenuto generico
14 UI kit 41 Heroimage con ricerca
16 Icone e simboli 41 Copertina
15 Bottoni e form 42 Aggregatore notizie o bandi
16 Tag
43 Identità verbale
17 Portale della Regione Puglia 43 Tono di voce
17 Livello 1 44 Linguaggio
18 Struttura della homepage
19 Griglia 45 Social Media Policy
20 Header e menu 45 Social Media Policy interna ed esterna
21 Footer 46 Social Media Policy - Moderazione
22 Portale Tematico
22 Livello 2
23 Struttura della pagina
24 Griglia
25 Header, corpo e footer
26 Sezioni Tematiche
26 Livello 3
27 Struttura e griglia
28 Header, corpo e footer
29 Sito di progetto
29 Livello 4
1
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
INTRODUZIONE
Migliorare l’esperienza delle perso- Livelli
ne sul portale regionale e offrire al
pubblico un canale di comunicazione La nuova rete di portali della Regione
tempestivo, semplice e inclusivo. Puglia è stata strutturata su 4 livelli,
Nasce con questi obiettivi il nuovo ognuno dei quali funziona da hub per il
portale della Regione Puglia, canale livello sottostante.
istituzionale delle opportunità – bandi,
Il livello 1, il Portale istituzionale
avvisi pubblici, finanziamenti – e della
della Regione Puglia, è l’hub centrale
vita amministrativa – atti, determine e
di tutta la rete. Di qui è possibile
delibere – dell’ente. Un design aggior-
arrivare ovunque, e da qualsiasi livello
nato secondo gli ultimi standard del
successivo deve essere possibile
web, un linguaggio meno burocratico
tornare al livello 1.
e un’organizzazione dei contenuti più
vicina alle abitudini d’uso e ricerca Il livello 2 è costituito dai portali
degli utenti, per accorciare le distanze tematici. Al momento sono 12 e
fra l’ente e i destinatari delle politiche ognuno rappresenta un'area tematica.
e degli interventi regionali: persone, L'organizzazione per macroargomenti,
imprese, startup, enti del terzo settore e non per dipartimenti, facilita la
e pubbliche amministrazioni. ricerca di contenuti, programmi e
servizi.
La progettazione del nuovo portale se-
gue le linee guida di design per i servizi Al livello 3 appartengono sezioni,
digitali delle PA. Il documento predi- siti e portali di programmi specifici,
sposto dall'Agenzia per l’Italia Digitale regionali ed europei, accessibili
(AGID) contiene “un sistema condiviso dai portali di livello 2 (nello
di riferimenti progettuali e visivi relativi schema:sezione tematica o sito
al design dei siti e dei servizi dalla Pub- tematico).
blica amministrazione”. Il focus è il cit-
Al livello 4 appartengono i siti di
tadino al centro: ribalta l’impostazione
progetto che promuovono specifiche
ente-centrica per favorire la semplicità
iniziative (es: PIN, NIDI, Taste and
d’uso, l’inclusività del linguaggio e la
tour). Si accede dai portali di livello 3
trovabilità dei contenuti.
o dai portali di livello 2.
Livello1
Portale della Regione Puglia
Servizi Press Regione Amministrazione trasparente
Catalogo dei servizi BURP
Newsletter
Livello 2
12 Portali tematici
Agenda
...
Livello 3 Livello 3
Sito tematico Sezione tematica
Livello 4 Livello 4
Sito di progetto Sito di progetto
2
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
INTRODUZIONE
Impostazione progettuale
Presentazione del manuale I modelli di pagina presentati nel ma-
nuale valgono come linea guida per la
Questo manuale è il supporto operati- realizzazione delle pagine dei portali di
vo per i soggetti coinvolti nelle attività livello 2 e 3. È consigliato l'utilizzo delle
di comunicazione della Regione Puglia. componenti nelle diverse combinazio-
ni per meglio rispondere agli obiettivi
Queste linee guida sono state elabora-
di comunicazione.
te per realizzare il portale istituzionale
della Regione Puglia e i suoi portali
L’interfaccia utente è l’insieme dei co-
federati, e per facilitare la diffusione
siddetti touch point. Non solo elementi
delle regole per l’utilizzo del brand
grafici e visuali, ma tutto ciò con cui
Regione.
l’utente entra in relazione usando un
Il manuale nel suo complesso risponde servizio o un prodotto digitale.
agli obiettivi di:
Lo scopo primario dell’interfaccia è
> Uniformare la comunicazione inter- quello di aiutare l’utente a raggiun-
na ed esterna della Regione Puglia, gere ciò che cerca in modo naturale
basandola su un’immagine unitaria, e veloce. Per agevolare la riconosci-
facilmente identificabile e riconduci- bilità dei contenuti e delle strutture
bile all'Ente. e facilitare l’esperienza utente, sono
stati creati degli standard visuali e
> Guidare lo stile di comunicazione,
di comportamento. Questi standard
attraverso l’introduzione di linee guida
possono evolvere in base ai feedback
operative per tutte le esigenze di
diretti degli utenti e i dati sull'uso del
comunicazione.
portale provenienti dagli strumenti di
> Condividere le suddette linee guida analytics.
attraverso una fonte ufficiale, il ma-
nuale, che tutti gli addetti ai lavori, A differenza dei modelli, lo stile è
interni ed esterni all’ente, possono trasversale a tutti i componenti di una
consultare. interfaccia, non dovrebbe cambiare
troppo frequentemente per non dan-
neggiare la riconoscibilità ed evitare
Di seguito vengono descritti l'interfac- un'eccessiva distanza stilistica tra
cia utente (modelli di pagina, UI kit ed prodotti web nati a distanza di tempo.
elementi di stile), i content type e le
linee guida per la scrittura. In questo manuale vengono presentati
anche griglia, palette colori, caratteri,
I content type sono le strutture dati spaziature ideali ed effetti di hover.
che definiscono un oggetto informa-
tivo (vedi pagina 30). Costituiscono Nella progettazione è inclusiva: tiene
la base di analisi su cui sono stati conto della possibilità di disabilità
progettati i componenti del Portale fisiche e difficoltà a relazionarsi con la
istituzionale (livello 1) che vengono tecnologia, che possono influenzare
variamente assemblati per creare le l'accessibilità alle informazioni.
pagine dei portali di livello 1 e 2.
3
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
IDENTITÀ WEB
Logo della Regione Il logo usato è quello presentato i sei pallini (uno per ogni provincia
nel Manuale dell’identità visiva pugliese), l’ottagono di Castel del
della Regione Puglia del 2013. Sono Monte, l’ulivo, simbolo di pace e
di seguito riportate le indicazioni fratellanza.
generali per l’uso dello stemma.
Il font ufficiale utilizzato, per il logo
Gli elementi dello stemma regionale istituzionale e le sue declinazioni nei
sono: la corona federiciana e lo scudo, portali federati, è il Barlow.
Logo web
Logo con logotipo
riproporzionato per aumentare
la leggibilità sul web.
Corona
La corona è stata ridisegnata
corona ricca di dettagli corona semplice, regolare
per uniformare le numerose
e irregolare e monocromatica
versioni presenti online.
Logo originale Variante web
Colori del logo #0c8bca #fabc07 #38474f #1d1a1f
colore neutro colore neutro
#049048 #e0071b
nuovo originale
#ededed
4
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
IDENTITÀ WEB
Leggibilità del logo Per favorire la massima leggibilità I margini minimi da lasciare intorno
del logo in tutti i contesti, sono state al logo, affinché non venga percepito
effettuate delle prove di riduzione e compresso, sono pari alla distanza tra
stabilite delle regole di uso. Sotto i 100 pittogramma e logotipo.
px è consigliabile utilizzare il logo meno In generale è preferibile l'uso del
dettagliato, sia monocromatico che a logo a colori ma su fondi colorati, o
colori. in condizioni di scarsa leggibilità, è
corretto l'uso del logo monocromatico.
Riduzione
Sotto i 100 px dovrebbe essere
usata una versione alleggerita
del logo.
Eccessivi dettagli ne
compromettono la corretta
visione. >100 px >100 px
x
Margini minimi
Lo spazio tra pittogramma e
logotipo è proporzionale alla
dimensione del logo. x
Il margine da lasciare intorno al
logo è sempre uguale a questa
distanza. x
Esempi di leggibilità
Massima leggibilità del logo
monocromatico su fondi a
contrasto massimo.
Massima leggibilità del logo su
fondi a contrasto medio.
5
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
IDENTITÀ WEB
Convivenza dei loghi Il logo potrebbe essere usato, sia In particolare, in caso di più
online sia offline, accanto ad altri loghi loghi contigui è opportuno che
come quello dell'Unione Europea e siano concordi nel colore e
della Repubblica Italiana. nell'orientamento (verticale o
Anche nell'accostamento ad altri loghi orizzontale) per uniformare il peso
i temi della leggibilità e dell'armonia (quantità di nero) e la leggibilità.
visiva sono centrali.
Regole di convivenza
con altri loghi
UNIONE
EUROPEA
UNIONE
EUROPEA
Orientamento preferibile
per i formati molto piccoli
UNIONE EUROPEA
Favicon
Favicon Favicon
6
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
IDENTITÀ WEB
Uso del logo Proporzioni e simmetrie forma globale come inclinazioni
e deformazioni in verticale e in
In entrambe le varianti la posizione orizzontale.
del pittogramma rispetto al logotipo è
stata stabilita partendo da una misura Sono sconsigliate anche alterazioni
fissa del logo. della posizione del pittogramma
rispetto al logotipo o la variazione
La distanza tra le parti del logo è essa delle proporzioni precedentemente
stessa parte del progetto del logo e indicate.
non deve essere in alcun caso variata.
Infine, è da evitare l’uso di colori non
Regole generali per l’uso del logo ufficiali o l’uso di colori ufficiali in
modo differente da quello indicato
Il logo deve essere sempre usato nelle
nella guida colori.
varianti fornite.
Sono da evitare le alterazioni della
SI
NO
Alterazioni della
forma globale:
inclinare, strecciare
(allargare o
comprimere).
Alterazioni delle
proporzioni e
della posizione del
pittogramma:
eliminare, ingrandire
o spostare il
pittogramma.
Alterazioni nell’uso
dei colori.
7
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
IDENTITÀ WEB
Logo sulle immagini Logo sulle immagini
Quando si sovrappone il logo a Attenzione alla vibrazione dei
un’immagine è importante verificare la colori. Spesso, se il logo a colori
leggibilità e l’armonia cromatica con il è sovrapposto a un’immagine con
fondo. In generale il bianco è il colore dominante complementare, si ha un
con la migliore resa sulle immagini, effetto di vibrazione dei bordi.
soprattutto se queste hanno un filtro
che riduce i contrasti.
SI NO
Posizionare il logo preferibilmente in
parti dell’immagine che garantiscano
un buon contrasto.
Usare filtri scuri sull'immagine per
garantire la visibilità del logo.
Non sovrapporre logo e testi su
elementi testuali già presenti
sull'immagine.
8REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
IDENTITÀ WEB
I caratteri
Typekit Allineamento del testo
Per il Portale istituzionale e i portali (consigliato da AgID)
federati sono stati scelti due caratteri
(google font): Il paragrafo di testo deve essere
• il Barlow per i titoli; composto con allineamento a sinistra
• il Titillium web per i testi. e non deve mai superare i 75 caratteri
(spazi inclusi) per rigo.
La gerarchia visiva individuata per
desktop e mobile, intesa come uso L’allineamento giustificato
della scala tipografica, garantisce e senza sillabazione è sempre da
agganci visivi nella pagina stimolando evitare per l’incongrua spaziatura delle
l’attenzione, facilitando la lettura e di parole e la minore leggibilità che
conseguenza l’accesso alle informa- comporta.
zioni.
Desktop Mobile
h1 Titoli principali h1 Titoli principali
Aa
Barlow 24 px Barlow 20 px
line-height: 30 px line-height: 28 px
font weight: Bold 700 font weight: Bold 700
color: #01283A color: #01283A
ABCDEFGHILMNOPQRSTUWVYZ
abcdefghilmnopqrstuwvyz’?”!(%)
[#]/\+=-_@£€:.; h2 Titoli secondari h2 Titoli secondari
0123456789 Barlow 21 px Barlow 18 px
line-height: 27 px line-height: 24 px
font weight: Semibold 600 font weight: Semibold 600
color: #01283A color: #01283A
h3 Titoli sezioni h3 Titoli sezioni
Barlow 18 px Barlow 16 px
line-height: 24 px line-height: 24 px
font weight: Semibold 600 font weight: Semibold 600
color: #01283A color: #01283A
Testo base Testo base
Aa
Titillium Web 16 px Titillium Web 16 px
line-height: 24 px line-height: 21 px
font weight: Regular 400 font weight: Regular 400
color: #000 color: #000
ABCDEFGHILMNOPQRSTUWVYZ
abcdefghilmnopqrstuwvyz’?”!(%) date gg/mm/aaaa date gg/mm/aaaa
[#]/\+=-_@£€:.; Titillium Web 14 px line-height: 21 px Titillium Web 14 px
font weight: light 300 line-height:21 px
0123456789
color: #000 font weight: light 300
color: #000
Testi card ed elenchi Testi card ed elenchi
Titillium Web 16 px Titillium Web 14 px
line-height: 24 px line-height: 21 px
font weight: Semibold 600 font weight: Semibold 600
color: #000 color: #000
LINK CARD -> LINK CARD ->
Titillium Web 14 px Titillium Web 12 px
line-height: 21 px line-height: 16 px
font weight: Bold 700 font weight: Bold 700
color: #000 color: #000
9REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
I COLORI
Ispirazione La scelta dei colori è basata sull’analisi Le immagini di contesto si demateria-
del materiale identitario presente nel lizzano in pixel che compongono una
Manuale di identità visiva della Regio- tavolozza di colori.
ne Puglia del 2013.
Da questo nucleo è stato estratto un
Tutte le tematiche e le politiche sono colore rappresentativo per ogni area
rappresentate partendo dalle sugge- tematica. I colori selezionati sono
stioni paesaggistiche e culturali della stati armonizzati tra loro grazie a un
Regione Puglia. equilibrio di saturazione, un legame di
complementarietà e analogia.
10REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
I COLORI 1/3
Differenziare
i portali tematici Colori web per il Portale istituzionale anche colori con una Contrast Ratio
e per i portali federati pari o superiore a 4,5:1.
Per garantire la massima leggibilità Ai colori di base (esplicitati in
sono state individuate delle palette esadecimale) si affiancano i neutri:
monocromatiche per ciascuna area il grigio per gli sfondi #F2F2F2;
tematica, sfumando le tonalità verso il il blu #00293b, colore secondario di
colore bianco e il colore blu. tutti i portali federati.
Per garantire un rapporto di contrasto Il Portale istituzionale, in virtù della
minimo con lo sfondo (soprattutto in sua funzione di raccordo, è progettato
ragione dell’uso di questi colori per il con colori neutri per accogliere e
testo) ciascuna palette contiene, oltre rappresentare le identità delle varie
il colore principale dell’area tematica, aree tematiche.
Istituzionale Turismo Politiche europee
e partecipazione e cultura e cooperazione internazionale
#029FE8 #0075BF #004286
Agricoltura Territorio, paesaggio Ambiente, energia
e infrastrutture e rifiuti
#839536 #418A7B #79B55B
Salute, sport Welfare, diritti Lavoro
e buona vita e cittadinanza e formazione
#BE6D75 #981432 #EF3125
Politiche Competitività Pari
Giovanili e innovazione opportunità
#EF5A30 #FF8000 #C81D67
11REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
I COLORI 2/3
DIFFERENZIARE
I PORTALI TEMATICI
ISTITUZIONALE TURISMO
E PARTECIPAZIONE E CULTURA
Colore principale #029FE8 Colore principale #0075BF
C 74 M 24 Y0 K0 C 85 M 47 Y0 K0
R2 G 159 B 232 R0 G 117 B 191
Il celeste prescelto riprende Il colore utilizzato per questa
visivamente i colori contenuti area tematica è in linea con
nel logo della Regione e quelli quello utilizzato dall’Agenzia di
storicamente utilizzati per la Promozione del Turismo Regionale.
comunicazione istituzionale. La suggestione che ispira il
Il colore ricorda inoltre le lunghe colore richiama il mare, uno tra
fasce costiere e l’azzurro dei cieli gli elementi paesaggistici più
del tacco italiano. caratterizzanti.
POLITICHE EUROPEE TERRITORIO, PAESAGGIO
E COOPERAZIONE INTERNAZIONALE E INFRASTRUTTURE
Colore principale #004286 Colore principale #418A7B
C 74 M 24 Y0 K0 C 74 M 26 Y 54 K9
R2 G 159 B 232 R 65 G 138 B 123
La tonalità scelta richiama il campo Il colore prescelto nasce
blu della bandiera dell’Europa. dall’associazione visiva con la
Il colore conduce l’osservatore a flora del territorio pugliese.
un'associazione diretta tra l’area Sottobosco, macchia mediterranea
tematica e i contenuti comunicati. e fico d’india sono le suggestioni
di partenza per raffigurare la
suddetta area tematica.
AGRICOLTURA AMBIENTE, ENERGIA
E RIFIUTI
Colore principale #839536 Colore principale #79B55B
C 54 M 25 Y 93 K9 C 59 M5 Y 79 K0
R 131 G 149 B 54 R 121 G 181 B 91
Le tonalità prescelte traggono La tonalità di verde prescelto,
origine principalmente dalle varietà come somma di giallo e blu,
di cultivar presenti sul territorio si interpone armoniosamente
pugliese. I colori virano toccando tra i due colori. Induce calma,
tonalità neutre o più intense, equilibrio, freschezza e speranza
richiamando tutti i prodotti per raffigurare un’area tematica
sapientemente coltivati nell’agro. sensibile e dinamica.
12REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
I COLORI 3/3
DIFFERENZIARE
I PORTALI TEMATICI
SALUTE, SPORT WELFARE, DIRITTI
E BUONA VITA E CITTADINANZA
Colore principale #BE6D75 Colore principale #981432
C 21 M 64 Y 40 K9 C 26 M 100 Y 68 K 26
R 190 G 109 B 117 R 152 G 20 B 50
Il colore prescelto è quello già La calda tonalità prescelta
utilizzato dal portale Puglia Salute richiama l’involucro dei documenti
e per la comunicazione dei progetti ufficiali di riconoscimento
correlati. L’associazione con (passaporto). L’intento è ricordare
l’universo femminile rende inoltre il al fruitore l’universo istituzionale
gradiente accogliente e familiare. connesso alla cittadinanza, alla
tutela dei diritti civili e delle libertà
fondamentali.
PARI COMPETITIVITÀ
OPPORTUNITÀ E INNOVAZIONE
Colore principale #C81D67 Colore principale #FF8000
C0 M 59 Y 94 K0 C0 M 59 Y 94 K0
R 255 G 128 B 0 R 255 G 128 B 0
Il rosso cremisi è riconosciuto Il colore adottato esprime vitalità
come segno distintivo della ed energia. Il giallo è il colore
comunità LGBTQIA. Simboleggia legato all’intelletto. Luminoso,
solidarietà e viene indossato come suggestivo e stimolante, incentiva
simbolo di orgoglio. la creatività e l’intraprendenza,
Allo stesso modo la Regione Puglia concetti fortemente legati all’area
veste le sue Pari Opportunità di un istituzionale legata all’innovazione
colore pieno di importanza. tecnologica e allo sviluppo
produttivo.
LAVORO POLITICHE
E FORMAZIONE GIOVANILI
Colore principale #EF3125 Colore principale #EF5A30
C0 M 89 Y 85 K0 C0 M 76 Y82 K0
R 239 G 49 B 37 R 239 G 90 B 48
Il colore prescelto e il suo La tonalità prescelta ricorda
gradiente ricordano primariamente le caratteristiche peculiari del
il concetto di energia. L’arancio segmento di utenti a cui è rivolta
utilizzato si ottiene dalla (ambizione, determinazione e
mescolanza di giallo e rosso e ne personalità) e allo stesso tempo
mutua gli effetti. alcuni elementi grafici dei progetti
La presenza nell’area tematica tematici come PIN e Luoghi
genera ottimismo, entusiasmo e Comuni.
voglia di vivere.
13REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
UI KIT
Icone e simboli
L'User Interface Kit (UI kit) è una bottoni danger e success e i messaggi
raccolta di elementi grafici che, oltre di errore di data entry, che aiutano
a definire lo stile visivo del portale, l'utente a comprendere le azioni
ha il compito di orientare e aiutare la possibili e le conseguenze.
comprensione durante la navigazione.
È composto da icone e simboli che L'UI Kit presentato di seguito è una
marcano gli highlights della pagina, da raccolta rappresentativa, ma parziale,
bottoni, input e select che chiamano di questi elementi che vengono
all'azione e poi ci sono elementi, frequentemente aggiornati e forniti
come ad esempio gli effetti di hover, i separatamente.
Simboli e indici
login logout link a sito freccia freccia apri chiudi
esterno destra sinistra accordion accordion
diminuire aumenta domande Informazioni zip csv-xlsm doc pdf
carattere carattere (FAQ)
Link a canale social
youtube twitter facebook linkedin youtube twitter facebook linkedin
footer footer footer footer
Condivisione social
facebook twitter linkedin whatsapp telegram e-mail copia link
Agenzie e società
partecipate
ADISU ARTI ARIF ARESS ARET ARPA ASSET AGER
AREM TPP AFC
Icone
concorsi BURP notizia contatti servizi ricerca in glossario guida
servizi
Albo Amm. normativa Osservat. program. atto Registro cerca
Pretorio trasparente e doc contratti di gov. legge Lobbing persone
accesso organi- Open data data/ orario sito web glossario Puglia
agli atti gramma evento salute
condividi commenta like retweet telefono e-mail PEC APP
14REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
UI kit
Bottoni e form
I bottoni hanno un ruolo fondamentale, Oltre questi sono previsti i bottoni
perché sono il mezzo che definisce secondari (solo outline), success
le azioni da far compiere all'utente. (implica una conferma positiva al
Al suo interno, infatti, ospita percorso effettuato fino ad ora), Info,
preferibilmente una call to action. warning e Danger (sottolineano azioni
con potenziale perdita di informazioni).
Per il Portale istituzionale è stato
scelto un approccio "solido": i tasti I bottoni dei portali tematici si
principali sono pieni in stato di riposo, comportano in maniera analoga, ma
scuri in hover e con ombra al click. adottano di default il colore di area
tematica.
Desktop 20 px 20 px
Titillium Web 16 px Regular
Bianco su fondo colorato
42 px default hover click disattivo
border-radius 4
24 px
Mobile 15 px 15 px
Titillium Web 14 px Regular
Bianco su fondo colorato
35 px default hover click disattivo
border-radius 4
24 px
secondary Success Info Warning Danger
#94c21f #00293b #faba00 #c10512
Bottoni sui portali
di area tematica
Portale tematico Agricoltura
default default
Istituzione e partecipazione
default Turismo e cultura default Ambiente, energia e rifiuti
Politiche europee
default default Territorio e paesaggio
e cooperazione
Competitività e
default default Salute, sport e buona vita
innovazione
default Lavoro e formazione default Welfare, diritti e cittadinanza
default Politiche giovanili default Pari opportunità
Input e select
Titillium Web 16px Regular Immetti testo attivo Seleziona
35 px
border-radius 2
border-width 0.5 px
Immetti testo inattivo Seleziona data
Immetti testo errore Seleziona ora
*Specifica tipo di errore
Radio button Cerca nel sito
Check box
Cerca nel sito
Link nel testo #1a3b47 Link hover #029fe8
15REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
UI KIT
Tag Principi base I vocabolari
La tassonomia progettata per Aree tematiche. Definisce l'ambito del
catalogare i contenuti del portale contenuto.
regionale serve a raggrupparli
Tipologie di notizie. Nella sezione
secondo unità di senso utili per gli
PressRegione definisce il contenuto
utenti.
del Comunicato Stampa.
I principi base sono: Argomenti. Risponde alla domanda
• tag non è sinonimo di parola "Qual è l'oggetto chiave di questo
chiave per i motori di ricerca. contenuto?". Il vocabolario contiene
Inserire più tag per un contenuto temi specifici trattati dalla Regione,
non porta necessariamente es. Ilva, Tap, RED.
benefici al suo posizionanento. Persone. Risponde alla domanda "Quali
Al contrario, l'uso smodato figure istituzionali sono coinvolte in
dei tag può compromettere questo contenuto?". Il vocabolario
l'indicizzazione del sito. contiene i nominativi di Presidente e
• un tag che identifica solo un Assessori.
contenuto è inutile. Il tag funziona Strutture. Risponde alla domanda
e ha senso solo se mette in "Quali strutture amministrative -
relazione più contenuti. dipartimenti, uffici - sono coinvolti
in questo contenuto?". Il vocabolario
contiene l'elenco dei dipartimenti e
delle agenzie.
Tag e categorie
16 px 16 px
Titillium Web 14px Regular
border-radius 18
36 px default 8 px cliccato
8 px
Altri tag Comunicato stampa Nome Cognome RED Dipartimento turismo e cultura
blu #01283A su fondo
grigio #EFEFEF Tipologia di notizia Persone Argomento Strutture
Press Regione
Le regole
1. Il tag è sempre un nome. Da evitare Dev’essere più specifico oppure tra-
l’uso di aggettivi e avverbi. In rari casi sversale a una categoria. Può riferirsi a
è possibile utilizzare un verbo. È al una sottocategoria o a un tema emerso
singolare ed è una sola parola. dopo.
2. Può essere formato da più nomi, ma 7. Non dev’essere troppo specifico.
solo se strettamente necessario a 8. Deve essere potenzialmente riutilizza-
rendere il senso del tag (es: Stato bile per contrassegnare altri conte-
dell’Arte). nuti.
3. Deve fare sempre riferimento al
contenuto dell’articolo, mai a elementi
I consigli
esterni come l’autore, la data o i docu-
menti allegati. Cercare tra i tag esistenti prima di crearne
di nuovi. Aggiornare i tag dei contenuti
4. Può essere un nome proprio solo se è
già pubblicati se emergono tag nuovi (se è
rilevante.
possibile).
5. Ha l’iniziale maiuscola. Se è formato
Lavorare a un vocabolario comune, condi-
da più parole le iniziali sono maiusco-
viso tra i membri della redazione.
le, eventuali articoli, preposizioni e/o
congiunzioni minuscoli.
6. Non deve coincidere con una catego- Il numero di tag può variare in base al
ria già esistente. Non dev’essere un tema del contenuto. Uno-due tag è il nu-
sinonimo di una categoria esistente. mero minimo (anche zero, se necessario),
Non dev’essere una macrocategoria. tra due e cinque il valore consigliato.
16REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE DELLA REGIONE PUGLIA
LIVELLO 1
L’homepage del nuovo portale della Succede in Puglia e Vivi la Puglia.
Regione Puglia è la vetrina delle attività In Succede in Puglia trovano spazio
istituzionali. Nell'area In Primo piano tutte le notizie che mettono in luce i
trovano spazio gli aggiornamenti quo- valori, le potenzialità e i risultati rag-
tidiani sulle opportunità, sulle decisioni giunti: imprese sportive, onorificenze,
della Giunta e sulle campagne di comu- riconoscimenti a pugliesi. La sezione
nicazione in atto. sarà corredata da numeri e infogra-
fiche per raccontare la regione sotto
Il portale è suddiviso in 12 grandi aree diversi punti di vista.
tematiche: una struttura che, alla sud- Vivi la Puglia racchiude eventi, spetta-
divisione amministrativa dei contenuti, coli e le manifestazioni culturali di rilie-
preferisce una logica semantica, di vo che animano i luoghi della cultura, le
ambito. Gli utenti del sito non dovranno strade e le piazze pugliesi.
perciò chiedersi a quale dipartimento
faccia capo un determinato provve- Il portale della Regione Puglia contiene
dimento ma potranno muoversi per le aree trasversali a tutto l'hub regionale:
associazione mentale fra le singole • l'elenco dei dipartimenti, degli
aree tematiche. uffici, dei dirigenti e dei funzionari
regionali;
La struttura del portale istituzionale • il catalogo dei servizi;
della Regione Puglia sostiene una nuo- • l'agenda eventi;
va linea editoriale: raccontare la Puglia • il bollettino ufficiale della Regione
oltre gli aspetti puramente ammini- Puglia (BURP);
strativi. Accanto ai comunicati stampa • la sezione Amministrazione tra-
della redazione giornalistica regionale sparente;
e alle notizie dell’URP, la redazione del • Press Regione, la testata giornali-
portale darà vita a due nuove rubriche: stica ufficiale della Regione Puglia.
17REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12 PORTALE DELLA REGIONE PUGLIA Struttura della homepage Hero image Serve a invogliare l'utente a cercare e dà forza alla value proposition: trovare i contenuti nel sito. In primo piano Mostra le tre notizie più importanti provenienti dalle 12 aree tematiche. Press Regione Mostra le 5 notizie presenti nella pagina di Press Regione, testata giornalistica della Regione Puglia. Agenda È il calendario collegato agli eventi istituzionali. Lateralmente sono riportati i due eventi più prossimi o più rilevanti. Utilità La sezione dal gradiente più chiaro contiene il redirect al BURP, al catalogo dei servizi e alla pagina interna dei link utili. Succede in Puglia Mostra fino a 6 notizie, infografiche con report numerici e best practice pugliesi. Box bianco È la sezione che riporta i collegamenti ai 12 portali tematici di livello 2. Social Wall È la parte dedicata ai social media istituzionali. 18
REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE DELLA REGIONE PUGLIA
Griglia La griglia rappresenta la struttura Oltre alla griglia verticale sono state
invisibile che permette di organizzare i stabilite delle interlinee standard
contenuti web della pagina. basate su multipli di 8px, per scandire
I contenuti sono stati distribuiti in un un ritmo verticale e agevolare la co-
sistema di griglie responsive su 12 prensione delle relazioni tra elementi
colonne separate da uno spazio inter- in pagina.
colonna, per garantire all’utente una
fruizione semplice e immediata su I box di testo, come regola generale,
qualsiasi dispositivo utilizzato. non superano mai i 2/3 della larghezza
complessiva della griglia per agevolare
Le dimensioni delle colonne van- la lettura del testo.
no adattate ai cambiamenti della In ogni caso la lunghezza della riga di
viewport secondo le regole riportate testo non deve superare i 75 caratteri.
in tabella.
1130px
2/3 1/3
Contenuti principali: articoli, immagini, Bottoni condivisione,
gallery carousel e liste menu secondari e widget
358 px 358 px 358 px
Interlinea bassa
16 px 24px
L'interlinea bassa è 24px
consigliata tra oggetti
di senso con una stretta 16px
relazione tra loro (es. titolo
e didascalia di un box) e più
in generale come margine 24px
interno a box, bottoni e card.
Interlinea media
24 px
È consigliata tra oggetti di
senso con una relazione
subordinata (es. titolo e
sottotitolo o titolo e testo). 32px - 40 px
Interlinea alta 24px
32-40px
Serve a sottolineare
una separazione tra un 32px - 40 px
contenuto e un altro (es. tra 24px
due sezioni di una pagina).
Lo spazio corrisponde a
una pausa ed è funzionale
alla lettura e alla percezione 32px - 40 px
delle parti che compongono 24px
la pagina.
Interlinee pari o superiori ai
48px sono consigliate solo 56 px
per distanziare i contenuti
dal footer.
Small Medium Large Extralarge
Breakpoint fino a 768px da 768px a 991px da 1280px a 1360px 1920px
Larghezza max
nessuna 688px 904px 1130px
del container
Spaziatura 12px 20px 20px 28px
19REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE DELLA REGIONE PUGLIA
Header e menu L’Header, compatto e leggero, ca- Su mobile il menu si contrae in un
librato per occupare il minor spazio burger menu a ingresso laterale in cui
possibile in pagina, contiene: l’apertura e la chiusura delle tendine è
• il logo della Regione, passepartout gestita con click sulla voce principale.
per il ritorno alla home da qualsiasi
pagina; É stata prevista l’aggiunta di menu
• le icone per ingrandire e ridurre il secondari di navigazione nella sidebar
testo, collocate nel pre-header; di destra.
• il menu di navigazione.
Il percorso di navigazione è inoltre evi-
Il menu di navigazione al suo interno denziato dalla presenza di breadcrumb
apre tendine di menu o megamenu a che aiutano l’utente a orientarsi anche
seconda del numero di voci presenti quando approda, direttamente dal
(maggiori di 8). Di qui è possibile arri- browser, a contenuti particolarmente
vare a tutte le aree del sito e atterrare annidati.
nei portali tematici.
Header desktop
Titillium Web
16 px Regular
larghezza megamenu pari
al container (1130px)
margine interno 24 px
fondo grigio #F5F5F5
Pre-header
fondo grigio #002537
30px
72px
24px
24px
Header mobile
contiene solo logo e
burger menu
Voci di menu
Titillium Web
16 px semibold
margine interno 24 px
fondo voce non cliccata
grigio #F5F5F5
fondo voce cliccata
azzurro #029FE8 10%
20REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE DELLA REGIONE PUGLIA
Footer Il footer è stato progettato come • responsabile di pubblicazione;
segue: • dichiarazione di accessibilità;
• barra "valuta questo sito" che • link a Protezione civile;
rimanda a un form*; • link a privacy policy e note legali*;
• logo della Regione*; • crediti*.
• link di accesso all’area riservata
per gli addetti ai lavori; * Previsti dalle linee guida AgID.
• social media*;
• contatti e indirizzi generali*; Amministrazione trasparente non
• link alla pagina contenente elenco è presente nel footer perché già
pec e alla rubrica contatti; presente nel menu di navigazione
• link utili a pagine di particolare principale.
rilevanza (Press Regione ecc.);
Footer desktop
fondo blu #002537
Titillium Web
16 px Regular
pre-footer
fondo grigio #F5F5F5
30px
58px
24px
24px
16px
30px
Footer mobile 24px
fondo blu #002537 24px
Titillium Web
14px Regular
16px
16px
16px
16px
16px
21REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE TEMATICO
Livello 2
Al livello 2 appartengono i portali ll portale di area tematica eredita
tematici. Questi corrispondono a temi struttura, stili e componenti del
o obiettivi che accomunano le attività portale di primo livello, ad eccezione
di più dipartimenti. del colore principale (vedi pag. 10).
Lo scopo di questa suddivisione Nell'area Sezioni e siti tematici
è quello di facilitare l’accesso dell'homepage del portale di livello 2
all’informazione. sono elencati pagine e siti, singole
Le aree tematiche sono 12: o aggregate, riferiti allo stesso
argomento.
1. Agricoltura
2. Ambiente Nelle pagine a seguire sono
presentate: struttura (sezioni e
3. Competitività e innovazione
organizzazione delle informazioni),
4. Cultura e turismo griglia e dettagli header e footer.
5. Istituzione e partecipazione
I caratteri (font family) sono gli stessi
6. Lavoro e formazione indicati per il Portale istituzionale.
7. Pari opportunità
8. Politiche europee e cooperazione
internazionale
9. Politiche giovanili
10. Salute, sport e buona vita
11. Territorio, paesaggio e mobilità
12. Welfare, diritti e cittadinanza
22REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE TEMATICO
Il portale tematico mantiene per tutte le • bandi e avvisi (al massimo 3 card in
Struttura della pagina aree la stessa struttura: evidenza);
• hero image; • una sezione Agenda con il calendario
• sezione in primo piano; degli eventi.
• sezioni tematiche che può contenere
da un minimo di 3 a un massimo di 9 Tutte le homepage dei portali tematici
box; saranno caratterizzate dal colore di
• la sezione Utilità formata da box appartenenza e una stretta osservanza
Rimando a Portale istituzionale replicabili; della visualizzazione sotto indicata.
Il pittogramma richiama la paternità del Portale
istituzionale. Il logo della Regione è posto sulla
parte destra e funge da redirect allo stesso
portale regionale.
Hero image
Con descrizione e campo cerca.
Notizie in primo piano
Massimo 3 card in evidenza. Per visualizzare
tutti i contenuti l’utente deve cliccare il bottone
"Vedi tutte le notizie".
Box bianco
Collegamento a una pagina di 2°livello che
aggrega link di livelli 3 e 4.
Box grigio
Collegamento diretto a siti di livello 3 e
di livello 4 Interni o esterni all'hub.
Agenzie
I box dal gradiente più scuro rappresentano
un redirect ai portali delle Agenzie Regionali
di settore.
Utilità
La sezione dal gradiente più chiaro contiene il
redirect al BURP, al Catalogo dei servizi e alla
pagina interna dei link utili.
Bandi e avvisi
Massimo 3 card in evidenza. Per visualizzare
tutti i contenuti l’utente deve cliccare il bottone
" Vedi tutti gli avvisi".
Agenda
È il calendario collegato agli eventi di set-
tore. Sulla destra sono riportati due eventi
più prossimi o più rilevanti.
Footer
Uguale al portale istituzionale (vedi pagina 21).
23REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE TEMATICO
Griglia La griglia rappresenta la struttura I box di testo, come stabilisce la regola
invisibile che permette di organizzare i generale, non superano mai i 2/3 della
contenuti web della pagina. larghezza complessiva della griglia per
I contenuti sono stati distribuiti in un facilitare la lettura del testo. In ogni
sistema di griglie responsive su 12 caso la lunghezza della riga di testo
colonne, per garantire all’utente una non deve superare i 75 caratteri.
facile fruizione rispetto a qualsiasi
dispositivo utilizzato.
1130px
358 px 358 px 358 px
30 px
100 px
Header
+ hero image
con campo cerca
270 px
e descrizione dell’area tematica.
164 px
Utilità 80 px
Collegamenti rapidi a sezioni o
siti esterni importanti. Presente
anche nei portali di livello 2.
colore 32 px
Poiché il modello è valido per portali di
livello 1, livello 2 e livello 3, il colore va
sostituito con il color accent.
24REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
PORTALE TEMATICO
Header, corpo e footer
Header • link di accesso all’area riservata
La testata del sito dovrebbe prevedere per gli addetti ai lavori;
una topbar con accessibiltà (A- A+), • social media*;
select lingua (se presenti più lingue). • contatti e indirizzi generali*;
Il logo dovrebbe avere un’altezza di • link alla pagina contenente elenco
circa 70 px e lunghezza in proporzione. pec e alla rubrica contatti;
• link utili a pagine di particolare
Nel complesso, l’header non dovrebbe rilevanza (Press Regione ecc.);
superare i 130 px di altezza. • responsabile di pubblicazione;
• dichiarazione di accessibilità;
Footer • link a Protezione civile;
contiene: • link a privacy policy e note legali*;
• barra "valuta questo sito" che • amministrazione trasparente;
rimanda a un form*; • crediti*.
• logo della Regione*;
* Previsti dalle linee guida AgID.
1130px
Header
30 px
100 px
16px
Corpo della 24 px
pagina
es: struttura
pagina interna
Footer 30 px
58 px
24 px
48 px
colore
Poiché il modello è valido per portali di Indicare sempre il logo della Social in questa posizione,
livello 1, livello 2 e livello 3, il colore va Regione Puglia, non del sito. Il non sul pre header.
sostituito con il color accent. logo del sito va sull’header.
25REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
SEZIONI TEMATICHE
Livello 3
I siti di livello 3 riguardano programmi Il footer conserva la stessa
specifici, regionali ed europei, impostazione del Portale istituzionale:
accessibili dai portali di livello 2. logo della Regione a sinistra e il link
ai canali social dedicati all'argomento
Questi siti raccolgono notizie e bandi a destra, tre colonne di informazioni
riferiti ad un argomento o a un gruppo immediatamente sotto, adempimenti
di argomenti semanticamente collegati legali e cookie nel "piede".
tra loro.
Cambia l’header rispetto ai precedenti
Predisporre un sito di livello 3 è livelli: il menu di navigazione si sposta
opportuno solo se l'argomento o il sotto il logo per lasciare spazio in
gruppo di argomenti da rappresentare alto a destra ai loghi dei partner e dei
è così complesso nella sua architettura finanziatori. Il "campo cerca" viene
da giustificare la presenza di un menu di spostato dalla hero image al menu
navigazione dedicato. di navigazione per lasciare maggiore
libertà di impaginazione nel corpo
In tutti gli altri casi è preferibile
della pagina.
predisporre una sezione dedicata
all'interno del portale di livello 2 di Nelle pagine a seguire vengono
riferimento. presentate: struttura, griglia,
componenti modulari che è possibile
Rispettano le regole di stile già viste attivare o disattivare.
per i livelli 1 e 2 (vedi pagg.9 - 16).
Per l'uso dei colori si rimanda allo
studio delle palette utilizzate per i siti
di livello 2, aree tematiche (vedi pag. 10
e seguenti).
26REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
SEZIONI TEMATICHE 1130px
Struttura e griglia 358 px 358 px 358 px
Breadcrumb + accessibilità
30 px
Consente di ritornare ai precedenti livelli in un click.
130 px
Menu
Hero image
270 px
Campo cerca
Descrizione portale
Descrizione dei servizi/informazioni
offerti dal sito + banner per comu-
nicazioni importanti/spazio menu
secondario + calendario.
32 px
Bandi e avvisi
Area prevista se il sito gestisce
l'informazione su opportunità di
finanziamento e avvisi pubblici.
La visualizzazione della card è
configurabile: con o senza immagine.
24 px
Notizie
La visualizzazione della card è
configurabile: con o senza immagine.
24 px
Agenda ed eventi
È il calendario collegato agli eventi di set-
tore. Sulla destra sono riportati due eventi
più prossimi o più rilevanti.
Strumento di geolocalizzazione
Consente di geolocalizzare dati e
ricerca di informazioni sulla mappa.
Da visualizzare se e quando serve
Call to action + tasto
Serve a mettere in evidenza con-
tenuti particolarmente rilevanti e a
portare l'utente ad un'azione.
Progetti collegati
Consente di visualizzare progetti (siti
esterni o pagine) collegati al sito.
Da visualizzare se e quando serve
32 px
Footer
27 48 pxREGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
SEZIONI TEMATICHE
Header, corpo e footer
Header • link di accesso all’area riservata
La testata del sito dovrebbe prevedere per gli addetti ai lavori;
una topbar con accessibiltà (A- A+), • social media*;
select lingua (se presenti più lingue). • contatti e indirizzi generali*;
Il logo dovrebbe avere un’altezza di • link alla pagina contenente elenco
circa 70 px e lunghezza in proporzione. pec e alla rubrica contatti;
• link utili a pagine di particolare
Nel complesso, l’header non dovrebbe rilevanza (Press Regione ecc.);
superare i 130 px di altezza. • responsabile di pubblicazione;
• dichiarazione di accessibilità;
Footer • link a Protezione civile;
contiene: • link a privacy policy e note legali*;
• barra "valuta questo sito" che • amministrazione trasparente;
rimanda a un form*; • crediti*.
• logo della Regione*;
* Previsti dalle linee guida AgID.
Header
Breadcrumb Logo del sito Loghi partnership Campo cerca sulla navbar
aiuta a percepire la “pa- possibilmente non superiore e finanziamento (non è obbligatorio che
rentela” con l’hub a 70 px di altezza. (variano da sito a sito). abbia questa forma o
e ad arrivare/tornare ai questa dimensione).
livelli superiori.
2/3 1/3
Contenuti principali: bottoni condivisione,
articoli, immagini, gallery carousel e liste. menu secondari, documenti,
indirizzi e contatti.
24 px
Corpo della
pagina
es: struttura
pagina interna
Footer 30 px
58 px
24 px
48 px
colore
Poiché il modello è valido per portali di
livello 1, livello 2 e livello 3, il colore va
sostituito con il color accent. Indicare sempre il logo della Social in questa posizione,
Regione Puglia, non del sito. Il non sul pre header.
logo del sito va sull’header.
28REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
SITO DI PROGETTO
Livello 4
I siti di livello 4 promuovono specifici Gli unici obblighi sono:
progetti e iniziative. Si accede dai
portali di livello 2 o dai siti di livello 3. • predisporre un pre-header con
un breadcrumb che riporti la
Questi siti hanno esigenze di posizione del sito rispetto alla
comunicazione proprie, per questo gerarchia dei livelli (es:Regione
motivo si lascia la massima libertà Puglia > Poitiche Giovanili >
nell'uso degli spazi e dei colori e incentivi > PIN)
non è obbligatorio l'uso delle linee • impaginazione dell'header e del
guida descritte per i precedenti livelli. footer come segue
HEADER
livello 4
Breadcrumb Rimando alla
livelli superiori Accessibilità Regione Puglia
Footer
livello 4
Logo Regione
Social Loghi partnership
più informazioni e contatti
e finanziatori
29REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
CONTENUTI WEB
Modelli di pagina e L’analisi delle esigenze informative dei I modelli presentati nelle prossime
content type cittadini hanno indirizzato l'analisi e pagine guidano l'organizzazione dei
l'individuazione di una nuova architet- contenuti del portale a partire da com-
tura dell’informazione. ponenti configurabili.
I contenuti già presenti sono stati analiz- La correlazione stabile fra content
zati, catalogati e riorganizzati in diverse type e modello abitua i cittadini a in-
strutture informative su cui è stata terpretare in modo univoco le singole
progettata la nuova interfaccia utente. unità informative.
Contenuto web Descrizione
Notizia Unità informativa spesso correlata ad altri contenuti con un ciclo di vita
complesso - es. bando, evento, azione politica/amministrativa. Oltre agli elementi
visibili in pagina, la notizia è corredata da metadati non visibili.
Bando Unità informativa con ciclo di vita complesso sottoposto a frequenti
aggiornamenti. È possibile collegare notizie di aggiornamento in coda al corpo
centrale del bando.
Lista di informazioni Con aggiornamento automatico e possibilità di ricerca avanzata
(Aggregatore di contenuti)
Pagina descrittiva La pagina descrittiva è versatile, specificamente pensata per contenere
informazioni stabili nel tempo, spesso articolate e annidate.
Lista link con descrizione Serve ad aggregare pagine e siti utili al cittadino per trovare informazioni.
e immagine È possibile visualizzarla con o senza immagini (visualizza link testuale).
Scheda ufficio/ente Descrive un'unità organizzativa - come un ufficio o una funzione politica -
definendone le caratteristiche, gli obiettivi e il dirigente responsabile.
Scheda personale interno Descrive ruolo, compiti, funzioni e le posizioni organizzative del personale interno
della regione.
Scheda persona Descrive ruolo e compiti di una persona che lavora per la Regione.
Evento Descrive il programma di un evento, il luogo e le date. Può essere singolo oppure
far parte di una rassegna di eventi.
Scheda servizio Descrive un servizio online/offline presente nel Catalogo dei servizi e mostra
all’utente come usarlo/accedere.
Scheda box grigio Widget per inserire contatti, canali social e altre informazioni nella sidebar di una
contatti e informazioni pagina.
Widget di Contenuto generico Rimando a pagine e a documenti particolarmente rilevanti, e che viene
visualizzato compilando la sezione Collegamento o Documenti nel modello
contenuto generico.
Heroimage con ricerca Elemento evocativo. Sui portali di livello 1 e 2 può contenere una descrizione e un
campo di ricerca avanzata.
Copertina Elemento evocativo posizionabile in pagine interne - es. landing page - per
evidenziare la rilevanza di un contenuto.
Aggregatore notizie o bandi Componente configurabile che consente di aggregare sotto una pagina delle
(Modello di visualizzazione) notizie o dei bandi legati a uno o più argomenti.
30REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
CONTENUTO WEB
Notizia Il corpo centrale della pagina è Content type
Titolo (TEXT)
strutturato su due colonne 8-4.
Sommario (TEXT)
Le prime 8 colonne della griglia Descrizione (RICHTEXT)
contengono la parte informativa: Data creazione/modifica (DATETIME)
titolo, sommario, testo ed Data visualizzazione (DATETIME) gg mese aaaa
eventuali immagini e documenti. Data scadenza (DATETIME) gg mese aaaa
Allegato (ALLEGATO) + titolo e descrizione (TEXT)
Contenuto (RICHTEXT)
Le restanti 4 colonne ospitano Immagine (IMG) + Descrizione (ALT-TEXT)
una sidebar con i bottoni per la Video/galleria img (VIDEO-IMG) + Descrizione (ALT-TEXT)
condivisione social. Notizia correlata (NOTIZIA)
Autore (PERSONA)
Area tematica (LIST)
Struttura (STRUTTURA)
Tag Tipologia notizia (LIST)
Tag Argomento (LIST)
Titolo Tag Localizzazione (LIST)
Dovrebbe essere composto da poche
parole o una frase, evitando di superare
i 100 caratteri (spazi inclusi).
Sottotitolo o sommario
Può essere di qualsiasi lunghezza, ma
generalmente i motori di ricerca troncano
testi più lunghi di 160 caratteri (spazi
inclusi).
Condivisione social
Immagine
Per una visualizzazione ottimale il formato
consigliato per l’immagine è:
Immagine piccola la larghezza deve
essere 360px (720px per visualizzarla
correttamente su schermi retina)
Immagine grande la larghezza deve
essere 700px (1400px per visualizzarla
correttamente su schermi retina).
Testo
Per una maggiore leggibilità dei testi è
consigliabile paragrafare i contenuti di
una pagina, soprattutto se di lunghezza
importante.
Slider immagini
Offre la possibilità di visualizzare la
gallery in una finestra modale.
Tag
Pubblicazione e modifica
colore
Poiché il modello è valido per portali
di livello 1, livello 2 e livello 3, il colore
va sostituito con il color accent.
31REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
CONTENUTO WEB
Bando Il corpo centrale della pagina Content type
Titolo (TEXT)
è strutturato su due colonne
Sommario (TEXT)
8-4. Le prime 8 colonne della Descrizione (RICHTEXT)
griglia contengono la parte Data creazione/modifica (DATETIME)
informativa: titolo, sommario, Data visualizzazione (DATETIME) gg mese aaaa
testo, immagine e documenti. Data scadenza (DATETIME) gg mese aaaa
Allegato (ALLEGATO) + titolo e descrizione (TEXT)
Le restanti 4 colonne ospitano
Contenuto (RICHTEXT)
una sidebar con i bottoni per la Immagine (IMG) + Descrizione (ALT-TEXT)
condivisione social. Video/galleria img (VIDEO-IMG) + Descrizione (ALT-TEXT)
Notizia correlata (NOTIZIA)
In coda alla pagina è possibile Autore (PERSONA)
Area tematica (LIST)
inserire un carousel di card
Struttura (STRUTTURA)
configurabile con delle notizie Tag Argomento (LIST)
collegate. Tag Localizzazione (LIST)
Condicisione social
Titolo
Dovrebbe essere composto da poche
parole o una frase, evitando di superare
i 100 caratteri (spazi inclusi).
Sottotitolo o sommario
Può essere di qualsiasi lunghezza, ma
generalmente i motori di ricerca troncano
testi più lunghi di 160 caratteri (spazi
inclusi).
Immagine
Per una visualizzazione ottimale il formato
consigliato per l’immagine è 700px
(1400px per visualizzarla corretamente su
schermi retina).
Testo
Per una maggiore leggibilità dei testi è
consigliabile paragrafare i contenuti di
una pagina, soprattutto se di lunghezza
importante.
Tag e Pubblicazione e modifica
In coda al contenuto viene riportata la
data di pubblicazione e aggiornamento
della notizia.
Notizie collegate al bando
È possibile inserire un aggregatore
di notizie card in coda la bando per
collegare, attraverso tag, le ultime notizie
collegate al bando.
colore
Poiché il modello è valido per portali
di livello 1, livello 2 e livello 3, il colore
va sostituito con il color accent.
32REGIONE PUGLIA - Manuale d’identità web versione 3.5 2020.02.12
CONTENUTO WEB
Lista di informazioni Le notizie e bandi vengono aggregati
in forma di lista attraverso la
configurazione di un portlet.
Consente al cittadino di accedere a
uno storico di informazioni ordinate e
filtrabili attraverso appositi strumenti
di ricerca avanzata.
Titolo
Dovrebbe essere composto da poche
parole o una frase, evitando di superare
i 100 caratteri (spazi inclusi).
Sottotitolo o sommario
Serve a mostrare più accuratamente il
contenuto dela pagina e gli strumenti.
Può essere di qualsiasi lunghezza ma è
preferibile non superare i 300 caratteri.
Immagine
Per una visualizzazione ottimale il formato
consigliato per l’immagine è:
Immagine piccola la larghezza deve
essere 360px (720px per visualizzarla
correttamente su schermi retina)
Immagine grande la larghezza deve
essere 700px (1400px per visualizzarla
correttamente su schermi retina).
Ricerca avanzata
Lo strumento ricerca avanzata aiuta l'utente
a filtrare le informazioni in pagina. É possibile
ricercare attraverso le select con parametri fissi
e con il campo ricerca libera.
Tag
I tag aiutano l'utente a filtrare le
informazioni in pagina.
colore
Poiché il modello è valido per portali
di livello 1, livello 2 e livello 3, il colore
va sostituito con il color accent.
33Puoi anche leggere
