Manuale d’uso del Sito web
Leonardo Brambilla Giulia Fabbi Dana Kabargina Pasquale Morelli
Sito web
> Concept > Albero di navigazione > Griglia e dimensioni > Home page > Altre pagine > Navbar > Downbar > Sito mobile > Social > Font > Icone
3
Concept
Il sito web nasce dall’esigenza dI MIGRA di ampliare l’esperienza propria e dei propri visitatori, nel mondo digitale e in rete. Si propone di essere un portale attraverso cui il visitatore può reperire informazioni utili, navigare tra i contenuti del museo e scoprire notizie e curiosità riguardanti gli eventi, i servizi e le mostre organizzate. Il sito rispecchia i valori del museo MIGRA,la semplice costruzione delle sue pagine permette all’utente di esplorare con facilità i contenuti, ma è anche dinamico, con un menù tendina, slideshow per la fruizione di conenuti digitali e un marchio che cambia in una delle sue tre varianti ad ogni refresh. Permette di interagire sia con il museo, tramite il MIGRA store ed il servizio di booking per la prenotazione di mostre, eventi e workshop, sia con l’applicazione, attraverso l’icona dei preferiti, e le pagine social, grazie all’area social situata nella bottombar e al #JoinMIGRA. 4
Albero di navigazione
5
Griglia e dimensioni
La griglia strutturale del sito web prevede una costruzione semplice e variabile, applicata a seconda del contenuto presente al suo interno. Per quanto riguarda le pagine contenenti i testi principali, è stata adottata una griglia formata da due colonne. Mentre per i testi secondari, è stata adottata un layout composto da una sola colonna, in modo da distribuire i contenuti in blocchi che si sviluppano orizzontalmente.
6
Per quanto riguarda le pagine riguardanti gli orari, le tariffe o le brevi descrizioni, è stata utilizzata una griglia composta da tre colonne, all’interno delle quali distribuire i contenuti di riferimento.
245px
230px
1200px
245px
200 px
600 px
100 px
1350 px
100 px 70 px 170 px 50 px 100 px 50 px
7
Home page
Per mostrare in modo semplice gli eventi in corso e futuri. La home page è studiata per permettere all’utente di accedere in modo facile ed immediato alle diverse mostre ed eventi attualmente in corso e in programma, proposti dal museo. Tramite un semplice scroll è possibile scorrere tra i contenuti speciali del museo, scoprire ed interagire con il mondo MIGRA, accedendo alla sezione #JoinMIGRA, scaricando l’applicazione per smartphone e tablet o iscrivendosi alla newsletter. Inoltre l’utente ha anche la possibilità di salvare gli eventi che ritiene più interessanti tra i preferiti e ritrovarli nella propria area personale dell’app. 10
11
Altre pagine
Le altre pagine permettono di accedere alle funzionalità in modo immediato Nelle altre pagine sono presenti pulsanti ed icone che consentono di compiere attività fondamentali dalla pagina stessa. E’ possibile infatti prenotare eventi, workshop e laboratori per bambini cliccando sull’apposito pulsante “prenota” oppure acquistare i biglietti grazie all’opzione “acquista” o ancora salvare ciò che interessa tra i preferiti, cliccando semplicemente sull’icona .
12
E’ possibile anche reperire le informazioni utili riguardanti gli orari di apertura e di chiusura del museo e dei servizi che mette a disposizione, come il MIGRA store o il MIGRA cafe, ma anche per quanto riguarda il prezzo di workshop, eventi e dei biglietti delle mostre. Vi è anche delle apposite sezioni dove viene mostrato come è possibile raggiungere il museo e quali sono i contatti di riferimento per ogni sua area.
Navbar
La Navbar contiene il menu del sito web ed è situata in alto ad ogni pagina. Scorrendo in giÚ per visualizzare i contenuti della pagina, essa si restringe, ma rimane costantemente visibile nella parte alta della schermata. Passando con il mouse sopra al nome delle sezioni, queste si colorano di viola, mentre la navbar si allunga, mostrando le diverse sottosezioni della sezione di riferimento. Ad ogni refresh il logo cambia mostrando le tre diverse versioni.
16
Bottombar
La Bottombar è posizionata in fondo a tutte le pagine del sito. All’interno di essa si trovano le informazioni riguardanti il luogo ed i contatti (telefono, mail) riguardanti MIGRA, insieme ad un’apposita area social. Inoltre, è possibile svolgere delle rapide ricerche tramite la sezione “cerca nel sito”. In essa vengono mostrate le info legali e gli sponsor del museo.
17
Font
Il sito web fa uso di una sola font: Azo Sans. Essa viene declinata nei suoi pesi e dimensioni di utilizzo, in base al contesto di riferimento. Navbar 28 pt _Regular
Titoli delle sezioni 60 pt _Medium
Azo Sans
Titoli di paragrafo 36 pt _Medium
Azo Sans
Testi 24 pt _Regular 48 interlinea
18
Azo Sans
Azo Sans
Icone
Nel sito vengono utilizzate icone dal design semplice ed intuitivo attraverso le quali l’utente può ampliare la propria esperienza all’interno di MIGRA. L’icona di ricerca, con relativa barra dedicata, utile per effettuare ricerche all’interno del sito web. L’icona ‘shop’ che rimanda al MIGRA Store e l’icona dei preferiti, a forma di cuore, con cui è possibile salvare i contenuti che interessano nell’apposita sezione dedicata, all’interno dell’applicazione. Le icone social, attraverso le quali è possibile accedere rispettivamente ai canali Facebook, Instagram e Twitter di MIGRA
19