MIGRA #02 - Manuale Sito web

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