Siamo una societò

e« errance e aazwice deai

n
ldeiamo e progettiamo espnmaaaaa
che siano significative e memorabili,
e che abbiano un tto
sulla vita dele persone
Atomic design è uno metodologia creata da Brad
Erost composto do cf al
IavoranO insieme per creare un sistemo di
che
interface design in un modo
più
aondfvtafhl fs.
 sono elementi che non
easere aepwwsti e vengono
utilizzati come mattoncini er
costruire una inter[accia
La molecole sono dei
sanap&lle elementi che
(unzionano insieme se uniti
 sono dei
componenti UI relat/«omente
complessi composti un
di malecala eJa atomJ e/o
oltri
 template sono getti che
posizionano i componenti nel
della ae
articolono la
struttura dai contenuti nel
design.
Le pagine sono delle
roppresentozioni dei templates
che mostranocome appare la
progettota con la presenza
contenuti zeofi
C e e mO d g‹ ne we b corrie se fo e o de a ua d ‹. I n e e do erm
mo
c ea e accessi facili e ben fatti ai contenuti che siano a
gno t‹c‹ da
e magg/o sfide nto no a la modula ità sono tutte le decisioni che
devono essere fatte a ua nda i u i i a e n no du a e o ua ò
a
D o ge tta e O MU O O co rueende e rrio duabba
ta n d at nt
cre CeCheporCso/ChoC ho(e
Comportomenti
e le azioni
degli
Comportomenti Design
e le azioni degli tterns
Esigenza di un nuovo Sod s@ tute
componente. daIefia lee1genze7
gfh7

Rb aaaaea modl¢cafio per soddIs[óre

anche le nuove esigenze conserva
ndo (ltiùzzo precedente?

Disegna uno
nuov cpp
o pa
originale?
Alleonxo
3.0
Dai wire/rome ałfo costruzione th
un
s i s t e m visivo
Alleonxo
3.0
bcdeiehijkÎnnn
Raccolta punti 2016
Promozion Raccolta punti 201a
Promozioni
N
Biprogettore t’esperienzo web di un
servizio cli food cfełivery
abcdefghijhlmnopgrstuvwxyz _.
.
hit
Design
System
L i n g u a g g i o condiviso

lnłezconnes stone trn røom

5ingl e Source of Thu łh

Perche un design
Styłeguide
BrondinvenCory
 Open Sana!

a b c d e f g h i j k I m n ap q r s t uv w x y z Temi-0old

A B C DE F GH I j K L M N 0 P Q R S T U V W X
Y Z 1 2 3 4 56 789 D

Mobll
e
Aeroporto di Bologna
Aeroporto di Bologna
Prlmarl
Doi componenti ołłe pogine
Components inventory
Bottonî

Link
Pattern library
f. co pc docwmen€oreecondiridere o: c c
Are o conoscenza condiriso enöenöo il design
riribite e nccesribife
Obiettivi
de e
n
 OjȚre uno
panoramico

Ogiettivi
OjȚre uno
panoramico

Codice modulate e scalabil•

 Codice modulate e scalabil•

Ogiettivi Rende i pzogzessi łrasparenii

Sinqíe Source of Tenłh

 Codice modulate e scalabil•

Ogiettivi Rende i pzogzessi łrasparenii

Sinqíe Source of Tenłh

Connes sione
E c cos0ruirec '
u documenCore
c componen0ivre0 do c gø c .
occ
e se ono os ui e i bloc ńi dell in e țo cis di un oppl cv
a . Evo
po c r c ï rfducei(deOi0o0ecníco
Visual Coricepz
UI, Front-end,
Backend e progettazione
 ‘obiettivo del workshop è stato
iniziare a strutturore una
documentazione com@eta, univoca
che t i i or niz i e
de[inisca sti/i e i componenti
le loro speci[iche e le
loro [unzioni
 workshop inougurovo il processo
creazione un Design
System.
Questo processo ha previsto una
/ase di discovery e conceRts e una
fase di ri/ascio
fzfentí/icozione zfei p u n t i cfsíove
e
Deÿinizione Rei pattern
NomixgcoxvexWo
x
Stoxte
x
• 7ipograțio

• Backgroun
d
 lndietro

Agglornl
I. Primory

2
Secondary
3 tertiary
t.
Quaternary
 OŁ4DAfiY OUTLINE TERTIAPŸ OUTLINE

P.kIìdĂPY H0V'ER
I. Primory

2
Secondary
3 tertiary
t.
Quaternary
Label
Web
Web
74. 21,48 74.621,48

+J. 56,1 C
Elenco derivati
Bonifico
DATI BENEFICIARIO

BENEFICIARIO
Lorem ipsum dolor sit amet
consectetur adipiscing elit, sed do eiusmod tempor

laboris nisi ut aliquip ex ea commodo consequat

Lorem ipșum dolor șit amet
co”nsectetür adipfscTng'e'flt, sé“ dü efusrnod Fernpor
incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
J palette (colori
. messagg
“)
2. Widge
Primary color, Secondary
coîor
In[o, Success, lert
fi ef•‘••‘ziooe cii Done per ogni step
• Discover y
• Oesign

• Oocumentazione
• PuböTicazione
Workflow - Shorter Hit
Q#und è •ße porro ennsíderure
 design (inalizza lo stile visivo e
laamma speci[iche,
variazioni,stati e esempi dei co
onenti del inter[accia
UI
designer
Lovoro design ifernfivo,
seguendo un [!usso costonte
produzione e
r“chiestn [ee dbock.
Sketch, Abs trnct e/o lnv sion.
• Come art director, ho approvato il design (ina le
• Come art director e designer, insieme al team del
design system, siamo d’accordo che le proposte
risolvono i problemi di interazione e usoóifitò ed è
prO tO O I l’Liso in O g n i p l o t t [OrI+IO.

• Come sciroppotore, Ro on livello so Jiciente di sfridi,

variazioni e sPecipche per lavora su ona loc ild.
Desipo Systems
• teom non u»a il design system
° cîiente non ti
•
o un o‘, iî /ovoro su
design system entra in stoffo
Feedback

Every rl me ue launch a new feature,

I havr ro cr.•ate a ñw' componrnt.1 r
can't meet rhe deadlines!
Ylz have to wai t roo tong to launch
ne's fe atures or they are sub-par

feat urns out

everythin g done
The rude hast is a mess an d it's
mDing me inefficient
ltte shared workspace is rourit-
rr•p roductlve. I wish there was
a
Conseguexx
e
Senrn un cfesiqn system
cfiente
Far vedere quanto la presenza
online sio /ro mmentoto
Desiøn
Diventa un Evangelista