Manuale di grafica digitale

Transcript

1 Manuale di grafica digitale Giugno 2015

2 Indice Linee Guida Web Design 1. Introduzione 2. Marchio 3. Brand architecture 4. Visual 5. Caratteri tipografici 6. Colori 7. Gabbia di impaginazione 8. Composizione della testata 9. Allineamenti della testata Strutture 10. Menu di secondo livello 11. Box di navigazione correlata 12. Elementi nel corpo pagina 13. Elementi di servizio 14. Bottoni ed elenchi 15. Tabelle 16. Notizie 17. Icone - costruzione 18. Icone - realizzate 19. Mobile 20. Social network Template 21. Portale 22. Strutture 23. Corsi di laurea e laurea magistrale 24. Progetti e attività centrali di Ateneo 25. Base 26. Base - Google site (siti docenti e attività diverse) 27. Gestionali

3 1. Introduzione Lo stile di un sistema di identità, declinato in tutte le sue forme/strumenti di comunicazione, ha l obiettivo di mantenere la riconoscibilità e definire il carattere della marca di un organizzazione, un servizio, un progetto. Dal 2010 l identità visiva dell Ateneo è stata declinata anche sugli strumenti digitali, concorrendo alla creazione del valore del brand. L uso delle stesse linee guida stilistiche, grafiche e concettuali, da parte di tutti coloro che sono deputati a comunicare, genera infatti credibilità e autorevolezza, nonché un esperienza coerente per l utente. Queste Linee guida di web design, e i relativi template collegati, sono lo strumento sul quale basare la composizione grafica delle diverse tipologie di strumenti digitali realizzabili dalle strutture della Sapienza. La casistica di indicazioni fornita necessariamente non esaurisce tutte le possibili declinazioni dell identità online, pertanto qualora non si riesca a evincere una soluzione ottimale per il proprio progetto si invita a contattare l Area supporto strategico e comunicazione - Ufficio comunicazione. Il manuale dovrà essere consultato durante il processo di realizzazione dello strumento web, attenendosi ai passaggi metodologici a seguire, poiché lo sviluppo di un sito è un attività non di pura creatività o di mera applicazione delle regole di composizione grafica, ma di progettazione strutturata. METODO ANALISI: valutazione del pregresso, se esistente, e definizione dei requisiti di base (grafici e funzionali). Definizione degli obiettivi di progetto, dell organizzazione dei contenuti (albero di navigazione) e dei wireframe (schema di distribuzione dei contenuti). PROGETTAZIONE: partendo dai wireframe, identificazione degli elementi caratteristici del sistema web normati e definizione/finalizzazione del layout (composizione grafica). IMPLEMENTAZIONE: supervisione allo sviluppo con l obiettivo di garantire la coerenza della resa grafica valutando eventuali necessità IT.

4 2. Marchio Il marchio (tecnicamente definito anche marchio/logotipo) Sapienza è costruito su un rettangolo ripartito modularmente. La scansione modulare definisce l esatta collocazione degli elementi e permette di definire l area di rispetto. Quest ultima è pari all altezza delle lettere maiuscolette del nome Sapienza. Tale altezza deve essere replicata ai lati del marchio per definire l area di rispetto, ovvero la distanza minima da eventuali margini da altri elementi grafici. Tutti i marchi Sapienza seguono questo criterio di composizione in ogni caso di declinazione della brand architecture.

5 3. Brand architecture Il sistema di identità Sapienza prevede la declinazione del marchio seguendo il modello Unitario con descriptor, nel caso delle Strutture, e il modello Derivato invece nel caso di Progetti o attvità e articolazioni di particolare interesse strategico dell Ateneo. STRUTTURE - Ogni Struttura accademica di primo livello (Facoltà, Dipartimento, Centro di ricerca, Museo) si avvarrà dell identità dell Ateneo mantenendo però la propria denominazione, composta in font Sapienza maiuscolo e maiuscoletto. Le Strutture di secondo livello quali ad esempio laboratori, biblioteche, master ecc. avranno il descriptor composto in Arial e collocato sotto al marchio Sapienza. PROGETTI Il marchio verrà composto con il cherubino Sapienza al quale verrà affiancato il nome del progetto, editato con il font Sapienza maiuscolo e maiuscoletto. Il nome del progetto dovrà includere il nome Sapienza posto a chiusura e non potrà essere più lungo di 22 caratteri spazi inclusi (esclusa la parola Sapienza). Esempi Marchi Strutture - Modello Unitario Facoltà di Lettere e Filosofia Master in Restauro digitale audio/video Facoltà di Economia Biblioteca generale E. Barone Esempi Marchi Progetti - Modello Derivato

6 4. Visual Il visual è un icona aggiuntiva che rappresenta i valori, la finalità o la funzione specifica di una struttura, di un progetto o di un evento dell Ateneo. Non rappresenta pertanto l identità istituzionale e non sostituisce il marchio/logotipo della Sapienza. Il visual può essere utilizzato sui siti web - ma anche su altri strumenti di comunicazione - in apposite aree grafiche diverse da quella dedicata al marchio/ logotipo istituzionale, a esclusione dei biglietti da visita e della carta intestata (questi ultimi due supporti prevedono una sola area grafica, destinata al marchio). Dal punto di vista grafico il visual deve differenziarsi nettamente rispetto al marchio e non può quindi contenere o reinterpretare elementi di quest ultimo. Marchio originale - non utilizzabile nel Sistema Sapienza Marchio in linea con la Brand architecture del Sistema Sapienza Estrapolazione del segno e revisione cromatica come visual Inserimento del visual in un contesto fotografico e riutilizzo del logotipo originale, come descrizione e non come marchio

7 5. Caratteri tipografici Il font Sapienza, realizzato ad hoc per il marchio logotipo di Ateneo, viene utilizzato anche per comporre i marchi e i descriptor delle strutture di primo livello e dei progetti con marchio derivato. Non può mai essere utilizzato per creare altri marchi di strutture di secondo livello. Il font Sapienza non può essere utilizzato per la realizzazione dei visual. L Arial viene utilizzato, nei pesi bold e regular, in tutti i materiali digitali e per comporre le testatine di corsi di Laurea, Master, Docenti etc. e tutte quelle testate che non rientrano nella brand architecture ufficiale. NB: non è consentito l uso del font Arial nella versione Italic. Arial bold a BbCcDdEeFfGgHhIiJjKkLlMm NnOoPpQqRrSsTtUuVvWwXxYyZz abcdefghijklmnopqrstuvwxyz A BbCcDdEeFfGgHhIiJjKkLlMm NnOoPpQqRrSsTtUuVvWwXxYyZz A BbCcDdEeFfGgHhIiJjKkLlMm NnOoPpQqRrSsTtUuVvWwXxYyZz Arial regular

8 6. Colori Il sistema di identità web Sapienza prevede l uso di 13 colori suddivisi tra istituzionali e complementari. Tutti i colori indicati in questa tavola sono web safe, pertanto si richiede di attenersi al loro uso senza variazioni. Colori istituzionali I colori istuzionali sono alla base di ogni prodotto web e possono essere integrati con i colori completamentari, il cui uso pertanto è da ritenersi facoltativo. I colori complementari sono stati attribuiti a determinate tipologie di sezioni sul portale istituzionale e alle strutture di primo livello. Tali colori possono essere impiegati all interno dei prodotti web per esempio per differenziare macroaree o icone. # #DADADA # # # # Colori complementari #52514B Ateneo Biblioteche # Strutture Facoltà #C03E27 Didattica #18625B Ricerca Centri di Ricerca # Dipartimenti # Internazionale Musei

9 7. Griglia di impaginazione I siti web facenti parti del sistema Sapienza devono adottare una delle seguenti gabbie di impaginazione. PORTALE/STRUTTURE/PROGETTI Tale gabbia è sempre su 3 colonne diverse tra loro per ampiezza. Deve essere utilizzata da Facoltà, Dipartimenti, Centri di Ricerca, Musei e Biblioteche. Per i Progetti deve essere valutata la loro natura: se si tratta di siti informativi si sceglierà questa gabbia, se invece si tratta di offerta di servizi si sceglierà la gabbia Progetti/ Gestionali descritta a seguire. Si prevede un layout fisso con background intorno color rosso Sapienza. PROGETTI/GESTIONALI Tale gabbia è sempre su 2 colonne, dove quella minore può essere disposta sia a destra sia a sinistra. Il background rosso sarà solo in testata e sul footer, con possibilità di layout liquido complessivo (testata+corpo pagina). Portale Strutture Progetti 900px TESTATA900x120px VISUAL 175x120 px h 30 - menu primo livello h 30 - briciole di pane menu di secondo livello colonna di servizio h 30 - aria FOOTER Progetti Gestionali 960px TESTATA 900x120px VISUAL 175x120 px h 30 - menu primo livello h 30 - briciole di pane/funzionalità dashboard menu di secondo livello / colonna di servizio h 30 - aria FOOTER

10 8. Composizione della testata In tutti i siti Sapienza è prevista una testata fissa, nella quale layout ed elementi differiscono a seconda del template adottato e delle esigenze di comunicazione/funzionali. A seguire gli elementi base per la costruizione di ogni tipologia di progetto affrontato. I progetti completi di tutte le informazioni sono consultabili nei template (a partire da tavola 20). PORTALE ML H60px English version font Arial 10pt - Menù target font Arial bold 14 NB: le testate illustrate in tavola sono da considerarsi a solo titolo esemplificativo poiché si tratta di tagli che non tengono conto di tutte le regole di applicazione, come per esempio delle aree di rispetto del marchio o dei margini. STRUTTURE ML H45px Descriptor font Sapienza SC 14/17pt Menù primo livello font Arial bold 10max11pt bold 14 STRUTTURE B ML H45px Descriptor font Arial 18/19pt Menù primo livello font Arial bold 10max11pt bold 14 GENERICO ML H45px Descriptor font Arial regular e bold 14/17pt Menù primo livello font Arial bold 10max11pt - Menù servizio font Arial bold 11 CORSI ML H60px Descriptor font Arial regular e bold 13/16pt Menù primo livello font Arial bold 12pt PROGETTI ML H60px Menù primo livello font Arial bold 10max11pt GESTIONALE - ML H60 px - Menù di servizio Arial bold

11 9. Allineamenti della testata Strutture Le Strutture di primo livello della Sapienza hanno una testata in font Sapienza, il cui allineamento e composizione è differente rispetto all uso del marchio nei materiali offline. A seconda dell estensione del nome della struttura la composizione sarà da 1 a 3 righe, così come avviene per il marchio. L allineamento del testo rispetto al marchio Sapienza nella testata web varierà in base al numero di righe, come illustrato in tavola. Gli stessi criteri di allineamento vengono mantenuti per testate di Strutture di secondo livello con descriptor in Arial. 1 riga: il testo sarà allineato alla base del testo Sapienza 2 righe: il testo sarà allineato alla base del testo Università di Roma 3 righe: il testo sarà allineato ai margini dello scudo del Cherubino

12 10. Menu di secondo livello Il menu di secondo livello è composto in Arial regular e bold in tutte le tipologie di template. Ogni template ha caratteristiche specifiche come indicato in tavola. II livello: arial bold 12/14pt maiuscolo III/IV livello: arial regular 12/14pt + arial bold 12/14pt alto/basso Colori Grigio: # Rosso: # Portale Progetti Strutture FUTURO STUDENTE STUDENTE CHI SIAMO DOVE SIAMO Iscritto Laureando Fuori corso Straniero LAUREATO DOCENT I PERSONALE IMPRESE E TERRITORIO MEDIA Fili: spessore 0,3px colore # distanza 20px Il colore del secondo livello varia in relazione al colore della struttura. A destra un esempio con la cromia dei Dipartimenti. Le voci di terzo livello devono essere evidenziate con le apposite frecce. GOVERNO Direttore Consiglio di dipartimento Giunta di dipartimento Consigli d area UFFICI PERSONE NOTIZIE Progetti Gestionali Nel caso dei template per i Gestionali o Progetti che offrono servizi, il layout si allegerisce: perde le linee divisorie e acqusisce una titolazione della sezione, o con cromia dedicata o rosso Sapienza. Le voci di terzo livello devono essere evidenziate con le apposite frecce (vedi tavola 13 Bottoni ed elenchi), ma possono contenere icone specifiche o tasti di azione come il + che apre un subset di sottocontenuti.

13 11. Box di navigazione correlata Il sistema web Sapienza è caratterizzato dall uso di box che contengono di informazioni o menu di navigazione. Tutte le forme sono squadrate: il sistema Sapienza non prevede MAI angoli smussati e arrotondati. I colori utilizzati sono sempre scelti tra I colori istituzionali e complementari. I complementari vengono utilizzati sempre piatti, mentre gli istituzionali (rosso e grigio) anche sfumati, ma UNICAMENTE nei box Come fare per e Cerca nelle pagine target. I box sono sempre composti da un area titolo e un area contenuto. Gli elenchi puntati, trattandosi di link, possono essere realizzati esclusivamente con frecce colorate, seguendo i canali di appartenenza o la cromia della struttura. BOX CANALI Campo titolo: arial bold 12pt colore #FFFFFF box: h20px L175px Campo contenuto: arial regular 12pt colore # box: h variabile L 175px filo 1px Freccia: immagine con cromia corrispondente BOX COME FARE PER/CERCA Campo titolo: arial bold 12pt colore #FFFFFF box: h20px L175px cromia con gradiente Campo contenuto: arial regular 12pt colore # box: h variabile L 175px Freccia: immagine con cromia rossa o grigia Questi box possono essere usati anche in pagina con una larghezza di 240 px. BOX BANNER Titolo: arial bold 12pt colore #FFFFFF Campo titolo: H20px L190px (è un box più grande che va posizionato solo sulla colonna destra allineato al margine destro della gabbia grafica). Nei siti di progetto i banner possono anche essere utilizzati nelle colonne di sinistra, in questo caso la larghezza sarà di 175px e non verranno allineati al margine della gabbia, ma seguiranno l allineamtno generale della colonna.

14 12. Elementi nel corpo pagina In ogni tipologia di sito è possibile introdurre nel corpo pagina elementi differenti di varia natura. In tavola una casistica ricorrente. INFOSTUD Campo titolo: arial bold 12pt colore #FFFFFF box: h20px L500px Campo contenuto: arial regular 12pt colore #FFFFFF box: h 100 L 500px Freccia: immagine con cromia bianca #FFFFFF SERVIZI Campo titolo: arial bold 12pt Campo contenuto: arial regular 12pt Freccia: immagine con cromia # Filo: 2 o 3 px AVVISI Campo titolo: arial bold 12pt Campo contenuto: arial regular 12pt Filo: 2 o 3 px r Esempi di gallerie di immagini e contenuti (vedi template Progetti - Tavola 23, template Gestionali - Tavola 26)

15 13. Elementi di servizio Nelle colonne laterali di tutti i siti del sistema web Sapienza sono presenti strumenti di servizio e approfondimento. In tavola una casistica ricorrente. POSTA ELETTRONICA Titolo: arial bold 12pt colore # Testo: arial regular 12pt colore # Freccia: immagine con cromia grigia # Fili: spessore 2 o 3px TAG CLOUD 1 Titolo: arial bold 12/14pt # Parole: arial regular variabile # LOGIN Box squadrati con ombra interna e contorno colore # Box squadrato colore piatto # Testi: arial bold e regular 10pt CERCA Box squadrato con ombra interna e contorno colore # Box squadrato colore piatto # Testi: arial bold e regular 10pt TAG CLOUD 2 Titolo: arial bold 12/14pt # Parole: arial regular variabile # Filo: 2px APPROFONDIMENTI Titolo: arial bold 12pt colore # Testo: arial regular 12pt colore # o # Freccia: immagine con cromia o rossa o grigia # Fili: spessore 0,3px colore # distanza dal testo 20px Inserimento delle icone documenti al posto delle frecce. CONDIVIDI/SALVA Immagine da file esecutivi altezza 25px

16 14. Bottoni ed elenchi Il sistema web Sapienza prevede l uso di bottoni per indicare all utente un azione da svolgere. Tali bottoni possono avere un fondo dei colori della palette cromatica Sapienza o una sfumatura grigia. Solitamente vengono utilizzati nei form di inserimento dati. Altra tipologia di bottoni di azione sono quelli di accesso a sezioni di contenuto. Anche questi seguono la palette cromatica di Ateneo, ma possono contenere al loro interno delle icone rappresentative oltre al testo. Gli elenchi puntati nei siti Sapienza possono avere 2 funzioni: 1 - indicano le voci di menu: sono illustrati con delle frecce; 2 - indicano i punti di un elenco nel corpo pagina: sono illustrati con dei quadrati. In entrambi i casi si applica la palette cromatica di sistema. Nei menu di navigazione inoltre sono stati introdotti gli elementi grafici del + e -, da utilizzare per aprire subset di sottomenu. Esempi di bottoni di azione vai vai vai vai tutte le news RICERCA AVANZATA Indicatori di menu e corpo pagina

17 15. Tabelle Negli strumenti web di ogni natura può essere necessaria l introduzione di tabelle. Spesso le piattaforme permettono una compilazione automatica dai database che dovrà rispettare i criteri di stile illustrati in tavola qualunque siano i dati esposti. Caratteristica principale delle tabelle Sapienza è la visualizzazione delle sole righe orizzontali, i cui fili hanno uno spessore variabile da 0,3 a 0,5px. I colori utilizzati devono essere scelti nella palette cromatica Sapienza web. PAGINA DI TEST ORARIO DINAMICO GOMP - PER AULA Arial bold 11pt MAIUSCOLO PRIMO ANNO - PRIMO TRIMESTRE Arial bold 11 pt MAIUSCOLO colore grigio # colore della struttura Canale 1 Arial bold 11 pt Alto/Basso AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali Arial bold 10pt Alto/Basso Orario Arial bold 10pt Lunedì Martedì Mercoledì Giovedi Venerdì 08:30 Arial regular 10pt 09:15 DIFFERENZIALE Arial bold 10pt FONDAMENTI DI SILVESTRI R. FONDAMENTI DI SILVESTRI R METODOLOGIE DI NAVIGLI R. DIFFERENZIALE 08:30 09:15 DIFFERENZIALE FONDAMENTI DI SILVESTRI R. FONDAMENTI DI SILVESTRI R METODOLOGIE DI NAVIGLI R. DIFFERENZIALE 08:30 09:15 DIFFERENZIALE FONDAMENTI DI SILVESTRI R. FONDAMENTI DI SILVESTRI R METODOLOGIE DI NAVIGLI R. DIFFERENZIALE Canale 2 AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali Arial bold 10pt Alto/Basso Orario Arial bold 10pt Lunedì Martedì Mercoledì Giovedi Venerdì 08:30 Arial regular 10pt 09:15 DIFFERENZIALE Arial bold 10pt FONDAMENTI DI SILVESTRI R. FONDAMENTI DI SILVESTRI R METODOLOGIE DI NAVIGLI R. DIFFERENZIALE PRIMO ANNO - SECONDO TRIMESTRE Canale 1 AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali Arial bold 10pt Alto/Basso Orario Arial bold 10pt Lunedì Martedì Mercoledì Giovedi Venerdì 08:30 Arial regular 10pt 09:15 DIFFERENZIALE Arial bold 10pt FONDAMENTI DI SILVESTRI R. FONDAMENTI DI SILVESTRI R METODOLOGIE DI NAVIGLI R. DIFFERENZIALE INFORMAZIONI SULLE AULE Arial bold 11pt MAIUSCOLO Denominazione Arial bold 10pt Indirizzo Aula 3 - Fisica - "Enrico Fermi" Scienze PIAZZALE Aldo Moro, ROMA (ROMA) presso Fisica - "Enrico Fermi" Scienze Matematiche Posta Elettronica Cetificata Accessibilità Mappa del sito

18 16. Notizie In tutte le tipologie di siti facenti parte del sistema web Sapienza vengono pubblicate notizie in diversi formati con e senza immagini. È fondamentale seguire le indicazioni in tavola per mantenere uno standard coerente. Le notizie in pagine con immagine possono essere di 2 tipi: Primaria: immagine 500x168px Titolo: arial bold 12pt maiuscolo - Sottotitolo: arial bold 11pt minuscolo (colore dalla palette) Testo: arial regular 12pt # Secondaria: immagine 240x80px Titolo: arial bold 12pt maiuscolo - Sottotitolo: arial bold 12pt minuscolo colore # Testo: arial regular 12pt colore # Nella home target l immagine è rappresentativa del target di grandezza 235x205px. Affiancate si posizionano al massimo 3 notizie: - Titolo: arial bold 12pt maiuscolo colore # Testo: arial regular 12pt colore # Nella home target è anche posssibile non inserire alcuna immagine, ma direttamente le notizie (max 3) a tutta larghezza della colonna (500px). STUDENTI DOCENTI PERSONALE Cerca nel sito... vai HOME STRUTTURE DIDATTICA RICERCA JOLLY Home CHI SIAMO DOVE SIAMO GOVERNO Preside Consiglio di facoltà Consigli d area Nucleo per la valutazione dell attività didattica e scientifica Osservatorio studentesco Garante degli studenti UFFICI PERSONE NOTIZIE CONDIVIDI SALVA Tag cloud amet consecutur lorem ipsum dolor est amet HOME TITOLO FOTONOTIZIA HOME arial bold12/14px incididunt ut labore et dolore magna. arial regular 12/14px Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi> TITOLO NOTIZIA II LIVELLO arial bold12/14px IMMAGINE GRANDEZZA 500X168PX TITOLO NOTIZIA II LIVELLO utente password login SERVIZIO 1 Lorem ipsum SERVIZIO 2...X N. SERVIZI Lorem ipsum dolor est COME FARE PER Lorem ipsum CERCA Lorem ips consecutur lorem ipsu lorem ipsum lorem ipsum Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem Leggi> IMMAGINE GRANDEZZA 240X80PX Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem Leggi> IMMAGINE GRANDEZZA 240X80PX Posta Elettronica Cetificata Accessibilità Mappa del sito Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI

19 17. Icone - costruzione Le icone Sapienza devono essere costruite su un quadrato ripartito modularmente, sul quale collocare gli elementi e definire l area di rispetto. Quest ultima deve essere pari minimo a 1/8 del lato del quadrato. È fondamentale prediligere, se non strettamente necessario per la comprensione del significato, la composizione di icone piene e non outline (con il solo contorno). Le icone dovranno essere riprodotte solo con i colori della palette Sapienza web e sempre dal file vettoriale originale. L icona può essere inserita nel quadrato di costruzione reso visibile da un fondo, mantenendo l area di rispetto definita. È sconsigliato l inserimento di un nome abbinato all icona, tuttavia in determinate situazioni può essere usato per rafforzarne il significato. Il font da utilizzare è Arial Bold maiuscolo e l altezza massima in proporzione corrisponde a 1/8 del lato del quadrato. x x x Versione positiva Versione negativa

20 18. Icone - repertorio Durante lo sviluppo dei diversi progetti web della Sapienza è emersa la necessità di introdurre nel sistema di identità l uso di icone rappresentative. In tavola si propone un repertorio di icone già progettate e in uso nel sistema web Sapienza, che qualora necessarie devono essere utilizzate per i nuovi prodotti. L elenco a seguire non è esaustivo di tutte le casistiche possibili, pertanto in caso di nuova ideazione si dovrà far riferimento alle indicazioni a Tavola 16.

21 19. Mobile L obiettivo di una versione mobile è fruire i contenuti in velocità, pertanto è stato realizzato un menù ad hoc sempre presente in testata, che facilita l utente nella navigazione. La caratteristica di stile è l uso delle icone sfondate, piene, su fondo rosso istituzionale. L applicazione dell identità visiva nell adattamento del Responsive Design, per la natura della tecnologia, è automatica. Nel caso del sito di Ateneo il menu ad hoc ha reso necessario un adattamento stilistico: - centratura del logo in testata; - introduzione del grigio sul menu di primo livello per far capire all utente dove si trova più facilmente; - introduzione delle cromie su menu di secondo livello e declinazione degli stili per il terzo e il quarto. Menu di navigazione in testata Esempi di pagina e apertura del menu

22 20. Social network L Ateneo ha deciso di introdurre nel Sistema web anche l uso dei social network. A seguire le linee guida per la creazione delle thumb/loghi identificativi. Logo Social per Sapienza Il marchio è inserito in un quadrato di colore rosso Sapienza, non sono previsti testi. Logo Social per Strutture Il marchio si riduce e si posiziona nella parte superiore del quadrato, alla base del quale si inserisce una fascia del colore complementare associato alla Struttura. Al centro della fascia viene inserito l acronimo della Struttura, con la prima lettera maiuscola e senza punti o trattini. Logo Social per Temi chiave Il marchio si riduce e si posiziona nella parte superiore del quadrato, alla base del quale si inserisce una fascia del colore rosso Sapienza. Al centro del campo viene inserito il nome del tema, composto in font Sapienza maiuscolo e maiuscoletto 60pt. Logo Social per Corsi Il marchio si riduce e si posiziona nella parte superiore del quadrato, alla base del quale si inserisce una fascia del colore rosso Sapienza. Al centro del campo viene inserito il nome del corso, composto in font Frutiger 65 Bold 30/34pt. Logo Social per Progetti Il marchio è inserito in un quadrato di colore rosso Sapienza, con una trasparenza del bianco al 30%. Centrato sul logo viene inserito l acronimo del progetto, in font Sapienza maiuscolo 150pt. Tutte le misure in tavola sono espresse in pixel. Logo social per Sapienza Logo social per Strutture Coris Logo social per Temi chiave Logo social per Corsi Logo social Progetti Ric erca Scienze applicate ai Beni Culturali RS

23 Indice Linee Guida Web Design Template 21. Portale 22. Strutture 23. Corsi di laurea e laurea magistrale 24. Progetti e attività centrali di Ateneo 25. Base 26. Base - Google site (siti docenti e attività diverse) 27. Gestionali Nelle tavole seguenti sono illustrati i template realizzati per il Sistema web della Sapienza. Il layout presentati sono quelli della progettazione originale; essi possono avere subito lievi variazione in sede di sviluppo, pertanto per le indicazioni di dettaglio (misure, caratteri, colori, distanze, gabbia ecc.) è necessario far riferimento alle tavole tecniche da 2 a 19.

24 21. Template Portale vai cerca english version FUTURI STUDENTI DOCENTI PERSONALE IMPRESE E TERRITORIO MEDIA ATENEO Chi Siamo Governo Amministrazione Strutture Normativa Concorsi Gare e appalti Fondazione Sapienza Trasparenza STRUTTURE Facoltà Dipartimenti Centri Biblioteche Musei DIDATTICA Orientamento Immatricolazioni Offerta formativa Corsi post-laurea Borse di studio Esami di stato Lorem ipsum do sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim RICERCA Catalogo della ricerca Brevetti Trasferimento tecnologico Convenzioni e contratti Finanziamenti INTERNAZIONALE Studiare e lavorare all estero Accordi interuniversitari Progetti europei Incontri SAPIENZA Eventi Notizie Rassegna stampa RadioSapienza Sport Musica Teatro Merchandising vai cerca english version accessibilità mappa contatti - pec mobile Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI FUTURI STUDENTI STUDENTI DOCENTI PERSONALE IMPRESE E TERRITORIO MEDIA ATENEO STRUTTURE FUTURO STUDENTE DIDATTICA RICERCA INTERNAZIONALE HOME SAPIENZA DIDATTICA STUDENTE Lorem ipsum dolor est Iscritto Laureando Fuori corso Straniero INTERNAZIONALE LAUREATO DOCENTI Lorem ipsum dolor est PERSONALE IMPRESE E TERRITORIO TERRITOR MEDIA TITOLO incididunt ut labore et dolore magna aliqua. TITOLO incididunt ut labore et dolore magna aliqua. COME FARE PER CERCA Social C Community RICERCA Tag cloud amet consecutur lorem ipsum dolor est dolor est consec consecutur amet Lorem ipsum dolor est Lorem ipsum dolor est lorem ipsum lorem ipsum lorem ipsum lorem ipsum Lorem ipsum dolor est lorem ipsum lorem SAPIENZA Lorem ipsum dolor est INFOSTUD cerca Lorem ipsum do sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna vai aliqua. Ut enim ad minim STRUTTURE english version Lorem ipsum dolor est consecutur lorem ipsum FUTURI STUDENTI STUDENTI DOCENTI PERSONALE IMPRESE E TERRITORIO MEDIA SERVIZI ATENEO ORIENTAMENTO Orientamento didattico STRUTTURE Lorem ipsum dolor est lorem ipsum lorem ipsum DIDATTICA lorem ipsum lorem ipsum Didattica> Orientamento> Orientamento didattico RICERCA Lorem ipsum dolor est consecutur INTERNAZIONALE lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum utente FAQ - le domande frequenti Area Insegnanti scuole Come scelgo il corso di studio più adatto a me? Sort - sportelli di facoltà Come faccio ad iscrivermi ad un corso di laurea? accessibilità mappa contatti - pec mobile Presentazione facoltà Chi può aiutarmi per l'iscrizione? Counseling psicologico Quali sono i (buoni) motivi per preferire la Sapienza? Orientamento al lavoro L'università organizza attività di preparazione ai test? AlmaLaurea Quanto costa iscriversi all'università? Posso usufruire di borse di studio? Soul Come faccio a cercare casa? Area Aziende password login Approfondimenti DIDATTICA Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI Come faccio a cercare un medico di base? Dove sono le SAPIENZA LOREM IPSUM DOLOR EST SIT AMET CONSECUTUR

25 22. Template Strutture Cerca nel sito... vai HOME STRUTTURE DIDATTICA RICERCA JOLLY Home STUDENTI DOCENTI PERSONALE CHI SIAMO arial bold 10/12px HOME utente password login DOVE SIAMO GOVERNO SERVIZIO 1 Preside Consiglio di facoltà Consigli d area Nucleo per la valutazione dell attività didattica e scientifica Osservatorio studentesco Garante degli studenti UFFICI PERSONE NOTIZIE TITOLO FOTONOTIZIA HOME arial bold10/12px incididunt ut labore et dolore magna. arial regular 9/11px Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi> Lorem ipsum arial bold 8/12px SERVIZIO 2...X N. SERVIZI Lorem ipsum dolor est COME FARE PER CONDIVIDI SALVA Tag cloud amet consecutur lorem ipsum dolor est amet TITOLO NOTIZIA II LIVELLO arial bold10/12px Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem Leggi> TITOLO NOTIZIA II LIVELLO Cerca nel sito... Lorem ipsum arial bold 8/12px vai CERCA Lorem ips arial Home bold 8/12px consecutur lorem ipsu CHI SIAMO arial bold 10/12px lorem ipsum lorem ipsum HOME DOVE SIAMO GOVERNO Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore Direttore dolore magna aliqua. Lorem ipsum incididunt Consiglio ut di dipartimento labore et dolore magna aliqua. Lorem Leggi> Giunta di dipartimento Consigli d area HOME STRUTTURE DIDATTICA RICERCA JOLLY STUDENTI DOCENTI PERSONALE utente password login SERVIZIO 1 Lorem ipsum arial bold 8/12px Cerca nel sito... vai TITOLO NOTIZIA III LIVELLO english versionuffici STUDENTI DOCENTI PERSONALE incididunt ut labore et dolore magna aliqua. PERSONE Lorem ipsum incididunt ut labore et dolore magna TITOLO FOTONOTIZIA HOME arial bold10/12px aliqua. Lorem ipsum incididunt ut labore NOTIZIE et dolore Adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. magna aliqua. Lorem ipsum incididunt ut labore et arial regular 9/11px Lorem ipsum incididunt ut labore dolore magna aliqua. Lorem ipsum incididunt ut et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Leggi> labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum CONDIVIDI SALVA incididunt ut labore et dolore magna aliqua. Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi> CENTRO STRUTTURE RICERCA DIDATTICA NOTIZIE INTERNAZIONALE Tag cloud TITOLO NOTIZIA II LIVELLO arial bold10/12px TITOLO NOTIZIA II LIVELLO Home amet consecutur lorem login CHI SIAMO arial bold 10/12px utente password HOME ipsum dolor est DOVE SIAMO GOVERNO lorem ipsum dolor IN EVIDENZA/SERVIZIO est sit 1 amet Direttore dolor est Lorem consecutur ipsum arial bold 8/12px Segretario amministrativo lorem ipsum dolor consecutur est sit lorem ipsum Posta Elettronica Cetificata Accessibilità Mappa del sito Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI Comitato direttivo Consiglio Lorem ipsum adipisicing elit, Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore sed do eiusmod tempor incididunt ut labore et dolore tecnico-scientifico magna aliqua. Lorem ipsum magna aliqua. Lorem ipsum SERVIZIO 2...X N. SERVIZI incididunt ut labore incididunt ut AMMINISTRAZIONE et dolore magna aliqua. Lorem Leggi> labore et dolore magna aliqua. Lorem Leggi> TITOLO FOTONOTIZIA HOME arial bold10/12px Lorem ipsum dolor est PERSONE incididunt ut labore et dolore magna. arial regular 9/11px Lorem ipsum incididunt ut labore TITOLO NOTIZIA III LIVELLO et dolore magna aliqua. Lorem ipsum incididunt ut incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum Lorem ipsum incididunt ut labore et dolore magna CONDIVIDI SALVA incididunt ut labore et dolore magna aliqua. Lorem ipsum adipisicing elit, sed do eiusmod aliqua. Lorem ipsum incididunt ut labore et dolore tempor incididunt ut labore et dolore magna aliqua. Leggi> COME FARE PER magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut Lorem ipsum arial bold 8/12px labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Leggi> Tag cloud TITOLO NOTIZIA II LIVELLO arial bold10/12px TITOLO NOTIZIA II LIVELLO amet consecutur lorem ipsum dolor est CERCA Lorem ips arial bold 8/12px amet consecutur lorem ipsu lorem ipsum lorem ipsum Cerca nel sito... vai HOME STRUTTURE DIDATTICA RICERCA JOLLY SERVIZIO 2...X N. SERVIZI Lorem ipsum dolor est COME FARE PER Lorem ipsum arial bold 8/12px CERCA Lorem ips arial bold 8/12px consecutur lorem ipsu lorem ipsum lorem ipsum Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem Leggi> Lorem ipsum adipisicing elit, Home sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut CHI SIAMO arial bold 10/12px HOME labore et dolore magna aliqua. Lorem Leggi> Posta Elettronica Cetificata Accessibilità Mappa del sito DOVE SIAMO STUDENTI DOCENTI PERSONALE utente password login Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI GOVERNO TITOLO NOTIZIA III LIVELLO Preside incididunt ut labore et dolore magna aliqua. Banner per altro contenuto Consiglio di facoltà Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore Consigli d area magna aliqua. Lorem ipsum incididunt ut labore et Nucleo per la valutazione dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Leggi> scientifica dell attività didattica e Osservatorio studentesco TITOLO FOTONOTIZIA HOME arial bold10/12px Garante degli studenti incididunt ut labore et dolore magna. arial regular 9/11px Lorem ipsum incididunt ut labore UFFICI et dolore magna aliqua. Lorem ipsum incididunt ut Cerca nel sito... vai HOME STRUTTURE DIDATTICA RICERCA JOLLY PERSONE labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum Home NOTIZIE STUDENTI incididunt DOCENTI ut labore PERSONALE et dolore magna aliqua. Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi> login CHI SIAMO arial bold 10/12px utente password HOME TITOLO NOTIZIA II LIVELLO arial bold10/12px TITOLO NOTIZIA II LIVELLO DOVE SIAMO CONDIVIDI SALVA GOVERNO SERVIZIO 1 Accessibilità Mappa del Preside sito Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF Lorem ipsum PI arial bold 8/12px Tag cloud Consiglio di facoltà Consigli d area amet consecutur lorem Nucleo per la valutazione ipsum dolor est dell attività didattica e scientifica SERVIZIO 2...X N. SERVIZI Osservatorio studentesco Lorem ipsum adipisicing elit, Lorem ipsum adipisicing elit, TITOLO FOTONOTIZIA HOME arial bold10/12px amet Lorem sed ipsum do eiusmod dolor est sit tempor amet incididunt ut labore et dolore sed do eiusmod tempor incididunt ut labore et dolore Garante degli studenti incididunt ut labore et dolore magna. consecutur magna lorem aliqua. ipsum Lorem ipsum magna aliqua. Lorem ipsum arial regular 9/11px Lorem ipsum incididunt ut labore incididunt ut labore incididunt ut UFFICI et dolore magna aliqua. Lorem ipsum incididunt ut consecutur et dolore lorem magna ipsumaliqua. Lorem Leggi> labore et dolore magna aliqua. Lorem Leggi> PERSONE labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum NOTIZIE incididunt ut labore et dolore magna aliqua. Lorem ipsum adipisicing elit, sed do eiusmod COME TITOLO FARE NOTIZIA PER III LIVELLO tempor incididunt ut labore et dolore magna aliqua. Leggi> incididunt ut labore et dolore magna aliqua. Lorem Lorem ipsum ipsum arial dolor bold 8/12px est consecutur incididunt ut labore et dolore magna TITOLO NOTIZIA II LIVELLO arial bold10/12px TITOLO NOTIZIA II LIVELLO consecutur aliqua. lorem Lorem ipsum ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et CONDIVIDI SALVA dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Leggi> CERCA Tag cloud Lorem ips arial bold 8/12px Manuale di grafica digitale Sapienza Università consecutur di Roma lorem ipsu amet consecutur lorem lorem ipsum lorem ipsum ipsum dolor est Lorem ipsum adipisicing elit, Lorem ipsum adipisicing elit, amet sed do eiusmod tempor incididunt ut labore et dolore sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum magna aliqua. Lorem ipsum SERVIZIO 1 Lorem ipsum arial bold 8/12px SERVIZIO 2...X N. SERVIZI Lorem ipsum dolor est COME FARE PER Lorem ipsum arial bold 8/12px CERCA Lorem ips arial bold 8/12px consecutur lorem ipsu lorem ipsum lorem ipsum

26 23. Template Corsi di laurea e laurea magistrale CORSO DI LAUREA MAGISTRALE CICLO UNICO IN GIURISPRUDENZA A.A. 2012/2013 cerca vai english version IL CORSO MODALITÀ DI ACCESSO INSEGNAMENTI Il corso > Presentazione PRESENTAZIONE PRESENTAZIONE LINK UTILI SCHEDA REFERENTI DIDATTICA ERASMUS PERCORSI DI ECCELLENZA PLACEMENT LAUREA Lorem Ipsum Dolor est TITOLO DELLA NOTIZIA TITOLO DELLA NOTIZIA TITOLO DELLA NOTIZIA Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Portale Sapienza VEDI ANCHE Centro di servizio per la sede pontina (già UORII) Accoglienza degli Studenti Accordi mobilità studenti Accesso tramite il servizio VPN (Virtual Private Network) titolo titolo Tag cloud amet consecutur lorem ipsum dolor est amet Chi siamo Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Obiettivi e sbocchi professionali Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. ed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Internazionalizzazione Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. CORSO DI LAUREA MAGISTRALE Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit CICLO UNICO IN GIURISPRUDENZA convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing A.A. 2012/2013 elit. cerca vai english version Sistema di assicurazione della qualità Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. IL CORSO MODALITÀ DI ACCESSO INSEGNAMENTI. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis Il corso > Tabelle hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis PRESENTAZIONE nibh vel diam venenatis malesuada. TABELLE Profilo dei laureati SCHEDA PRIMO ANNO - PRIMO TRIMESTRE Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel REFERENTI diam venenatis malesuada. Canale 1 Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum DIDATTICA dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor, AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali ERASMUS consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. PERCORSI DI ECCELLENZA Orario Lunedì Martedì Mercoledì Giovedi Venerdì Dati statistici sui laureati PLACEMENT Lorem ipsum dolor, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis 08:30 nibh vel diam venenatis malesuada. LAUREA 09:15 FONDAMENTI DI FONDAMENTI DI METODOLOGIE DI Lorem DIFFERENZIALE DIFFERENZIALE Sedi Ipsum SILVESTRI R. SILVESTRI R. NAVIGLI R. Strutture Dolor est 08: :15 FONDAMENTI DI FONDAMENTI DI METODOLOGIE DI DIFFERENZIALE DIFFERENZIALE SILVESTRI R. SILVESTRI R. NAVIGLI R. accessibilità mappa contatti - pec mobile Università degli Studi di Roma Tag "La cloud Sapienza" - Piazzale Aldo Moro 5, :30 Roma T (+39) CF PI :15 FONDAMENTI DI FONDAMENTI DI METODOLOGIE DI amet consecutur lorem DIFFERENZIALE DIFFERENZIALE ipsum dolor est SILVESTRI R. SILVESTRI R. NAVIGLI R. lorem ipsum dolor Canale 2 est sit amet AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali Orario Lunedì Martedì Mercoledì Giovedi Venerdì 08:30 09:15 DIFFERENZIALE FONDAMENTI DI SILVESTRI R. FONDAMENTI DI SILVESTRI R METODOLOGIE DI NAVIGLI R. DIFFERENZIALE PRIMO ANNO - SECONDO TRIMESTRE Canale 1 AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali Orario Lunedì Martedì Mercoledì Giovedi Venerdì 08:30 09:15 DIFFERENZIALE FONDAMENTI DI SILVESTRI R. FONDAMENTI DI SILVESTRI R METODOLOGIE DI NAVIGLI R. DIFFERENZIALE INFORMAZIONI SULLE AULE Denominazione Indirizzo Aula 3 - Fisica - "Enrico Fermi" Scienze Matematiche Fisiche e Naturali PIAZZALE Aldo Moro, ROMA (ROMA) presso Fisica - "Enrico Fermi" Scienze Matematiche Fisiche e Naturali, Città universitaria mappa accessibilità mappa contatti - pec mobile Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI

27 24. Template Progetti e attività centrali di Ateneo Help/FAQ Login HOME SDL COMMUNITY CO COLLEZIONI O S SERVIZI NEWS S C CHI S SIAMO O DONA O UNA U RISORSA SO S Home ULTIMI ARRIVI CERCA ARCHITETTURA Architettura brasiliana vista da Carlo Severati Tutti Cerca... Website Digital library vai RICERCA AVANZATA NEWS Lorem ipsum arial bold 8/12px consecu- NAVIGA tutte le news TESTI IMMAGINI VIDEO AUDIO MAPPE 3D SOFTWARE LAVORA CON NOI Collabora con SDL attraverso stage ESPLORA e tirocinii presso le diverse strutture nei settore del Cultural Heritage. "Regala il tuo tempo alla Cultura" e formati nei nostri laboratori tecnologici. Consulta i bandi della Sapienza nel settore dei Beni culturali. vai PRODOTTI DELLA RICERCA DEL DIPARTIMENTO DI STORIA DELL'ARTE E SPETTACOLO Il Dipartimento di Storia dell'arte e Spettacolo è nato nel 2010 dalla fusione del Dipartimento di Storia dell'arte e del Dipartimento di Arti e Scienze dello Spettacolo. Diretto dalla prof.ssa Marin... CONDIVIDI SALVA Tutti Cerca... Help/FAQ Login vai Esplora i temi delle collezioni Digital library Website RICERCA AVANZATA Composta da 2543 risorse digitali Copertura temporale: amet consecutur lorem ipsum dolor SDL COMMUNITY ULTIMI ARRIVI est ipsum consecutur lorem HOME O COLLEZIONI lorem ipsum dolor est sit Home > Collezioni amet amet consecutur COLLEZIONI S SERVIZI NEWS S Per nome CONDIVIDI SALVA Esplora i temi delle collezioni amet consecutur lorem ipsum dolor est DONA O UNA U RISORSA SO S Per Istituzione dipartimento di storia dell'arte e dello spettacolo (3) biblioteca centrale delle facoltà di architettura (2) Contatti Posta Certificata biblioteca centraleelettronica di ingegneria "g. boaga" (1) Accessibilità biblioteca del dipartimento di fisica (1) biblioteca di scienze statistiche (1) ARCHITETTURA Architettura brasiliana vista da Carlo Severati C CHI S SIAMO O Per temi biblioteca dipartimento biologia ambientale (1) biblioteca dipartimento matematica "guido castelnuovo" (1) Mappa sito e.portale sapienza Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI bibliotecadel generale barone (1) museo delle origini (1) museo di chimica "primo levi" (1) TITOLO DELLA COLLEZIONE TITOLO DELLA COLLEZIONE TITOLO DELLA COLLEZIONE TITOLO DELLA COLLEZIONE Lorem ipsum dolor, consectetur adipisicing elit,lorem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Lorem ipsum dolor, consectetur adipisicing elit,lorem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Manuale di grafica digitale Sapienza Università di Roma Composta da: Composta da: 2543 risorse digitali Copertura temporale: vai 2543 risorse digitali Copertura temporale: vai

28 25. Template Base (Laboratori, Master, Corsi di Formazione, Gruppi di ricerca ecc.) TARGET SERVIZIO FAQ Master in Sviluppo delle capacità gestionali per le funzioni di coordinamento nell'area infermieristica, ostetrica, riabilitativa e tecnico sanitaria Arial bold e regular 14/17 pt INGOMBRO IMMAGINE Cerca nel sito... vai LINK 1 LINK 2 LINK 3 LINK 4 LINK 5 LINK 6 LINK 7 LINK 8 Home LINK 1 arial bold 10/12px LINK 2 LINK 3 link 1 link 2 link 3 link 4 link 4link 4link 4link 4link 4link 4link 4link 4link 4link 4link 4link 4 link 5 link 6 LINK 4 LINK 5 LINK 6 CONDIVIDI SALVA Tag cloud amet consecutur lorem ipsum dolor est amet HOME TITOLO FOTONOTIZIA HOME arial bold10/12px incididunt ut labore et dolore magna. arial regular 9/11px Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi> TITOLO NOTIZIA II LIVELLO arial bold10/12px Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem Leggi> TITOLO NOTIZIA II LIVELLO Lorem ipsum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem Leggi> utente SERVIZIO 1 password Lorem ipsum arial bold 8/12px SERVIZIO 2...X N. SERVIZI Lorem ipsum dolor est COME FARE PER Lorem ipsum arial bold 8/12px CERCA Lorem ips arial bold 8/12px consecutur lorem ipsu lorem ipsum lorem ipsum login TITOLO NOTIZIA III LIVELLO incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Lorem ipsum incididunt ut labore et dolore magna aliqua. Leggi> Posta Elettronica Cetificata Accessibilità Mappa del sito Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, Roma T (+39) CF PI

29 26. Template Base - Google site (siti docenti e attività diverse) Il template di base Google site è la soluzione definita per le realtà (laboratori, master, gruppi di ricerca, progetti interdipartimentali ecc.) che necessitano di creare un sito nell ambito del sistema web della Sapienza utilizzando la piattaforma Google Apps for Education. Il template di base Google Site, analogamente al template di base Drupal (tavola 24), ha la cornice completamente rossa, riporta in testata il marchio della Sapienza, affiancato dalla denominazione del progetto in carattere Arial. In caso di affiancamento del nome del progetto l altezza del marchio è pari a 45px, nel caso in cui ci sia il solo fondo rosso è pari a 60px di altezza. La pagina è organizzata su 2 colonne e segue le caratteistiche stilistiche illustrate nelle tavole precedenti di questo manuale. Una versione ad hoc, con suggerimenti per il contenuto dei link di primo livello, il posizionamento della fotografia ecc., è stata creata per i docenti che intendono utilizzare il Sapienza Google Site per realizzare il proprio sito personale.