Grazie alla lunga e proficua collaborazione con Smart Shaped Software, ho avuto la grande occasione di cimentarmi nella progettazione della User Interface di AstraKode Blockchain: una piattaforma low code per la compilazione di software enterprise che implementa differenti metodi blockchain.
Il lavoro con Smart Shaped prima e AstraKode S.r.l. poi, è stato diviso in due fasi principali. La prima in cui ho progettato senza conoscere le basi dell’UX/UI Design ma semplicemente facendo ricerca e basandomi sulla mia esperienza personale. In un secondo momento ho avuto la possibilità di rivedere il lavoro e correggere numerosi aspetti.
Nella gallery, alcune mockup che ho realizzato come linee guida per coloro che hanno poi realizzato la piattaforma.
Sherlock è un validatore di file flat ed ha un nome abbastanza inusuale. Il nome deriva dalla voglia di Smart Shaped Software di vendere questo prodotto attraverso una modalità inedita e innovativa.
Per un validator con un nome così evocativo, non potevo che pensare ad un sito a tema Sherlock Holmes. L’idea è subito venuta ricordandomi della grafica di un libro su Holmes che mi aveva particolarmente colpito. Poiché – si sa – noi designer non inventiamo quasi mai, ma miglioriamo ciò che vediamo (o almeno ci proviamo!), ho deciso di partire proprio da quello stile.
Il sito, in barba ad ogni dettame del marketing tradizionale, si presenta con uno sfondo marrone ed è formato da elementi color panna con accenti rossi. I colori sono stati ripresi da un Tartan tipico della figura del detective.
Il sito associa ai contenuti una chiave di lettura tipica della figura di Sherlock Holmes. Attraverso la risoluzione del delitto, è possibile fare una panoramica su ciò che offre Sherlock come validator di file flat.
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.
La mia esperienza di tirocinio curriculare nell’azienda romana Farosoft Srl è stata illuminante. Per la prima volta, ho potuto gestire la creazione di un layout per essere effettivamente, in seguito, realizzato. Il sito di Farosoft era, proprio in quel periodo, in fase di estremo cambiamento e il compito che mi è stato affidato è stato quello di riadattare alla versione mobile il sito desktop già realizzato.
Per questa operazione ho iniziato, sotto la supervisione del mio tutor Giulia Santucci, ad utilizzare una risorsa che oggi mi è assolutamente indispensabile per la creazione di mockup: Adobe XD.
Il primo passo è stato quello di individuare una griglia da rispettare il più possibile, per inserire i vari contenuti.
Dopo aver deciso la struttura della griglia ho trasposto tutti gli elementi creando un layout che poi ho sempre seguito, formato da alcune misure standard. La cosa interessante, è che tramite Adobe XD, c’è la possibilità di vedere in tempo reale il proprio lavoro sulla companion app sullo smartphone android. Questo ha consentito, di gestire le misure dei vari elementi per poi dare delle linee guida più specifiche possibili ai programmatori.
Ovviamente tutto ciò che è contenuto all’interno del sito (icone, illustrazioni, decisioni grafiche) non è, purtroppo, farina del mio sacco. Nonostante ciò, ho avuto la possibilità di dare il mio contributo con ben due delle illustrazioni presenti, che riprendono lo stile di quelle già progettate.
Alcune illustrazioni per Farosoft
Per vedere il risultato finale del lavoro, potete visitare il sito web di Farosoft cliccando qui sotto!
L’applicazione Flora, che fa parte del progetto più ampio GreenRoads, ha come obiettivo quello di promuovere il turismo in zone di Roma che non vengono toccate dalla massa di turisti che ogni anno visitano la capitale italiana e che racchiudono in sé quelle peculiarità che stanno svanendo nelle zone ad alta affluenza turistica. Un altro obiettivo dell’applicazione è quello di promuovere anche il turismo interno: molti cittadini romani non trovano motivazione a visitare luoghi particolari appena fuori dal centro romano perdendo la possibilità di conoscere a fondo la propria città, o fermandosi ai soliti stereotipi sulle periferie.
Riscoprire la natura, nei parchi della città
Attraverso Flora. è possibile scoprire un lato inedito della città: l’applicazione vi accompagnerà nei parchi e nelle ville del Municipio V di Roma alla scoperta delle piante che si trovano proprio in quei luoghi, svelandone proprietà e curiosità per capire quanta ricchezza ci sia anche in una città. Inoltre l’applicazione promuove le piccole realtà locali attraverso dei suggerimenti che inlcudono la promozione del bike sharing e la promozione enogastronomica romana.
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.
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
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.
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).
