�ݺ�ߣ

Sketch per la
prototipazione
Edoardo Sportelli per

Sketch per la prototipazione - Lesson 1

– @MENG TO
designcode.io
“Sketch is a vector design tool entirely focused
on user interface design. It’s easy to pick up
and costs a fraction of the price of Photoshop.
Because of its simplicity, anyone with little to
no training can learn Sketch. It’s perfect for
designing for multiple devices, and delivering
assets is a breeze.”.
fonte: https://designcode.io/sketch

Vantaggi

1. Facile da usare. Imparerete le basi davvero
velocemente e offre anche da solo sufficienti
funzioni per i power user.
fonte: Christian Krammer - The Sketch Handbook - 2016 by Smashing Magazine GmbH, Germany.

2. Vector-based 
Ridimensiona gli elementi senza perdere di
qualità. Tutto rimane nitido anche con lo zoom.

Edoardo Sportelli perfonte: Christian Krammer - The Sketch Handbook - 2016 by Smashing Magazine GmbH, Germany.

3. Sketch utilizza un’unica unità di misura. Si lavora
solo con i pixel e non vi dovrete più
preoccupare di altre unità di misura (cm, ml,
picas), delle impostazioni di colore e tutte le
altre misure che riguardano altri formati.

4. Possiede solo strumenti utili per lo UI design.
Tutto a portata di mano senza complicati sotto
menu.

5. Pixel-perfection 
Sketch di aiuta ad allineare i tuoi elementi con
una precisione al pixel

6. Lavora con le artboards e pagine, il modo più
efficiente per organizzare il tuo design in un
singolo file

7. Funzione per ottenere il CSS degli elementi il
codice delle SVG: dal design al codice in un
secondo.

8. Operazione Booleane flessibili 
Combina forme semplici per creare forme
complesse che rimangono editabili.

9. Simboli e stili condivisibili, facili da usare per più
di un elemento o livello.

10.Keyboard shortcuts 
Quasi tutto è raggiungibile da shortcuts della
tastiera.

11. Strumento per griglie e layouts: facili da
impostare per un design più consistente.  

12. Group resizing 
adattate il vostro design in diverse dimensioni in
modo semplice ed (quasi) automatico.

13. Un previewing tool chiamato Mirror. Una
progettazione più efficace con un’anteprima live
sul tuo iPhone o sul tuo browser.

14. Un potente strumento di esportazione: esporti
in diversioni risoluzioni con un solo click. Puoi
esportare in ogni scala (1x, 2x, 3x) e in 6 formati
differenti (JPG, PNG, SVG, PDF, TIFF e EPS).

Domande?

Vediamo insieme

Operazioni Boolean

Artboards

Grid e layout

Allineamento e distribuzione

Maschere

Atomic design è una metodologia creata da Brad
Frost composta da cinque distinte fasi che lavorano
insieme per creare un sistema di interface design in
un modo più gerarchico e condivisibile.
fonte: Brad Frost, “Atomic Design”,

Edoardo Sportelli perfonte: Brad Frost, “Atomic Design”,

• Molecole: 
Le molecole sono dei gruppi relativamente
semplici di elementi UI che funzionano insieme
se uniti. Per esempio una label, un search input
e un bottone possono unirsi insieme per creare
una molecola search form.
“do one thing and do it well” mentality.

• Organismi 
Gli organismi sono dei componenti UI
relativamente complessi composti da un gruppo
di molecole e/o atomi e/o altri organismi. Questi
organismi formano distinte sezioni di interfaccia.

• Templates 
I template sono oggetti che posizionano i
componenti nel layout della pagina e articolano
la struttura dei contenuti nel design.

• Pagine 
Le pagine sono delle rappresentazioni dei
templates che mostrano come appare la UI
progettata con la presenza di contenuti reali.

• Atomi sono elementi UI che non possono essere separati e vengono
utilizzati come mattoncini per costruire una interfaccia
• Molecole sono una collezione di atomi che formato un
componente UI
• Organismi sono componenti più complessi che formato sezioni di
una interfaccia
• Templates sono un’insieme di regioni all’interno di un layout che
hanno lo scopo di dimostrare la struttura di base dei contenuti
• Nelle Pagine si applicano dei contenuti reali al contenuto dei
template per visualizzare la UI finale e testate la resistenza del
design system.

–ANNA DEBENHAM
“Front-end Style Guides.” Anna Debenham, 2017-01-01. iBooks.
“Thinking of design patterns in an atomic way
makes what we build more flexible. We
assume that the same atoms and modules
could be combined in many ways, in
combinations we might not have imagined
when building them”.

Esercizio  
Prendete le forbici. Provate a dividere la pagina
prima in organismi, poi in molecole e poi in atomi

Style guide, Pattern library e
Design System

• Style guide  
Non c’è una sola definizione per “style guide”. Il
termine significa diverse cose a seconda del caso
e delle categorie. Ad esempio possiamo parlare
di Brand Identity Design Language Voice and
Tone, Writing, Patterns, Code
fonte: http://bradfrost.com/blog/post/style-guides/

• Pattern library  
Pattern library è usata qualche volta quando si
parla di style guide. Una style guide spiega come
le cose devono apparire, mentre la pattern library
tende a focalizzarsi come queste vengono
assemblate
fonte: Anna Debenham. “Front-end Style Guides”. iBooks.

• Design system  
Un design system articola una direzione generale
del design, la sua filosofia e spiega come
approcciarsi ad uno specifico progetto o
prodotto.
fonte: http://bradfrost.com/blog/post/style-guides/

1. Big bang 
In questo approccio il team si alloca una parte di
tempo (ad esempio una o due settimane,
qualche volta anche mesi) per documentare tutti
gli elementi della UI in una style guide.
• Pro: La style guide viene creata un in un breve
periodo di tempo.
• Contro: Il team non impara nulla di nuovo
riguardo il prodotto durante questo periodo
fonte: Jeff Gothelf. “Lean UX: Applying Lean Principles to Improve User Experience”. iBooks

2. Slow drip 
In questo approccio, il team aggiunge elementi
alla style guide ogni volta che creano o
modificano qualcosa del progetto.
• Pro: Il team continua a lavorare sul progetto.
• Contro: La style guide è raramente completa e
quindi molto meno utile ed efficiente
fonte: Jeff Gothelf. “Lean UX: Applying Lean Principles to Improve User Experience”. iBooks

Caratteristiche di una Style
Guide di successo

1. Accessibile 
Accessibilità significa che la style guide è
disponibile per chiunque del tuo team.
fonte: Jeff Gothelf. “Lean UX: Applying Lean Principles to Improve User Experience”. iBooks.

Una style guide è accessibile quando:

• Facile da trovare 
Usate una URL facile da ricordare ed assicuratevi
che chiunque ne è a conoscenza.

• Facile da condividere 
Assicuratevi che il il vostro team riesca ad
accedere in ogni momento (online, da remoto,
mobile, ecc)

• Facile da consultare 
Una disposizione ordinata e comprensibile, se
non un vero e proprio strumento di ricerca,
migliorano l’uso della styleguide

• Facile da usare 
Trattate la style guide come trattereste qualsiasi
altro progetto. Se non è usabile, verrà
abbandonata molto velocemente.

2. Continuamente aggiornata  
La style guide può essere considerata un
documento vivo e sempre in crescita. Se è vero
che gli elementi all’interno assicurato
un’esperienza consistente per i vostri clienti, il
prodotto è in continua evoluzione. La style guide
deve essere malleable abbastanza per essere
aggiornata facilmente. In più, come ogni
designer crea un nuovo elemento, deve essere
facile per loro aggiungerlo nella style guide.

–@JINA
Twitter, 2015
“Zombie style guides — style guides that aren’t
maintained and part of your process. They die
and rot. They eat your brains”.
fonte: Debenham, Anna. “Front-end Style Guides.” Anna Debenham, 2017-01-01. iBooks.

3. Utilizzabile 
La tua style guide non è un museo dei componenti.
Dovrebbe essere invece una “widget factory” che
fornisce ogni elemento a richiesta. Come ogni
elemento nuovo viene aggiunto, rendetelo
disponibile in qualsiasi fermato sia necessario.
Assicuratevi che non sia disponibile solo in codice
che ma che ci siano anche formati o vettoriali o
sorgente. Così facendo, permettere ad ogni designer
di avere un palette complete di ogni elemento UI
per creare prototipi in modo più rapido.

• Quando pianificate una style guide è importante
organizzarsi per mantenerla.
• Dovrete pensare ad un metodo e a delle persone che si
occuperanno di tenerla aggiornata.
• Dovete pensare alla style guide come un documento vivo
da curare piuttosto che una cosa statica.
• Progettare un style guide facile da usare e facile da
consultare. Il vostro obiettivo è che il vostro team riesca ad
utilizzarla sempre e facilmente, invece che trascurarla e
dimenticarla.

Benefici

• Consistenza 
La style guide garantisce consistenza e coesione
in tutta la UI. Questo avvantaggia sia le persone
che creano le interfacce sia gli utenti del sito

• Vocabolario condiviso 
La style guide permette di creare, conoscere e
diffondere in tutto il team un vocabolario
condiviso degli elementi prodotti.

• Educazione 
La style guide diffonde conoscenza e
consapevolezza del design in un modo davvero
tangibile.

• Testing 
La style guide permette di vedere e testare i
diversi pattern in modo isolato e dettagliato.

• Velocità 
È vero che inizialmente creare una style guide
prende molto tempo e impegno. Ma una volta
che la libreria è stata progettata, il passaggio di
informazioni diventa davvero molto veloci.
Questo rende tutti (designer, sviluppatori e
clienti) molto felici.

Esercizio 2 
Cominciamo a creare la nostra style guide

Un buon design tiene in considerazione gli spazi
molto più che i contenuti. La style guide
dovrebbe riflettere questa mentalità e includere
una sezione che riguarda griglie e spaziature.
fonte: https://medium.freecodecamp.com/designing-a-styleguide-elements-that-go-into-functional-and-beautiful-products-ff1621e00a0e

È quindi importante costruire un sistema di
griglie che lavora nel modo giusto. Nella sezione
dedicata, dovreste prevedere informazioni come:
numero di colonne, righe e margini.

Un po’ di terminologia

• Unità 
Le unità sono le divisioni verticali più piccole
della pagina. Sono normalmente troppo piccole
per allocare ogni contenuto significativo ma sono
una sorta di guida per costruire sopra la tua grigia!
fonte: https://iamtomnewton.com/blog/grid-guide/

• Colonne 
Le colonne sono un set di unità raggruppare
insieme per creare un’area di lavoro per i contenuti.
Per esempio, una griglia base di 12 unità può essere
raggruppata in due colonne di 6, tre di 4 o 6 di due.

• Regioni 
Le regioni sono gruppi di colonne che formano le basi
del layout. Per esempio, una base di 12 unità con 6
colonne può essere separata in due regioni, una di 4
colonne e una di 2 colonne. Potrebbe essere
benissimo un layout base per una pagina articolo di
lato.

• Baseline 
Una baseline è un sistema tipografico a cui
riferirsi per appoggiare la base orizzontale dei
caratteri. È uno strumento molto utile che
fornisce un ritmo verticale ai tuoi contenuti.

• Fields (campi) 
I fields sono delle divisioni orizzontali della tua pagina. Usano
la baseline della grigilia come guida per posizionare
verticalmente gli elementi e dividere le sezioni in modo
uguale.

• Gutters 
Gutters sono gli spazi bianchi tra gli elementi, o
verticalmente tra le unità, colonne e regioni o
orizzontalmente tra i fields.

È una buona idea basare una griglia sulla
larghezza massima del device piuttosto partire da
mobile. Questo perché la tua griglia sarà usata
per per aiutarti a posizionare i contenuti, cosa
molto più difficile su large device che nel mobile,
dove ti sarà facile incolonnare i contenuti in un
una colonna unica.

Base 4 è un concetto di design dove tutti i calcoli
possibili siano divisibili per per la dimensione em
standard di 16 px (4 * 4 = 16).  
 
Un buon esempio è infatti la dimensione del
body: 16px (1em) è una buona misura per un body
standard, come regola generale la line-height
dovrebbe essere il 150% della dimensione del
font, che nel nostro caso è infatti 24px (4*6=24)

1200 è perfetto in base 4: 1200 / 4 = 300, 1200 / 8
= 150, 1200 / 12 = 100, 1200 / 16 = 75.

8-Point �Ұ��ٱ�

Un principio molto semplice 
Usa multipli di 8 per definire dimensioni, paddings,
margini e ogni altro elemento.
fonte: ��ٳٱ��://��.�ڳ�/��𳦾�ﬁc��/8-��-��

CONSISTENT UI 
Quando ogni tua misurazione segue le stesse
regole, automaticamente ottieni una consistenza
maggiore della tua UI.
fonte: ��ٳٱ��://��.�ڳ�/��𳦾�ﬁc��/8-��-��
PERCHE È IMPORTANTE

Edoardo Sportelli perfonte: ��ٳٱ��://��.�ڳ�/��𳦾�ﬁc��/8-��-��

Non deve. Comunque, se vuoi ottenere un risultato sicuro e
professionale, dovrebbe esserlo. Se hai mai comprato
online, hai provato probabilmente esitazione quando hai
cliccato acquista e il form per la carta di credito sembrava
diversa dal resto del sito. La consistenza è una strada sicura.
fonte: https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
PERCHÈ LA MIA INTERFACCIA
DEVE ESSERE CONSISTENTE?

• La maggioranza delle dimensioni degli schermi è divisibile per 8. La
varietà delle dimensioni degli schermi e della densità dei pixel è in
continua crescita, quindi la generazione di nuovi asset è sempre più
complicata per i designer. Utilizzando sempre un numero come 8
per le dimensioni e per gli spazi degli elementi permette di scalare
per un grand numero di device in modo più semplice e consistente.
PERCHÈ 8PTS?

Ad esempio, Google 
https://material.io/guidelines/layout/metrics-
keylines.html#
SAPETE CHI LO USA?

Esercizio 
Creiamo una griglia

• Partiamo dalla grandezza del testo del body 
Se per la stampa la grandezza ottimale è tra i 9–
12 point, per il web va dai 14–24 pixels, a seconda
del font utilizzato
fonte: http://typogui.de/

• Impostare l’interlinea 
Per molti font, l'interlinea ottimale è tra il 120% e
il 150%.
fonte: http://typogui.de/

–ROBERT BRINGHURST
“The Elements of Typographic Style”, 2001, Hartley & Marks
“A modular scale, like a musical scale, is a
prearranged set of harmonious proportions”.

–TIM BROWN
Designer, writer, speaker, and toolmake
“A modular scale is a sequence of numbers
that relate to one another in a meaningful way.
Using the golden ratio, for example, we can
produce values for a modular scale by
multiplying by 1.618 to arrive at the next
highest number, or dividing by 1.618 to arrive at
the next number down”.
fonte: https://alistapart.com/article/more-meaningful-typography

Ottenere una scala modulare è semplice. Si parte
da una proporzione (per esempio, 1:1.618) e un
numero (per esempio, 10), e moltiplicare o dividere
quante volte è necessario: 10.000 * 1.618 = 16.180,
16.180 * 1.618 = 26.179, 26.179 * 1.618 = 42.358, 42.358
* etc.
fonte: https://alistapart.com/article/more-meaningful-typography

oppure…

http://nowodzinski.pl/syncope/
http://www.modularscale.com/
https://www.gridlover.net/try

Esercizio 
Disegniamo una pagina

Scegliete una pagina da realizzare 
Home, Landing, Pagina categoria abbigliamento, Scheda
prodotto, Carrello, Pagina account, Store locator

Create una Style guide completa di 
griglie, tipografia, palette colori, atomi,
molecole, organismi

Griglie 
Disegnate per un viewport web

Tipografia 
Calcolate almeno un h1, h2,
h3, body, link, small, xsmall

Atomi 
Disegnate almeno un primo set di
icone (frecce, carrello, preferiti, search,
menu, support, social), label, input e
blocchi immagine

Molecole 
Disegnate almeno i bottoni
primari e secondari nei loro
diversi stati (normale, hover,
focus), search form e
breadcrumbs .

Organismi 
Disegnate la navigazione.
Almeno la header, il footer e
le card prodotto.

Ora create un template

edoardo.sportelli@tangible.is

Ci vediamo il prossimo venerdì, 5 Maggio 2017
Grazie

�ݺ�ߣ

Sketch per la prototipazione - Lesson 1

More Related Content

Sketch per la prototipazione - Lesson 1