Around Bari

| 1 / 22

Il concept

AROUNDBARI

Identità visiva

AROUND BARI | IDENTITÀ VISIVA | 1 / 22 moh / visual & product design

Il concept

La progettazione dell’identità visiva del progettoAround Bari è partita dalla realizzazione del suo logo, il quale riassume visivamente quello che è lo scopo essenziale del servizio offerto: guidare per la città turisti e cittadini tramite una piattaforma web collegata a pannelli informativi, fornendo loro indicazioni su come raggiungere i punti di maggiore interesse e informazioni approfondite sui principali beni della città.


Riferimenti visivi

- MARKER MAPPE -

+

- LINEA ITINERARIO -

Per la progettazione grafica del logo siamo partiti da due componenti base delle odierne mappe digitali ossia il marker e la linea che traccia l’itinerario da seguire per raggiungere una destinazione.


Il disegno finale

FRECCIA E LINEAITINERARIO COMPOGONO LA FORMA

FORMA TOTALE E CERCHIO BIANCO

RICHIAMANO AI MARKER DELLE MAPPE


Applicazione del logo

Pannello P.za del Ferrarese vista totale

Pannello Palazzo Tanzi dettaglio

Interfaccia web

moh / visual & product design

Il concept

AROUND BARI | INTERFACCIA WEB | 5 / 22

Per il servizio Around Bari abbiamo realizzato un’interfaccia responsive (che si adatta al tipo di dispositivo su cui viene visualizzata) dall’aspetto moderno e dalle semplici modalità di utilizzo, così da rendere maggiormente fruibili le schede e i loro contenuti, completi e approfonditi su più piani.

moh / visual & product design| 6 / 22 AROUND BARI | INTERFACCIA WEB

Stile illustrato

Abbiamo scelto di utilizzare uno stile illustrato in quanto rappresentazione semplificata della realtà, in modo da risolvere le problematiche di comprensione che scaturiscono dalle differenze linguistiche, rendendo subito riconoscibile nella realtà un determinato elemento pur mantenendo una originalità stilistica.


Casi studio

La scelta di uno stile illustrato nasce dall’analisi di casi studio di magazine/siti quali Zero, Wired, Meet My Barcelona che hanno fatto delle illustrazioni il loro elemento chiave di riconoscibilità.

moh / visual & product design

Il concept

| 8 / 22 AROUND BARI | INTERFACCIA WEB

Meet My Barcelona illustrazione per piattaforma turistica, KHUAN+KTRON studio


Zero Magazine mappa illustrata di Milano, La Tigre studio


Illustrazione homepage


Illustrazione homepage

Pulsanti animati


Homepage smartphone

RAIZLABS 12:45 PM 100%

- PULSANTE SEZIONE 1 - - PULSANTE SEZIONE 2 -

moh / visual & product designAROUND BARI | INTERFACCIA WEB | 12 / 22

Homepage smartphone

RAIZLABS 12:45 PM 100%

- PULSANTE SEZIONE 3 - - PULSANTE SEZIONE 4 -


Le illustrazioni dei singoli monumenti sono state successivamente semplificate in forma di icone, mantenendo invariata la loro riconoscibilità, ottimizzandone la visualizzazione su schermi di diverse dimensioni e su diverse piattaforme.

Icone sito

- ICONA PER SEZIONI - - ICONA PER MAPPA -

Interfaccia web

Interfaccia weblivello di approfondimento 1

Ad un primo livello di approfondimento si troveranno un testo di descrizione sintetica del bene con in evidenza le informazioni principali e fondamentali (come ad esempio l’anno di costruzione e lo stile architettonico), e quattro pulsanti di accesso veloce.


Tasto INFOmostra info base

quali indirizzo,orari, contatti


Tasto TIMELINE mostra eventi

chiave suddivisi cronologicamente

e per categoria (storia, arte, cultura)


Tasto VICINO A mostra i puntidi interesse più vicini a quello selezionato, divisi per categoria(chiese, palazzi, vie e piazze, monumenti)


Tasto PORTAMI aprirà nell’applicazioneMappe il percorso utile a raggiungereil POI selezionato

moh / visual & product design| 18 / 22

campo di DESCRIZIONE

breve e informazioni

chiave

AROUND BARI | INTERFACCIA WEB

Interfaccia weblivello di approfondimento 2

Al secondo livello di approfondimento saranno presenti tre schede composte da testo e immagini: • storia • arte e architettura • cultura popolare

AROUND BARI | IDENTITÀ VISIVA moh / visual & product design| 19 / 22

ARCHITETTURA

STORIA

CULTURA POPOLARE


Il conceptSpecifiche tecniche

moh / visual & product design| 20 / 22 AROUND BARI | SPECIFICHE TECNICHE

Tecnologia

Around Bari utilizza le più diffuse e consolidate tecnologie web:

• Backend personalizzato, in php puro per l’inserimento e la gestione dei POI, presentazione dei contenuti tramite webservice e reindirizzamento dinamico dei qrcode.

• Frontend basato su Tecnologia Wordpress, standard de facto per la realizzazione di siti stabili e sicuri.

• Database ER basato su tecnologia MySql, potente e facile da gestire.

Tutte le tecnologie elencate sono open source come predisposto dalle regolamentazioni vigenti.


Future proof

La piattaforma Around Bari è stata pensata per poter far fronte a sviluppi e necessità future:

• Aggiunta dinamica di nuove lingue

• Versionig delle descrizioni: si potranno creare per uno stesso poi schede con diversi contenuti ma con la stessa lingua, per permettere alla piattaforma di servire più progetti con scopi differenti.

• Access control sui contenuti multimediali


Piattaforma open

Tutto il database di Around Bari è a disposizione dei cittadini tramite Webservice, questo permetterà a sviluppatori di accedere ai contenuti di Around Bari, per arricchire le proprie creazioni

• Paradigma open data

• Webservice gratuito per gli sviluppatori

• Possibilità di arricchire e sviluppare siti web e applicazioni che promuovono Bari e la terra di Puglia

Maggiori informazioni su http://www.around.bari.it/api/


Il concept

Grazie.

Design

Around Bari