2

Roberto Falcone, aka “Bob”,

è uno User Experience Designer

con un background ibrido

allʼincrocio tra tecnologia,

design, psicologia e business.

Negli anni ho lavorato per diverse agenzie creative e studi di design, dove ho seguito progetti strategici di design per startup e clienti internazionali di alto profilo. Attualmente lavoro in Musement, start-up che ha l’ambizione di rivoluzionare il settore travel, dove seguo e coordino tutte le fasi del processo di User Experience Design.

robertofalcone

// Ex designer di Sketchin

// Collaboratore @ PoliDesign

// Insegnante @ TAG Innovation School

// Membro della giuria @ CSS Design Awards

// Fondatore di UXers

LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S

3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

Significativo

Piacevole

Conveniente

Usabile

Disponibile

Funzionale

4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

Lo UI design consiste quindi nel livello di comunicazione visiva composto da: declinazione del logo, palette colori, tipografia, icone, illustrazioni, contributi video, animazioni, immagini sottoposte a trattamento fotografico.

Lo UI design (acronimo di User Interface design) è una parte del processo di UX design che si occupa prettamente degli aspetti legati presentazione visuale di un prodotto digitale.

6

Comunicare correttamente i valori dell’identità aziendale

NARRAZIONE

Guidare l’utente all’interno dell’interfaccia evidenziando

contenuti ed elementi interattivi

FUNZIONE

UI DESIGN

E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

Rispettare i limiti e e opportunità tecnologicheINTEROPERABILITÀ

7E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

8

In che modo è possibile trasmettere i valori e

l’identità di un brand all’interno di una UI?

TOPIC #1

LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S

9E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

È un modello di rappresentazione dell’identità di un brand, che parte dal presupposto che un prodotto o servizio deve rappresentare le idee esclusive e i valori dell’identità del brand stesso.

È rappresentato come un prisma a sei facce, ognuna della quale descrive una sfaccettatura diversa che il brand intende trasmettere e di cui una UI deve farsi ambasciatrice.

PRISMA DI KAPFERER brand

1 0E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

1 1E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

1 2E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

1 3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

1 4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

1 5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

1 6

Quali sono le strategie da adottare per

ottenere sempre coerenza e consistenza

di una UI su tutti i dispositivi di fruizione?

TOPIC #2

LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S

1 7LA TRANSIZIONE DALLA UX ALLA UI

DESIGN SYSTEM

E X P L O R E T A L K S

E X P L O R E T A L K S

DE-VICES

FRAG- ME-NTATION

LA TRANSIZIONE DALLA UX ALLA UI 1 8

1 9E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

COLORI GRIGLIE TIPOGRAFIA UI COMPONENTS

UI TOOLKIT

2 0E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

2 1E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

2 2

Stephen Hay

We are no longer designing pages, we are now

designing complex systems of components.

LA TRANSIZIONE DALLA UX ALLA UIE X P L O R E T A L K S

Principal UX Design Lead @catawiki

2 3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

ATOMIC DESIGN

2 4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

ATOMIGli atomi sono le unità mimime che costituiscono i blocchi di materia.

Nel caso delle User Interface sono ad esempio i tag, le label, gli input o un bottone.

2 5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

2 6E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

MOLECOLELe molecole sono gruppi di atomi e sono la più piccola unità fondamentale di un insieme di elementi.

Le molecole posseggono delle loro peculiari proprietà e sono le unità base del design system.

2 7E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

ORGANISMIGli organismi possono consistere in uno o più tipi diversi di molecole.

La transizione da molecole a organismi organizza la creazione di componenti portabili, ricusabili e autonomi.

2 8E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

ECOSISTEMIGli ecosistemi (o template) consistono di gruppi di organismi che lavorano assieme per dare vita ai diversi layout di pagina.

2 9E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

AMBIENTIGli ambienti (o pagine) sono specifiche istanze degli ecosistemi e formano il livello più alto di astrazione delle interfacce.

3 0E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

Lonely Planet

E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI 3 1

3 2LA TRANSIZIONE DALLA UX ALLA UI

CASESTUDIES

E X P L O R E T A L K S

3 3E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

GOOGLE MATERIALDESIGN LANGUAGE

Il material design un linguaggio visuale con cui Google assicura coerenza e riconoscibilità visivi ad ogni prodotto digitale che compone la sua galassia.

3 4E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

GOOGLE MATERIALDESIGN UI TOOLKIT

3 5E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

SPOTIFY GLUE

La frammentazione delle interfacce che Spotify ha dovuto fronteggiare ad un certo punto della sua vertiginosa crescita, è stata evitata grazie alla progettazione di un design language chiamato GLUE (Global Language for a Unified Experience).

3 6E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

SPOTIFY GLUE PRINCIPLES

GLUE oggi documenta stili, componenti e pattern

ed è accessibile ad ognuno all’interno dell’azienda.

Il processo di redesign di Spotify attraverso GLUE è iniziato attraverso la definizione di alcuni principi guida che hanno allineato le diverse influenze di design all’interno del team e si sono fatti portatori delle diverse vision dei team aziendali.

3 7E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

3 8

Il nuovo progetto di riprogettazione dell’identità visiva di AirBnb è uno degli esempi più significativi degli ultimi anni di costruzione di un design language efficace, riconoscibile e scalabile.

I valori del brand sono ottimamente rappresentati su tutti gli artefatti digitali e non.

NEW AIRBNB BRANDING

E X P L O R E T A L K S LA TRANSIZIONE DALLA UX ALLA UI

4 2

G R A Z I E

LA TRANSIZIONE DALLA UX ALLA UI

robertofalcone

bob@robertofalcone.it

E X P L O R E T A L K S