manuale di grafica digitale (pdf)

Manuale di grafica digitale Sapienza Università di Roma

Manuale di grafica digitale

Giugno 2015


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


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.


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.


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

Esempi Marchi Progetti - Modello Derivato

Facoltà di Economia

Biblioteca generale“E. Barone”

Facoltà di Letteree Filosofia

Master in Restauro digitale audio/video


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


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.

a BbCcDdEeFfGgHhIiJjKkLlMm

NnOoPpQqRrSsTtUuVvWwXxYyZz

abcdefghijklmnopqrstuvwxyz

1234567890

A BbCcDdEeFfGgHhIiJjKkLlMm NnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890A BbCcDdEeFfGgHhIiJjKkLlMm

NnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890

Aria

l reg

ular

Aria

l bol

d


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.

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.

#822433

#52514B Ateneo Biblioteche

#999999

#DADADA

#344761 Strutture Facoltà

#666666

#C03E27 Didattica

#333333

#18625B Ricerca Centri di Ricerca

#315583 Internazionale

#000000

#055866 Dipartimenti

#534F2C @Sapienza Musei

Colori istituzionali

Colori complementari


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) .

900px

15 1520 20155 175500

h 30 - aria

menu di secondo livello colonna di servizio

TESTATA 900x120px

FOOTER

h 30 - briciole di pane

h 30 - menu primo livello

VISUAL 175x120 px

960px

30230 700

h 30 - menu primo livello

h 30 - briciole di pane/funzionalità dashboard

h 30 - aria

menu di secondo livello /colonna di servizio

TESTATA 900x120px

FOOTER

VISUAL 175x120 px

Portale | Strutture | Progetti

Progetti | Gestionali


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).

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.

PORTALE – ML H60px – English version font Arial 10pt - Menù target font Arial bold 14

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


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


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: #333333Rosso: #822433

Portale | Progetti

Fili: spessore 0,3px colore #999999 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.

Nel caso dei template per i Gestionali o Progettiche 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.

Strutture

Progetti | Gestionali

CHI SIAMO

UFFICI

PERSONE

DOVE SIAMO

NOTIZIE

GOVERNO

DirettoreConsiglio di dipartimentoGiunta di dipartimentoConsigli d’area

IscrittoLaureandoFuori corsoStraniero

FUTURO STUDENTE

STUDENTE

LAUREATO

DOCENTI

PERSONALE

IMPRESE E TERRITORIO

MEDIA


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 CANALICampo titolo: arial bold 12pt colore #FFFFFF box: h20px – L175pxCampo contenuto: arial regular 12pt colore #333333 box: h variabile – L 175px filo 1pxFreccia: immagine con cromia corrispondente

BOX BANNERTitolo: arial bold 12pt colore #FFFFFFCampo 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.

BOX COME FARE PER/CERCACampo titolo: arial bold 12pt colore #FFFFFF box: h20px – L175px cromia con gradienteCampo contenuto: arial regular 12pt colore #333333 box: h variabile – L 175pxFreccia: immagine con cromia rossa o grigia

Questi box possono essere usati anche in pagina con una larghezza di 240 px.


In ogni tipologia di sito è possibile introdurre nel corpo pagina elementi differenti di varia natura.

In tavola una casistica ricorrente.

12. Elementi nel corpo pagina

INFOSTUD Campo titolo: arial bold 12pt colore #FFFFFF box: h20px – L500pxCampo contenuto: arial regular 12pt colore #FFFFFF box: h 100– L 500pxFreccia: immagine con cromia bianca #FFFFFF

SERVIZI Campo titolo: arial bold 12pt Campo contenuto: arial regular 12pt Freccia: immagine con cromia #822433 Filo: 2 o 3 px

AVVISI Campo titolo: arial bold 12pt Campo contenuto: arial regular 12pt Filo: 2 o 3 px r

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)


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.

APPROFONDIMENTI Titolo: arial bold 12pt colore #000000Testo: arial regular 12pt colore #333333 o #822433Freccia: immagine con cromia o rossa o grigia #333333Fili: spessore 0,3px colore #999999 distanza dal testo 20pxInserimento delle icone documenti al posto delle frecce.

POSTA ELETTRONICA Titolo: arial bold 12pt colore #822433Testo: arial regular 12pt colore #333333Freccia: immagine con cromia grigia #333333 Fili: spessore 2 o 3px

TAG CLOUD 1 Titolo: arial bold 12/14pt #333333Parole: arial regular variabile #666666

LOGIN Box squadrati con ombra interna e contorno colore #333333+Box squadrato colore piatto #822433Testi: arial bold e regular 10pt

CERCA Box squadrato con ombra interna e contorno colore #333333+Box squadrato colore piatto #822433Testi: arial bold e regular 10pt

CONDIVIDI/SALVA Immagine da file esecutivi altezza 25px

TAG CLOUD 2 Titolo: arial bold 12/14pt #822433 Parole: arial regular variabile #666666 Filo: 2px


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.

vai RICERCA AVANZATAtutte le newsvai vai vai

Esempi di bottoni di azione

Indicatori di menu e corpo pagina


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

Posta Elettronica Cetificata | Accessibilità | Mappa del sito

PRIMO ANNO - PRIMO TRIMESTRE Arial bold 11 pt MAIUSCOLO colore grigio #333333 + colore della strutturaCanale 1 Arial bold 11 pt Alto/Basso

101226 CALCOLO DIFFERENZIALE TERRACINA A. Arial bold 10pt

101226 CALCOLO DIFFERENZIALE TERRACINA A.

08:30 Arial regular 10pt09:15

IndirizzoDenominazione Arial bold 10pt

Aula 3 - Fisica - "Enrico Fermi" Scienze PIAZZALE Aldo Moro, 5 - - ROMA (ROMA) presso Fisica - "Enrico Fermi" Scienze Matematiche

INFORMAZIONI SULLE AULE Arial bold 11pt MAIUSCOLO

AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali Arial bold 10pt Alto/Basso

Lunedì Martedì Mercoledì Giovedi VenerdìOrario Arial bold 10pt

1015883 FONDAMENTI DI PROGRAMMAZIONESILVESTRI R.


1015884 METODOLOGIE DI PROGRAMMAZIONENAVIGLI R.

PRIMO ANNO - SECONDO TRIMESTRECanale 1



08:3009:15






08:3009:15




Canale 2

















30


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 #333333Secondaria: immagine 240x80px Titolo: arial bold 12pt maiuscolo - Sottotitolo: arial bold 12pt minuscolo colore #333333 - Testo: arial regular 12pt colore #333333

Nella home target l’immagine è rappresentativa del target di grandezza 235x205px.Affiancate si posizionano al massimo 3 notizie: - Titolo: arial bold 12pt maiuscolo colore #822433- Testo: arial regular 12pt colore #333333

Nella home target è anche posssibile non inserire alcuna immagine, ma direttamente le notizie (max 3) a tutta larghezza della colonna (500px).

Home

vaiCerca nel sito...

Lorem ipsum dolor est sit ametconsecutur lorem ipsumsit ametconsecutur lorem ipsum

Lorem ipsum consecutur lorem ipsumsit ametconsecutur lorem ipsum

SERVIZIO 1

SERVIZIO 2 ...X N. SERVIZI

HOME

© Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, 00185 Roma T (+39) 06 49911 CF 80209930587 PI 02133771002Posta Elettronica Cetificata | Accessibilità | Mappa del sito

loginutente password

CERCA

Lorem ips consecutur lorem ipsusit amet lorem ipsum lorem ipsumconsecutur lorem ipsum

COME FARE PER

Lorem ipsum consecutur lorem ipsum

HOME STRUTTURE DIDATTICA JOLLYRICERCA

lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit

Tag cloud

CONDIVIDI | SALVA

CHI SIAMO

UFFICI

PERSONE

DOVE SIAMO

NOTIZIE

GOVERNO

PresideConsiglio di facoltàConsigli d’areaNucleo per la valutazione dell’attività didattica e scientificaOsservatorio studentescoGarante degli studenti

Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem Leggi>

TITOLO NOTIZIA II LIVELLO arial bold12/14px

arial bold12/14px

adipisicing elit, sed do eiusmod tempor TITOLO NOTIZIA II LIVELLOadipisicing elit, sed do eiusmod tempor

TITOLO FOTONOTIZIA HOME

IMMAGINE GRANDEZZA 500X168PX

adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.arial regular 12/14px Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incidid-unt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi>

STUDENTI | DOCENTI | PERSONALE





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

Versione positiva Versione negativa

EMAILx


18. Icone - repertorio

Durante lo sviluppo dei diversiprogetti 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 essereutilizzate per i nuovi prodotti.

L’elenco a seguire non è esaustivodi tutte le casistiche possibili,pertanto in caso di nuovaideazione si dovrà far riferimentoalle indicazioni a Tavola 16.


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


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 SapienzaIl marchio è inserito in un quadrato di colore rosso Sapienza, non sono previsti testi.

Logo Social per StruttureIl marchio si riduce e si posiziona nella parte superiore del quadrato, alla base del quale si inserisceuna fascia del colore complementare associato alla Struttura.

Al centro della fascia viene inserito l’acronimo della Struttura,con la prima lettera maiuscolae senza punti o trattini.

Logo Social per Temi chiaveIl marchio si riduce e si posiziona nella parte superiore del quadrato, alla base del quale si inserisceuna 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 CorsiIl marchio si riduce e si posiziona nella parte superiore del quadrato,

alla base del quale si inserisceuna 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.

300

240

3030

5050 200

300

Coris

300

180

7520

7575 150

20

Ricerca

300

180

4720

7575 150

2424

300

240

3030

5050 200

300

RS300

180

4720

7575 150

20

Scienze applicateai Beni Culturali

20

Logo social per Sapienza

Logo social per Temi chiave Logo social per Corsi Logo social Progetti

Logo social per Strutture


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.


21. Template Portale

vaicerca english version

FUTURI STUDENTI | DOCENTI | PERSONALE | IMPRESE E TERRITORIO | MEDIA

© Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, 00185 Roma T (+39) 06 49911 CF 80209930587 PI 02133771002

Lorem ipsum do sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

Chi Siamo | Governo | Amministrazione | Strutture | Normativa | Concorsi | Gare e appalti | Fondazione Sapienza | Trasparenza

Facoltà | Dipartimenti | Centri | Biblioteche | Musei

Orientamento | Immatricolazioni | Offerta formativa | Corsi post-laurea | Borse di studio | Esami di stato

Studiare e lavorare all’estero | Accordi interuniversitari | Progetti europei | Incontri internazionali

Eventi | Notizie | Rassegna stampa | RadioSapienza | Sport | Musica | Teatro | Merchandising

Catalogo della ricerca | Brevetti | Trasferimento tecnologico | Convenzioni e contratti | Finanziamenti

accessibilità | mappa | contatti - pec | mobile

ATENEO

STRUTTURE

DIDATTICA

INTERNAZIONALE

@ SAPIENZA

RICERCA

ATENEO

DIDATTICA

© Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, 00185 Roma T (+39) 06 49911 CF 80209930587 PI 02133771002accessibilità | mappa | contatti - pec | mobile

english version vaicerca

FUTURI STUDENTI | STUDENTI | DOCENTI | PERSONALE | IMPRESE E TERRITORIO | MEDIA

TITOLOadipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

TITOLOadipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

IscrittoLaureandoFuori corsoStraniero

HOME STUDENTI


Tag cloud

Social Community

ATENEO STRUTTURE RICERCA INTERNAZIONALE @ SAPIENZA

SERVIZI

INFOSTUD

COME FARE PER

FUTURO STUDENTE

STUDENTE

LAUREATO

DOCENTI

PERSONALE

IMPRESE E TERRITORIO

MEDIA

DIDATTICA

lorem ipsum dolor est sitamet consecutur loremipsum dolor est sit amet consecutur lorem ipsumdolor est sit amet consec

Tag cloud

Social Community

PERSONALE

IMPRESE E TERRITOR

MEDIA

Social C

CERCA

STRUTTURE


INTERNAZIONALE



DIDATTICA

RICERCA


Lorem ipsum dolor est sit ametconsecutur lorem ipsum lorem ipsum lorem ipsumsit amet lorem ipsum lorem ipsumconsecutur lorem ipsum

Lorem ipsum dolor est sit ametconsecutur lorem ipsum lorem ipsum lorem ipsum

@ SAPIENZA

Lorem ipsum dolor est sit ametconsecutur lorem ipsumsit ametconsecutur lorem ipsumLorem ipsum do sit

amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim



vaicerca english version

FUTURI STUDENTI | STUDENTI | DOCENTI | PERSONALE | IMPRESE E TERRITORIO | MEDIA



Tag cloud

Social Community

ATENEO STRUTTURE RICERCA INTERNAZIONALE @ SAPIENZA

DIDATTICA

DIDATTICA

IMMATRICOLAZIONI

OFFERTA FORMATIVA

CORSI POST LAUREA

ESAMI DI STATO

Orientamento didattico Area Insegnanti scuole Sort - sportelli di facoltà Presentazione facoltà Counseling psicologicoOrientamento al lavoro AlmaLaurea Soul Area Aziende

Didattica> Orientamento> Orientamento didatticoORIENTAMENTO

tag di pagina, ipsum, dolor est, sit, amet,lorem, ipsum, dolor est, sit, amet,lorem, ipsum, dolor est, sit, amet,lorem

Download

Approfondimenti

LOREMIPSUMDOLOR EST SIT AMETCONSECUTUR

Argomenti correlati

LoremConsecteturDolor

Ti interessa anche ...

LoremConsecteturDolor

Lorem ipsum dolor sit amet

Etiam porttitor lectus alique

FAQ - le domande frequenti

Come scelgo il corso di studio più adatto a me?Come faccio ad iscrivermi ad un corso di laurea?Chi può aiutarmi per l'iscrizione?Quali sono i (buoni) motivi per preferire la Sapienza?L'università organizza attività di preparazione ai test?Quanto costa iscriversi all'università?Posso usufruire di borse di studio?Come faccio a cercare casa?Come faccio a cercare un medico di base?Dove sono le mense?Ci sono agevolazioni su trasporti o altri servizi?Quali agevolazioni e sevizi sono previsti per le persone diversamente abili?Vengo da un Paese straniero: cosa devo fare per iscrivermi?Quali agevolazioni sono previste per chi lavora?Come mi informo su orari, aule, lezioni, programmi, ricevimento docenti?Come mi informo su tutte le procedure amministrative (es, passaggi di facoltà, opzione part-time, scadenze varie, modulistica, ecc..)?Come funziona il riconoscimento dei crediti?Piani di studio, propedeuticità, ecc..? a chi chiedo notizie?Non riesco a superare un momento di difficoltà: c'è qualcuno che mi può aiutare?Quali altri servizi posso trovare alla Sapienza? ProrettoriDelegatiCommissioniSegrteria particolareUfficio dirigenziale


22. Template Strutture

Home



Lorem ipsum arial bold 8/12pxconsecutur lorem ipsumsit ametconsecutur lorem ipsum

SERVIZIO 1


HOME



CERCA

Lorem ips arial bold 8/12pxconsecutur lorem ipsusit amet lorem ipsum lorem ipsumconsecutur lorem ipsum

COME FARE PER

Lorem ipsum arial bold 8/12pxconsecutur lorem ipsum



Tag cloud

CONDIVIDI | SALVA

CHI SIAMO arial bold 10/12px

UFFICI

PERSONE

DOVE SIAMO

NOTIZIE

GOVERNO


Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incidid-unt ut labore et dolore magna aliqua. Leggi>

TITOLO NOTIZIA III LIVELLOadipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



TITOLO NOTIZIA II LIVELLO arial bold10/12pxadipisicing elit, sed do eiusmod tempor

TITOLO NOTIZIA II LIVELLOadipisicing elit, sed do eiusmod tempor

TITOLO FOTONOTIZIA HOME arial bold10/12pxadipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.arial regular 9/11px Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incidid-unt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi>


Home




SERVIZIO 1


HOME



CERCA


COME FARE PER




Tag cloud

CONDIVIDI | SALVA


UFFICI

PERSONE

DOVE SIAMO

NOTIZIE

GOVERNO

DirettoreConsiglio di dipartimentoGiunta di dipartimentoConsigli d’area







TITOLO FOTONOTIZIA HOME arial bold10/12pxAdipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.arial regular 9/11px Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incidid-unt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor est sit amet consecutur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leggi>


Home




IN EVIDENZA/SERVIZIO 1


HOME

© Università degli Studi di Roma "La Sapienza" - Piazzale Aldo Moro 5, 00185 Roma T (+39) 06 49911 CF 80209930587 PI 02133771002Accessibilità | Mappa del sito


CERCA


COME FARE PER


CENTRO STRUTTURE DIDATTICA NOTIZIE INTERNAZIONALERICERCA


Tag cloud

CONDIVIDI | SALVA


AMMINISTRAZIONE

PERSONE

DOVE SIAMO

GOVERNO

DirettoreSegretario amministrativoComitato direttivoConsiglio tecnico-scientifico








english version

Banner per altro contenuto


Home




SERVIZIO 1


HOME



CERCA


COME FARE PER




Tag cloud

CONDIVIDI | SALVA


UFFICI

PERSONE

DOVE SIAMO

NOTIZIE

GOVERNO










Home




SERVIZIO 1


HOME



CERCA


COME FARE PER




Tag cloud

CONDIVIDI | SALVA


UFFICI

PERSONE

DOVE SIAMO

NOTIZIE

GOVERNO











ATENEO

DIDATTICA

vaicerca english versionCORSO DI LAUREA MAGISTRALE CICLO UNICO IN GIURISPRUDENZAA.A. 2012/2013



Tag cloud

IL CORSO MODALITÀ DI ACCESSO INSEGNAMENTI

SCHEDA

REFERENTI

DIDATTICA

ERASMUS

PERCORSI DI ECCELLENZA

PLACEMENT

LAUREA

LoremIpsumDolor est

Il corso > Presentazione

PRESENTAZIONE

Portale Sapienza

VEDI ANCHE

Centro di servizio per la sede pontina (già UORII)Accoglienza degli StudentiAccordi mobilità studentiAccesso tramite il servizio VPN (Virtual Private Network)titolotitolo

PRESENTAZIONE

TITOLO DELLA NOTIZIA TITOLO DELLA NOTIZIA TITOLO DELLA NOTIZIA

Lorem ipsum dolor sit amet, 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesua-da. Lorem ipsum dolor sit amet, 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.

Chi siamoLorem ipsum dolor sit amet, 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Obiettivi e sbocchi professionaliLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. ed 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada.

InternazionalizzazioneLorem ipsum dolor sit amet, 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sistema di assicurazione della qualità Lorem ipsum dolor sit amet, 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. Lorem ipsum dolor sit amet, 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.

Profilo dei laureatiLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada.

Dati statistici sui laureatiLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis hendrerit convallis. Sed mattis nibh vel diam venenatis malesuada.

Sedi

Strutture

LINK UTILI

23. Template Corsi di laurea e laurea magistrale

ATENEO

DIDATTICA






Tag cloud


SCHEDA

REFERENTI

DIDATTICA

ERASMUS


PLACEMENT

LAUREA

LoremIpsumDolor est

Il corso > Tabelle

PRESENTAZIONE TABELLE


Tag cloud


SCHEDA

REFERENTI

DIDATTICA

ERASMUS


PLACEMENT

LAUREA

LoremIpsumDolor est

Il corso > Tabelle

PRESENTAZIONE TABELLE

FOTO

PRIMO ANNO - PRIMO TRIMESTRECanale 1

Aula OrarioInsegnamento


lunedì dalle 10:30 alle 11:15lunedì dalle 11:30 alle 12:15lunedì dalle 12:30 alle 13:15venerdì dalle 08:30 alle 09:15venerdì dalle 09:30 alle 10:15

AULA V - Matematica G. Castelnuovo Scienze Matematiche Fisiche e Naturali




FOTO



IndirizzoDenominazione







Aula 3 - Fisica - "Enrico Fermi" Scienze Matematiche Fisiche e Naturali

PIAZZALE Aldo Moro, 5 - - ROMA (ROMA) presso Fisica - "Enrico Fermi" Scienze Matematiche Fisiche e Naturali, Città universitaria mappa

FOTOCanale 2





INFORMAZIONI SULLE AULE

PRIMO ANNO - PRIMO TRIMESTRECanale 1



08:3009:15

IndirizzoDenominazione

Aula 3 - Fisica - "Enrico Fermi" Scienze Matematiche Fisiche e Naturali

PIAZZALE Aldo Moro, 5 - - ROMA (ROMA) presso Fisica - "Enrico Fermi" Scienze Matematiche Fisiche e Naturali, Città universitaria mappa

INFORMAZIONI SULLE AULE


Lunedì Martedì Mercoledì Giovedi VenerdìOrario







08:3009:15








08:3009:15






08:3009:15




Canale 2



08:3009:15







24. Template Progetti e attività centrali di Ateneo

Home


HOME COLLEZIONI SERVIZI CHI SIAMONEWS

lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum amet consecutur

Esplora i temi delle collezioni

CONDIVIDI | SALVA

Collabora con SDL attraverso stage 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.

LAVORA CON NOI

vai

ULTIMI ARRIVI

NAVIGA

TESTI IMMAGINI VIDEO AUDIO MAPPE 3D SOFTWARE

ESPLORA

Contatti | Posta Elettronica Certificata | Accessibilità | Mappa del sito | Portale sapienza

DONA UNA RISORSACO O S C S OS O U SO SSDL COMMUNITY

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 Scien-ze dello Spettacolo. Diretto dalla prof.ssa Marin...

Composta da 2543 risorse digitaliCopertura temporale: 1971 - 2012

CERCA

Cerca ...Tutti Digital library Website vai RICERCA AVANZATA

Help/FAQ | Login

Lorem ipsum arial bold 8/12pxconsecutur lorem ipsumsit ametconsecutur lorem ipsum consecu-

NEWS

tutte le news

ARCHITETTURAArchitettura brasiliana vista da Carlo Severati

Home > Collezioni


HOME COLLEZIONI SERVIZI CHI SIAMONEWS

Contatti | Posta Elettronica Certificata | Accessibilità | Mappa del sito | Portale sapienza

DONA UNA RISORSAS C S OS O U SO SSDL COMMUNITY O

Help/FAQ | Login

Cerca ...Tutti

Digital library RICERCA AVANZATAWebsite

vai

lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum dolor est sit amet consecutur lorem ipsum amet consecutur

Esplora i temi delle collezioni

CONDIVIDI | SALVA

ULTIMI ARRIVI

ARCHITETTURAArchitettura brasiliana vista da Carlo Severati

COLLEZIONI

TITOLO DELLA COLLEZIONE TITOLO DELLA COLLEZIONE

vai

Per nome Per Istituzione Per temi

dipartimento di storia dell'arte e dello spettacolo (3)biblioteca centrale delle facoltà di architettura (2)biblioteca centrale di ingegneria "g. boaga" (1)biblioteca del dipartimento di fisica (1)biblioteca di scienze statistiche (1)

biblioteca dipartimento biologia ambientale (1)biblioteca dipartimento matematica "guido castelnuovo" (1)biblioteca generale e. barone (1)museo delle origini (1)museo di chimica "primo levi" (1)

Lorem ipsum dolor sit amet, consectetur adipisicing elit,Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

Composta da:2543 risorse digitaliCopertura temporale: 1971 - 2012


vai





vai


vai


vai


vai









Text ARIAL reg 8px


25. Template Base (Laboratori, Master, Corsi di Formazione, Gruppi di ricerca ecc.)

Home




SERVIZIO 1


HOME



CERCA


COME FARE PER


LINK 1 LINK 2 LINK 3 LINK 4 LINK 5 LINK 6 LINK 7 LINK 8


Tag cloud

CONDIVIDI | SALVA

LINK 1 arial bold 10/12px

LINK 4

LINK 5

LINK 2

LINK 6

LINK 3

link 1link 2link 3link 4 link 4link 4link 4link 4link 4link 4link 4link 4link 4link 4link 4link 4link 5link 6








TARGET | SERVIZIO | FAQ

INGOMBRO IMMAGINE

3 5 6 8

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


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.


27. Template Gestionali


Sapienza Università di Roma

Manuale di identità visiva

Linee guida Web Design Versione 01, Marzo 2015

A cura di Cristiana Pagnottelli (www.puntocri.it)

Contributi di Danny Cinalli e Alessandro Petrucci

manuale di grafica digitale (pdf)

Documents