UI Design Workshop Open Night - UI Design Master - Talent Garden
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
UI Design Workshop
Open Night
Milan, 2018 UI Design
Master
Fabrizio Soldano Brand + Communication Director Sketchin fabrizio.soldano@sketchin.ch @fabsoldano @fabsoldano
Service Designer Interaction Designer
Interaction Designer
Visual Designer
Architect
Interaction Designer Visual Designer
90’ workshop
25’ UI: introduzione/ripasso 65’ UI: esercitazione
1. Introduzione
UX vs. UI1. Introduzione
" There is no difference
between UX and UI design
because they are two things
that aren’t comparable to each other.
Craig Morrison
Head of Product at RecordSetter,
Founder of Usability HourThis is UI
This is UX
1. Introduzione
" UI is the bridge that gets us
where we want to go.
UX is the feeling
we get when we arrive.
Jason Ogle
Host and producer,
User Defenders podcast1. Introduzione
Da dove partire?Microsoft Music Claudio Guglieri – guglieri.com
2. Recap
Quick UI recap
1 Colore
2 Immagini
3 Tipografia
aColore
2.1. Colori
TIPOLOGIE COLORI IN UI
1 Primari
Colori di brand, set essenziale (da 1 a 3)
2 Secondari
Usati per enfatizzare azioni ed emozioni
3 Semantici
Usati per come avvertimento e feedback
4 Neutrali
Testi, container, icon system2.1. Colori
Colori Primari
Un colore primario è il colore
più presente nelle schermate
del nostro design.
Solitamente è caratterizzato
dai colori del brand.
Google Material Design2.1. Colori
Un colore primario:
• è il colore più presente
• può creare contrasto tra
i diversi elementi
• può essere usato come accento
• aiuta la scansione gerarchica
degli elementi nel nostro layout
Google
Material Design2.1. Colori
Approfondimento
https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-
framework-e18cacd97f9e2.1. Colori
Colori Secondari
Un colore secondario è usato per
evidenziare alcuni elementi nella UI.
È opzionale se si usa un colore
primario per dare gli accenti
nella palette.
Google Material Design2.1. Colori
Un colore secondario:
• deve essere in contrasto
con i colori che lo circondano
• deve essere usato
con parsimonia nel layout
Google
Material Design2.1. Colori
60-30-10 Model
Modello usato nell’interior design
è caratterizzato dall’usare:
• un colore primario al 60%,
• un colore “sub-primario” al 30%
• Un colore d’accento al 10%2.1. Colori
Colori Semantici
I colori semantici si basano sulle
ricerche della psicologia del segnale.
• Rosso per errore, pericolo, sbaglio
• Verde per successo, sicurezza ed
esattezza
• Giallo per allerta, cautela e
avvertimento
• Blu per informazione2.1. Colori
Colori Neutrali
Il bianco, il grigio e il nero sono colori
che sono tendenzialmente usati
per testi e per background.
Sono colori che sembrano “invisibili”
ma sono molto importanti nell’equilibrio
della pagina.
Un designer può avvalersi di questi
colori per dare un “ritmo” al design del
prodotto o servizio.2.1. Colori
color.adobe.com2.1. Colori
https://material.io/tools/colorImmagini
1. Introduzione
" Imagery is more than decoration.
It’s a powerful tool to help you communicate
and differentiate your product.
Material Design
Google2.2. Immagini
1.
Usa medium
differenti tra loro
Le immagini devono essere chiaramente legate
alla value proposition di un prodotto.
Fotografie e illustrazioni possono essere entrambe
efficaci per motivazioni differenti.2.2. Immagini
Google Material Design2.2. Immagini
Dropbox2.2. Immagini
Airbnb2.2. Immagini
2.
Concentrati sul focus
dell’immagine
Quando un focus non è chiaro, la qualità iconica
dell’immagine è completamente persa.
L’utente non deve perdere tempo nel cercare
il significato di un’immagine.2.2. Immagini
Material Design2.2. Immagini
Airbnb2.2. Immagini
3.
Cerca di evitare
le «foto di stock».
L’utente sa distinguere la finzione dalla realtà.
Quando un foto risulta finta, l’utente la cataloga
come rumore visivo.2.2. Immagini
Material Design2.2. Immagini
unsplash.com2.2. Immagini
4.
Evita immagini
a bassa risoluzione.
Oggigiorno i devices ad alta risoluzione
stanno diventando uno standard.
La risoluzione è il fattore più importante
nel caricamento veloce di un’immagine.2.2. Immagini
Material Design2.2. Immagini
2.2. Immagini
2.2. Immagini
Material Design2.2. Immagini
Material Designa Tipografia
2.3. Tipografia
2.3. Tipografia
2.3. Tipografia TIPOLOGIE TYPO IN UI 1 Headings 2 Subtitles 3 Body 4 Button / CTA 5 Caption / Overline
2.3. Tipografia 1. Heading Le headlines, o titolazioni, sono i testi più grandi nel nostro layout e riguardano paragrafi corti, con contenuto importante o numeri. Solitamente viene scelto un range che va da 1 a 6 pesi carattere.
2.3. Tipografia 1. Heading Le headlines, o titolazioni, sono i testi più grandi nel nostro layout e riguardano paragrafi corti, con contenuto importante o numeri. Solitamente viene scelto un range che va da 1 a 6 pesi carattere.
2.3. Tipografia 2. Subtitles Le Subtitles, o sottotitoli, sono più piccole delle headlines. Sono solitamente usate per testi con enfasi inferiore rispetto alle titolazioni e di conseguenza con un numero di carattere inferiore. Funzionano bene sia con font serif che con font sans serif.
2.3. Tipografia 2. Subtitles Le Subtitles, o sottotitoli, sono più piccole delle headlines. Sono solitamente usate per testi con enfasi inferiore rispetto alle titolazioni e di conseguenza con un numero di carattere inferiore. Funzionano bene sia con font serif che con font sans serif.
2.3. Tipografia 3. Body Body, o corpo testo, viene usato solitamente per quei paragrafi che assumano una forma più estesa. Questi testi funzionano bene con un corpo carattere piccolo e, se il paragrafo è molto lungo, è meglio usare un font serif.
2.3. Tipografia 4. Caption / Overline Caption e overline sono i testi con il corpo carattere più piccolo. Sono usati con parsimonia come annotazioni ad un’immagine oppure per introdurre una headline.
2.3. Tipografia 4. Caption / Overline Caption e overline sono i testi con il corpo carattere più piccolo. Sono usati con parsimonia come annotazioni ad un’immagine oppure per introdurre una headline.
2.3. Tipografia 5. Button Il Button Text è una CTA usata in tipi differenti di bottoni (solo di testo, in outline oppure pieni) Questo testo può essere usato anche nelle tabs, dialogs e cards.
2.3. Tipografia 5. Button Il Button Text è una CTA usata in tipi differenti di bottoni (solo di testo, in outline oppure pieni) Questo testo può essere usato anche nelle tabs, dialogs e cards.
Esercitazione Design di una Moodboard UI Approach
3. Moodboard
Cos’è una
Moodboard?
La moodboard è un collage prevalentemente di
immagini, colori e font, utili a descrivere la direzione
stilistica che il progetto dovrà seguire.3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard
3. Moodboard Tema 1. Hypochondriapp Hypocondriapp è il vincitore dell'ultima edizione del STUPID SHIT NO ONE NEEDS & TERRIBLE IDEAS HACKATHON. Hypocondriapp, un motore di ricerca per ipocondriaci. Date le crescenti visite sul sito, i creatori vogliono spostarsi su una app mobile. Come sarà il loro Visual Language?
3. Moodboard Tema 2. BelloFigo E-Commerce La fama del rapper ghanese pare non fermarsi mai. Dopo i successi di «Pasta con Tonno» e «Non Pago Affitto» Bello Figo vuole lanciare il suo merchandising ufficiale tramite un e-commerce. Siete abbastanza SWAG per questa sfida progettuale?
3. Moodboard Tema 3. Catflix È un dato di fatto. Internet adora i gattini. Per questa ragione, un gruppo di giovani imprenditori russi, ha deciso di progettare un servizio di streaming online che trasmetta solo video, meme e documentari in ambito felino. Come ci differenziamo dai competitors?
4. Utilities
( ◕ ◕) *: ✧
Link to download the slides
bit.ly/vivalaui4. Utilities
Colors Stock Photos
http://colorhunt.co/ https://unsplash.com/
https://color.adobe.com http://www.gratisography.com/
https://material.io/ https://www.stocksy.com/
https://coolors.co/ https://www.pexels.com/
http://labs.tineye.com/ https://stock.adobe.com/it/
http://www.colorzilla.com/ http://zoommyapp.com/
http://colicious.ga/ http://nos.twnsnd.co/
http://palettegenerator.com/ https://www.splitshire.com/
http://www.pictaculous.com/ http://deathtothestockphoto.com/10% Discount Code: OPEN18
4. Utilities
(⊙ω⊙✿)
Please, rate this workshop!
bit.ly/UIworkshopThank you
fabrizio.soldano@sketchin.ch
@fabsoldano
@fabsoldano
Innovation School
innovationschool.talentgarden.org
© All rights reserved Innovation SchoolPuoi anche leggere
