DOCUMENTAZIONE

Abstract

“Mary&the Beast” nasce come sito per promuovere e far conoscere il gruppo musicale formato da Andrea Vandini e Maria Sofia Galiano ad un pubblico più ampio. Il sito si propone quindi di creare uno spazio intimo ma allo stesso aperto a coinvolgere più persone (nuovi ascoltatori e fan consolidati) con una serie di contenuti inediti e non reperibili sulle piattaforme social già attive della band. Costruendo una sorta di piccolo diario di viaggio degli eventi che ci hanno portato a fare musica, il sito si propone di intrare in contatto più da vicino con i suoi utenti, attraverso il racconto delle esperienze che hanno portato alla composizione delle canzoni del gruppo.

1. Benchmarking

1. Obbiettivi

L’obbiettivo del sito web è quello di far conoscere la band “Mary&the Beast” al di fuori della ristretta cerchia di amici di paese, mettendo a disposizione le canzoni prodotte, gli eventi a cui abbiamo partecipato e una speciale pagina di diario in cui condividere col pubblico le esperienze di vita che ci hanno portato a scrivere i nostri brani.

2. Target utente

Il sito si rivolge da un lato agli appassionati di musica, curiosi di scoprire canzoni nuove di band emergenti; dall’altro al nostro piccolo gruppo di fan, coltivato da qualche tempo attraverso le pagine social. A loro in particolrare, si tenta di offrire un spazio nuovo in cui trovare contenuti inediti, non disponibili sulle altre piattaforme.

3. Competitors

Fra i siti scelti come competitors vi sono il sito ufficiale di Elisa Toffoli vicina alla band per genere musicale e il sito degli Imagine Dragons interessante per le scelte grafiche adottate.

2. Struttura e Layout

1. Architettura del sito

3. Look and Feel

L’obbiettivo di partenza del sito era di creare un ambiente che fosse innanzitutto piacevole da navigare. Dal punto di vista grafico infatti, il tamplate costruito, cerca di riportare il lettore dentro un atmosfera romantica, in cui fanno da sfondo quelle che vengono proposte come una serie di pagine di diario, pronte ad essere sfogliate sotto il cielo di una notte stellata. Sono proprio queste due immagini: quella della carta e del cielo notturno ad aver quindi costituito la base per la creazione della palette di colori del sito che ripropone prevalentemente i toni del blu scuro e del grigio-bianco per l’effetto diario. Per la scelta precisa di alcune tonalità del testo è stato utilizzato inoltre, il tool Adobe Color da cui in particolare è stato selezionato il grigio delle citazioni (#424147) e il blu degli hover nella navbar (#212529;)

Per quanto riguarda i font, ho selezionato dalla libreria di Google fonts: "Noto Serif KR" per gli articoli nella pagina di diary allo scopo di emulare tramite le sue grazie non troppo marcate, la scrittura a mano e riportare meglio il lettore nell'atmosfera del sito. Per i titoli, seguendo lo stesso ragionamento,ho scelto il “Marcellus” mentre per gli altri testi, al fine di non inficiare troppo sulla leggibilità, ho optato per un font san-serif “Poppins” semplice ed elegante, facile da scorrere con gli occhi.

3. Linguaggi e Strumenti

Linguaggi: HTML, CSS e JavaScript.

Strumenti: Ho utilizzato la libreria di Bootstrap per costruire il sito, Google Fonts per abbinare i caratteri, Fontawesome per le icone, Github per la pubblicazione e Google Analytics per la valutazione degli obiettivi. Ho utilizzato inoltre il sito Unsplash per la ricerca di immagini senza copyright e il tool Canva per la modifica e la creazione degli sfondi del sito a partire dalle stesse. Il tool Adobe Color infine, è stato scelto per la creazione della palette.