�ݺ�ߣ

Sketch per la
prototipazione
Edoardo Sportelli per

Differenza tra popup e modal

Questi elementi hanno nomi diversi a seconda
dell'attenzione che hanno, del contesto in cui ci si
trovano e di come è possibile interagire con loro

1. Alert
A. C’è qualcosa che non va. Appare quando le aspettative
dell’utente non corrispondono alle aspettative
dell’interfaccia.
B. I pulsanti di questa finestra di solito sono "Ok" o “Annulla”.
C. Il contenitore/finestra è di solito bloccato, ovvero che non è
possibile rimuovere il contenitore/finestra cliccando fuori.
D. Devi essere subito chiaro quello il suo contenuto e che
bisognare premete sul bottone prima di poter procedere.
fonte: Harrison Shoff, Design engineer at Airbnb su https://www.quora.com/Whats-the-difference-between-a-modal-a-popover-and-a-popup

1. Modal 
Permette di fare più lavoro senza avere
mostrato tutto il lavoro in anticipo. Questo tipo
di messaggio non è bloccato e bloccante. Basta
cliccare ovunque per chiudere il contenitore/
finestra e continuare la tua navigazione.

1. Popup 
Questi sono gli assholes della UI Design in
questa categoria. Dicono "Ehi, sono qui ora.
Continua pure a fare quello che stai facendo, ma
non me ne vado finché non dici che non mi vuoi
più"

1. Popover, Tooltip, Hovercard 
Sono approcci passivi per mostrare ulteriori
informazioni. Forse non sei molto sicuro di quale
intenzione sia l’utente quindi
fondamentalmente il contenitore/finestra dei
toolkit prevede che cosa succede se fai clic sul
link.

Come importare da Photoshop

Questo processo richiede Photoshop e Illustrator e
consiste nel estrapolare le sag dai livelli.
fonte: https://designcode.io/sketch

“Flip”

Responsive Web design è un approccio per il quale
la progettazione e lo sviluppo di un sito
dovrebbero adattarsi al comportamenti e
all’ambiente degli utenti a seconda della
dimensioni dello schermo, della piattaforma e
dell’orientamento del device.
fonte: https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

Responsive Web Design riguarda quindi come
ridimensionare, nascondere, restringere, ingrandire
e muovere i contenuti per renderli ottimali per ogni
schermo.
fonte: https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

Ethan Marcotte, 2010

https://alistapart.com/article/responsive-web-
design

7 obiettivi

1. Adattare il layout al più ampio numero di
risoluzioni di schermo possibile (dai telefoni
cellulari al desktop)
fonte: http://www.html.it/pag/32821/cose-il-responsive-design/

2. Adattare le dimensioni delle immagini (e in
genere di tutti i contenuti a larghezza fissa) alla
risoluzione e alle dimensioni dello schermo

3. Servire immagini ‘meno pesanti’ ai dispositivi
che non possono sempre sfruttare la banda larga

4. Semplificare il layout degli elementi presenti
sulla pagina per i dispositivi mobili con schermi
piccoli

5. Nascondere gli elementi non essenziali su questi
stessi dispositivi

6. Fornire un’interfaccia adatta all’interazione
touch per i device che la supportano

7. Individuare e sfruttare, quando serve,
funzionalità adatte al mobile (come la
geolocalizzazione)

Fluid Grids, Flexible images,
Media Queries. 
I tre ingredienti del
Responsive Design

1. Fluid Grids 
Oggi, il nostro design o il layout progettato può
essere fluido, evitandoci - in teoria - di pensare
alla dimensione dello schermo dell’utente o a
quale device sta utilizzando. Se progettati bene,
i componenti si possono adattare perfettamente
ad ogni ambiente dell’utente.
fonte: https://1stwebdesigner.com/ﬂuid-grid-layout/

1. Fluid Grids 
Le griglie fluide, a differenza delle griglie
adattive, scorrono naturalmente all'interno
delle dimensioni del suo contenitore genitore.  
 
Il vantaggio è che una volta impostata la
larghezza massima delle nostre griglie, il layout
continuerà a reggere anche su schermi più
grandi grazie a dei calcoli basati su percentuali.
fonte: https://1stwebdesigner.com/ﬂuid-grid-layout/

2. Flexible images

3. Media queries 
L’introduzione dei CSS3 media queries ha
permesso di gestire il responsive design in tutti i
browser, permettendo di identificare il punto di
accesso al sito da parte dell’utente e applicare
gli stili CSS specifici per la risoluzione.
fonte: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

@media (query) {
/* CSS Rules used when query
matches */
}

Anche se esistono diversi elementi a cui applicare
le query, i più adatti all'ottimizzazione grafica web
sono min-width, max-width, min-height e max-
height, orientation (portrait, landscape)
fonte: https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=it

@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}
fonte: https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/#part-of-the-solution-ﬂexible-everything

Adaptive Design vs  
Responsive Design

Edoardo Sportelli perfonte: https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

Adaptive Design  
I siti adattivi cambiano a seconda della larghezza
del browser a dei specifici punti, adattandone Il
layout.
fonte: https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

In altre parole, un Adaptive design utilizza dei
layout statici basati su dei breakpoint. Una volta
riconosciuta la grandezza dello schermo, viene
caricato il layout adeguato.
Le sei larghezze dello schermo più comuni sono:
320, 480, 760, 960, 1200, 1600.
fonte: https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

Edoardo Sportelli perfonte: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design
Pro
• Permette ai designer di costruire una migliore UX per
ogni device
• I device mobile possono percepire l’ambiente dell’utente
• Si possono ottimizzare le pubblicità in base ai device
degli utenti

Edoardo Sportelli perfonte: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design
Contro
• Molto impegnativo adattare i siti tradizionali per
renderli più accessibili da mobile
• I tablets e i netbooks possono avere problemi con le
configurazioni del sito e tendono quindi ad essere o
smartphone o desktop oriented.
• SEO — Ai motori di ricerca non piace che sia presente lo
stesso contenuto in più siti

Responsive Design  
Un sito Responsive risponde alla dimensione del
browser ad ogni punto. Non importa quale sia la la
larghezza, il sito adatta il suo layout in modo che
sia ottimizzato per lo schermo, che sia 300px o
3000px.
fonte: https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

Pro
• Uniforme e senza interruzioni = good UX.
• Abbondanza di template da usare
• SEO friendly.
• Spesso facile da implementare
fonte: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design

Contro
• Meno controllo della dimensione dello schermo
• Alcuni elementi possono muoversi in modo
imprevedibile
• I banner pubblicitari possono perdersi nello
schermo
• I tempi di caricamento più lenti
fonte: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design

Content First vs Mobile First

1. Content First 
Ci sono molte ragioni per cui è importante
basare il design sui contenuti, ma il più
importante dal punto di vista della
progettazione è il vincolo che i contenuti
offrono.
fonte: https://responsivedesign.is/design/content-ﬁrst-design/

– STEPHEN HAY’
http://responsivedesignworkflow.com/
“The first step in our responsive design
workflow is to inventory only the things
that need to be on the page, whether or
not they exist yet.”.
fonte: https://designcode.io/sketch

2. Mobile First 
Tre motivi per disegnare mobile first, secondo
l’ideatore Luke Wroblewski:
fonte: https://www.lukew.com/ff/entry.asp?933

Edoardo Sportelli perfonte: http://www.audiweb.it/news/diffusione-e-total-digital-audience-a-dicembre-2016/
“Mobile is exploding” 
“Il 75,8% degli italiani – 36,4 milioni – dichiara di
accedere a internet da telefono cellulare, +11,5%
rispetto al 2015.” Audiweb, 13-02-2017, sui dati di
dicembre 2016.

“Mobile forces you to focus” 
I dispositivi mobili richiedono di concentrarsi sulle
azioni più importanti. Non c'è spazio in uno schermo
da 320 a 480 pixel per elementi estranei e inutili. Devi
priorizzare. Il risultato finale è un'esperienza incentrata
sui compiti chiave che gli utenti vogliono realizzare.
Questa è una esperienza buona per l’utente e buona
per le imprese.

“Mobile extends your capabilities” 
Le piattaforme mobile stanno introducendo nuove
funzionalità che lasciano indietro molti browser Web visti da
desktop. Ad esempio: Orientamento dell'utente attraverso
una bussola digitale; Ingresso multi-touch da uno o più gesti
simultanei; Posizionamento del dispositivo da un
accelerometro; e molti altri. Costruire mobile first permette
di progettare prendendo in considerazione queste nuove
possibilità.

Responsive Design Patterns

Indipendentemente dal tuo approccio, tuttavia, ci
sono un paio di cose chiave da tenere in mente
quando si progetta la pattern library:
1. Ho coperto tutte gli eventuali viewport?
2. La mia scala di progettazione è appropriata a
raggiungere gli obiettivi?
fonte: https://responsivedesign.is/design/responsive-design-patterns/

Tipografia

Em 
Il modo più semplice e più comune per garantire che si
mantiene la tipografia responsive è attraverso l'utilizzo
dell’unità di misura em. Em deriva da una vecchia
misura di stampa e il nome era originariamente solo
"M" essendo la lettera più ampia possibile. 
 
Sul web, l'utilizzo di em nella tipografia (e anche le
larghezze degli elementi e le query multimediali) si
basa sul valore del pixel di base. (che abbiamo detto
essere, ad esempio, il font di default dei browser: 16px)
fonte: https://responsivedesign.is/design/content-ﬁrst-design/

Viewport e breakpoint

Viewport 
Il viewport è l'area visibile dell'utente di una pagina
web. Il viewport varia con il dispositivo e sarà più
piccola su un telefono cellulare che su uno
schermo del computer.
fonte: https://www.w3schools.com/css/css_rwd_viewport.asp

Perché l’esigenza di viewport diversi? 
Le pagine web erano state progettate all’inizio solo
per schermi di computer ed era comune per le pagine
web avere un disegno statico e una dimensione fissa.
Poi, quando abbiamo iniziato a navigare in Internet
utilizzando tablet e telefoni cellulari, le pagine Web a
dimensioni fisse erano troppo grandi per adattarsi
alla finestra. Per risolvere questo problema, i browser
riducevano l'intera pagina web per adattarsi allo
schermo.
fonte: https://www.w3schools.com/css/css_rwd_viewport.asp

Breakpoint 
La necessità di adattare l'impaginazione alle diverse
dimensioni e risoluzioni degli schermi, ha
introdotto il concetto di "Resolution
breakpoint" ("punti di interruzione della
risoluzione"), in modo da stabilire delle soglie alle
quali modificare la presentazione grafica in
funzione della larghezza del dispositivo.
fonte: https://it.wikipedia.org/wiki/Design_responsivo

Il framework Bootstrap identifica (in riferimento al
"max-device-width") quattro tipi di device e
corrispondenti resolution breakpoint:
• extra small device con risoluzione inferiore a 768
pixel
• small device con risoluzione fino a 992 pixel
• desktop con risoluzione inferiore a 1200 pixel
• large device con risoluzione superiore a 1200 pixel

Ethan Marcotte ne identifica invece sei •
• 320 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento
verticale (portrait)
• 800 pixel per dispositivi con schermi piccoli, come cellulari, con orientamento
orizzontale (landscape)
• 600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di
Barnes&Noble (600x1024), con orientamento verticale
• 768 pixel tablet da 10 pollici, come l'iPad (768x1024), con orientamento verticale
• 1024 pixel computer da scrivania, fissi o portatili e tablet come l'iPad
(1024x768), con orientamento orizzontale
• 1200 pixel computer con schermi larghi, tipicamente fissi ma anche alcuni
portatili

• Mirror  
https://www.sketchapp.com/mirror/download

• Craft 
https://www.invisionapp.com/craft

• Runner 
http://sketchrunner.com/

• Symbol Organizer 
https://github.com/sonburn/symbol-organizer

• Infine, apriamo un account Invision 
https://www.invisionapp.com/

Esercizio

edoardo.sportelli@tangible.is

Ci vediamo il prossimo venerdì, 5 Maggio 2017
Grazie

�ݺ�ߣ

Sketch per la prototipazione - Lesson 2

More Related Content

Sketch per la prototipazione - Lesson 2