Portfolio Categories: Comunicazione

Tutto ciò che ruota attorno alla comunicazione

menu mockup

Nuovo Template per un menù.

Può un menu essere qualcosa di più di un elenco? Mi sono cimentato in questo progetto, per un menù che possa offrire qualcosa di più al cliente, oltre ad una semplice lista di pietanze e ingredienti.


Premesse

Mi sono ritrovato una sera in un ristorante dove il menù era scritto con Word: un semplice elenco di piatti. Poi ho scoperto che era un progetto momentaneo per arrivare al menù immateriale che ad oggi, causa Covid-19, dovrebbero avere tutti i ristoranti.

Ho preso spunto da questo momento per riflettere sull’utillizzo dei menù nel ristorante e di come potrebbero essere uno strumento molto più utile se progettati con qualche piccola accortezza.

Il progetto (in breve!)

Senza essere prolissi, andiamo al dunque: il menù che ho progettato è formato da alcuni elementi fondamentali. La prima differenza è che non c’è un elenco sterile di piatti e ingredienti , ma un insieme di schede informative.

Elemento del menu

Questa scheda, che è l’elemento singolo del menù da qualche informazione in più rispetto al solito.

Ogni pietanza è indicata da un numero, perché più facile da ricordare rispetto a nomi particolari.

Sotto al nome, abbiamo una riga in cui ci sono alcuni pallini: in quel punto andranno delle icone per indicare se la pietanza è indicata per particolari categorie: celiaci, vegetariani, vegani, intolleranti o se la pietanza è di stagione, a chilometro zero o surgelata. Sulla stessa riga, a destra, andrà il prezzo.

In basso troviamo la lista degli ingredienti che compongono il piatto.

Infine un elemento interessante: uno spazio denominato “Lo chef consiglia”, in cui attraverso i numeri delle pietanze e delle bevande, si potrà consigliare da subito al cliente degli abbinamenti particolarmente azzeccati.

In conclusione

Un piccolo progetto, non troppo elaborato, per dimostrare che basta poco per rendere un elemento spesso troppo statico progettualmente un po’ più interessante e congeniale.

Ovviamente, il menu cartaceo di questa tipologia potrebbe benissimo prestarsi ad una trasposizione immateriale attraverso un menu collegato a qrcode.

Progettazione brochure ReVO per SMAU.

Smart Shaped Software ha partecipato alla SMAU di Bologna e ha chiesto del materiale promozionale. In particolare, la progettazione di una brochure out-of-the-box.


SMAU è l’evento di riferimento nei settori Innovazione e Digitale per imprese ed enti locali. Si tratta di un appuntamento itinerante in cui partecipano molte aziende e start-up.

Proprio per l’alta affluenza, c’era il bisogno di progettare una brochure out-of-the-box.

CONCEPT

Un pilastro del progetto era sicuramente la grafica di ReVO, che avrebbe aiutato a dare al prodotto una buona visibilità grazie ai colori vivaci. Per sorprendere i fruitori, ho deciso di inserire un elemento pop-up all’interno del prodotto. Prevedendo che, nel peggiore dei casi, l’utente non avrebbe tenuto con sé la brochure, ho deciso di integrare al suo interno un biglietto da visita estraibile.

Risultato finale

La progettazione è andata avanti, in stretta collaborazione con Officina Grafica Centro Stampa di Pescara per la gestione dei tagli. Il risultato finale è stato molto apprezzato dagli utenti e ha avuto dei buoni risultati.

Brochure Digitale

A partire dalla brochure cartacea, ho poi adattato i contenuti per una fruizione digitale.

Progettazione brand identity della piattaforma ReVO

ReVo è la piattaforma low-code di Smart Shaped Software. La start-up richiedeva una brand identity individuale per questo software ma strettamente collegata con quella aziendale. In questo articolo mostrerò il risultato della progettazione della nuova brand identity.


Logo

Il logo è stato modificato in modo che potesse essere inserito più facilmente nei vari contesti. Lo “Smart Shaped – blue-green” rimane nella brand identity di ReVO ma è in gradiente con un azzurro. Rimane la texture e vengono aggiunti elementi bianchi in trasparenza insieme a linee tratteggiate.


In basso a sinistra la versione prima del restyling e a destra la nuova versione del logo. Ancora più in basso le versioni in bianco e nero e monocromatica del logo di ReVO e alcuni sample della grafica di ReVO.


Website

La Grafica di ReVO viene utilizzata per caratterizzare la pagina che descrive il software sul sito di Smart Shaped.


Trerus: una guida 2.0 per l’Alta Valle del Sacco.


La Valle del Sacco è un gioiello di storia, cultura e paesaggi bucolici a soli cinquanta chilometri da Roma. Il rovescio della medaglia è che la Valle del Sacco è un Sito di Interesse Nazionale, per l’emergenza inquinamento. Anni di industrializzazione senza controllo hanno creato una vera e propria polveriera sanitaria. Il progetto ha come obiettivo quello di surclassare la fama negativa della valle, proponendo una guida 2.0 alla scoperta di questi magnifici luoghi.



Ricerca

La fase di ricerca è stata a tutto tondo. Ho iniziato dai paesi a cui sono più legato per poi allargare il raggio di azione. Ho cercato e catalogato dei punti di interesse che saranno poi inseriti nella guida.

Altra fase di ricerca è stata quella sulla storia delle guide turistiche e sulle best-practice dei giorni nostri.

Il progetto

Trerus è una guida 2.0 dell’Alta Valle del Sacco, questo significa che dovrà essere all’altezza del suo compito. Le zone da scoprire, spesso non sono coperte da un buon segnale internet e questo significa che il supporto da scegliere dovrà far fronte a questa problematica. Trerus si pone, come già accennato, come uno strumento di promozione territoriale e deve saper offrire all’utenza la possibilità di usufruire di alcuni itinerari tematici già pronti per essere utilizzati. Gli itinerari sono composti da “elementi” che potranno essere di varia natura. In un primo momento si è pensato di seguire una differenziazione tematica degli stessi, ma per una maggiore libertà la scelta è ricaduta sulla seguente differenziazione: luoghi fisici, eventi ed esperienze. Inoltre l’utente dovrà avere la possibilità di modificare parte di un itinerario nel caso non sia di suo gradimento.

Scelta del supporto: le Progressive Web App

Le Progressive Web App sono un ibrido tra un sito web e un’applicazione nativa. Le applicazioni native, quelle che ogni giorno utilizziamo sui nostri devices e scarichiamo dagli store, sono dei programmi che scaricano codice e contenuti sul dispositivo occupando spazio e offrendo all’utente un’esperienza a 360 gradi. I siti web, con l’affermarsi dei dispositivi mobili e delle applicazioni, hanno dovuto in qualche modo stare al passo con i tempi andando a modificare la loro struttura.

Dopo l’avvento del layout responsive dei siti web, l’esigenza di avvicinare il sito ad un’app aumenta progressivamente e in questo frangente troviamo il passo intermedio: le app ibride. Un’app ibrida consente la visualizzazione di un sito responsive all’interno di un contenitore, che crea l’illusione della applicazione nativa.

Le Progressive Web App invece sono completamente crossplatform. Sono dei siti web che non devono essere scaricati da uno store ma può essere aggiunto uno shortcut nella homepage e hanno le sembianze di un’applicaizone. La differenza sostanziale è che, al contrario delle app ibride, scaricano i dati temporanei all’interno della cache del dispositivo utilizzando le nuovissime tecnologie dei browser come i Service Workers e gli Web App Manifests. Nel 2015 vennero presentate dai developers di Google Chrome e proprio grazie a questo ed altri browser e alle nuove tecnologie, oggi possiamo avere delle simil applicazioni, scaricabili da qualsiasi dispositivo semplicemente attraverso uno shortcut sulla homepage.

Progressive web app

Sono Progressive, ovvero funzionano per ogni utente a prescindere dal browser perché sono costruite alla base con principi di miglioramento progressivo;
Sono Responsive perché si adattano a qualsiasi tipologia di schermo per ogni tipologia di dispositivo grazie all’aiuto del team di Google Chrome;
Sono indipendenti dalla disponibilità della connessione poiché i Service Worker consentono di far funzionare l’applicazione offline, in mancanza di connessione o di connessione debole; Sono App-like, ovvero si comportano e si presentano come delle applicazione native in termini di interazione e navigazione;
Sono sempre aggiornate grazie al processo di aggiornamento dei dati offerto dai Service Worker;
Sono sicure grazie al protocollo HTTPS per evitare che la connessione esponga i dati dell’utente o che i contenuti vangano alterati;
Sono facilmente individuabili come applicazioni tramite i browser grazie al Manifesto W3C e al Service Worker;
Sono facilmente ri-attivabili, grazie alla capacità di gestione notifiche push e facilmente installabili grazie alla possibilità di salvare la Url del sito come icona sulla hompage;
Infine sono facilmente divulgabili tramite la loro Url oppure legando l’url a sistemi terzi come beacon, Nfc e Qrcode.
In questo modo Trerus può avere le potenzialità di un sito, la facile gestione dei contenuti e la visualizzazione crossplatform senza dimenticare il coinvolgimento dell’utente con un profilo privato dove conservare i preferiti e le notifiche push.

Struttura dell’app

Il grafico nella parte superiore della pagina mostra la struttura dell progressive app. Quando si entra viene chiesta la registrazione per avere la possibilità di salvare offline e modificare gli itinerari altimenti, si può procedere senza registrarsi ma non si potrà usufruire della parte smart del servizio. la home page è il luogo intorno a cui tutto ruota e poiché è la prima pagina che verrà visualizzata, porterà l’utente nel vivo del servizio proponendo una serie di itinerari, luoghi, esperienze ed eventi in modo da mostrare immediatamente ciò che il servizio può offrire. Sullo stesso livello della homepage ci sono le classiche pagine che servono al sito web: la pagina “progetto” in cui si spiega che cosa è Trerus e il perché della sua esistenza; la pagina “Esplora” che sarà una ricerca approfondita su itinerari o luoghi, eventi, itinerari; la pagina “In Evidenza” dovrà essere il punto di contatto tra la redazione e gli utenti: attraverso questa pagina che si prefigura come un blog, la redazione darà notizie degne di rilievo sia per il servizio sia per presentare novità; la pagina “Contatti” è una pagina dove l’utente può entrare in contatto con la redazione e dove potrà ritrovare gli account social dei vari servizi. Dalla home e dalla pagina di ricerca si potranno visitare le pagine delle esperienze, dei luoghi e degli eventi dove saranno presentati in modo approfondito con dati specifici, contenuti multimediali e collegamenti. Nello stesso modo si potrà entrare nella pagina itinerario, dove si avrà la possibilità di visualizzare l’itinerario con i suoi elementi trattati in modo sommario per dare una visione d’insieme; dalla stessa pagina si potrà accedere alla pagina per modificare l’itinerario che si sta osservando per poi salvarlo e magari ripubblicarlo con un nome differente. In tutte le schermate è presente la navigazione primaria, fondamentale per navigare nel sito: da essa si potrà tornare alla home, entrare nelle pagine del progetto, di esplorazione, dei contenuti in evidenza, dei contatti, nel profilo (dove saranno presenti i nostri preferiti e gli elementi salvati) e fare una veloce ricerca per nome.

Design e Layouts

Material design

Il linguaggio scelto per la progressive app era la prima versione del Material Design. I layouts delle schermate è diviso, come precedentemente spiegato, in una versione desktop e una versione mobile.

Layouts

Grafica

Per quanto riguarda i colori, sono state scelte quattro tonalità molto differenti tra loro. L’Azzurro è il colore primario dell’applicazione e rappresenta Trerus, il fiume e l’acqua. Trerus, che proporrà itinerari, colorerà di azzurro anche questi ultimi. Gli altri tre colori sono stati scelti come rappresentanti di tre tipologie di contenuti: i luoghi fisici, gli eventi e le esperienze.
I luoghi fisici sono rappresentati da un giallo ocra, colore che ricorda le mappe e le pergamene.
Gli eventi sono di coloro rosso, poiché il colore rappresenta la convivialità, il vino e la passione.
Le esperienze sono di colore verde, perché rappresentano la natura e la maggior parte delle esperienze contenute in Trerus riguardano proprio la natura.

La palette dei colori risulta essere molto semplice ed escludendo i colori delle categorie quasi anonima. In realtà proprio la presenza di quattro colori così differenti (quelli della colonna di sinistra) e di fotografie all’interno dell’app, hanno costretto l’utilizzo di un solo colore per l’applicazione con la grande predominanza del bianco. Esclusi, infatti il rosso, il verde ed il giallo, l’app si presenta completamente bianca se non per il colore azzurro (degli itinerari) che colora le icone e viene utilizzato come colore d’accento. L’arancio viene utilizzato per i feedback ed è stato preso dalla libreria del material design: è un colore acceso che tende a catturare l’attenzione ma viene usato in aree molto piccole ed insignificanti per l’occhio dell’utente. i grigi sono utilizzati per le scritte con eccezione del terzo che viene utilizzato per la bottom bar.

Le icone presenti nell’app sono, ad eccezione del logo, tutte icone “di servizio” ovvero quelle icone che indicano un’azione tecnica da svolgere.
Le icone utilizzate si ispirano tutte al material design e sono state modificate per essere utilizzate al meglio all’interno dell’applicazione.

Risultato finale

Come detto in precedenza attorno alla home ruota tutta la progressive app. In alto abbiamo la navigazione principale dove possiamo conoscere il progetto, Esplorare i contenuti in modo ordinato, vedere le news della redazione attraverso un blog e avere i contatti, ricercare nel sito tramite nome ed accedere al profilo. Nella prima parte troveremo alcuni contenuti che ruotano, mentre la parte centrale è tutta per le schede: abbiamo itinerari, luoghi, esperienze ed eventi che la redazione sceglie di mettere nella home. In basso abbiamo un piccolo carosello di foto social prese da instagram grazie all’hashtag #trerusguide.

Nella pagina Esplora possiamo visualizzare itinerari, luoghi, esperienze ed eventi attraverso il sottomenù. Nella progressive app la bottom bar con i suoi tre pallini e l’icona di Trerus formano la parte “Esplora” della progressive app. All’interno di ogni esplorazione si può decidere di visualizzare le schede in differenti ordini (distanza, data di upload, ordine alfabetico).

La schermata itinerario è una schermata che ha due colonne ferme e una, con i contenuti dell’itinerario che scorre in verticale (la prima da destra). In questa pagina si può visualizzare la descrizione dell’itinerario, dei suoi contenuti, si può scaricare offline, modificare, aggiungere ai preferiti, esportare su Google Maps per la navigazione, condividere e visualizzare la mappa.

In seguito vediamo come si visualizza la mappa navigabile (integrazione con Google Maps) e visualizzare un’anteprima degli “oggetti contenuti”. Per chi è più interessato alle notizie storiche e ai contenuti ancor più curati può entrare nella descrizione dell’oggetto.

La schermata di modifica consente di integrare l’itinerario o cancellarne elementi. Questa facoltà appartiene solamente agli utenti iscritti. Come si può notare c’è una piccola differenza. Nella pagina per schermi grandi, i contenuti dell’itinerario (colonna di sinistra) sono blu: questa scelta è dovuta ad un eccesso di colore nella pagina. Altra differenza sta nell’interazione. Nel pc è presente il pulsante sulle schede (sempre colonna di sinistra) per le azioni mentre sullo smartphone viene utilizzato il touch.

La schermata dell’oggetto, è quella che detiene il maggior numero di informazioni: in essa ci sono le informazioni utili, i contatti e molto elementi multimediali. Grazie all’integrazione delle Google Apps, potremmo usufruire di foto, video, foto a 360°, video carboard. In linea con lo sviluppo delle progressive app è prevista anche l’integrazione con la realtà aumentata di Google Daydream.

Il profilo personale consente di avere nel servizio una piccola parte social. L’utente puà inserire un’immagine del profilo, il nome e una breve descrizione. Nel profilo appariranno le azioni volontarie dell’utente (condivisioni) e invontarie (aggiunte ai preferiti e modifiche itinerari).