Ok.

Abbiamo visto come diciamo impostare come settare la posizione degli oggetti sul nostro layout.

Adesso dobbiamo iniziare veramente a disegnare, a progettare il nostro prodotto finale.

Quello che vi consiglio è di prima di iniziare a cercare comunque di limitare le vostre scelte sia di colore che di tipografia, ovviamente consapevoli di tutto il discorso che abbiamo fatto a monte il fatto che la palette cromatica ci serve un pochino estesa, quindi non solo un colore netto, ma magari varie sfumature più chiare e più scure e che abbiamo bisogno di vari colori per diciamo comunicare l'interfaccia abbiamo bisogno della scala dei neutri, abbiamo bisogno dei colori di feedback.

Insomma, una volta pensato questo, però, noi possiamo ipotizzare di iniziare a progettare sempre standardizzato quello che stiamo andando a disegnare.

Che cosa vuol dire? Vuol dire che per anni noi progettisti su photoshop illustrator prendevamo disegniamo un pulsante, mettiamo un colore che andiamo col contagocce e lori mettevamo da un'altra parte.

Questo voleva dire che spesse volte intanto c' erano dei piccoli errori umani che portavano a non creare sempre lo stesso standard cromatico.

Spesso gli sviluppatori veniva, diciamo questo è un rosso leggermente diverso ma di pochissimo che facciamo e immaginate che confusione si creava.

In più si creava confusione per gli utenti, perché vedevano spesso colori diversi, non solo di poco, ma anche magari una volta un pulsante era verde.

Una volta era viola, diciamo non c'.

Era una star standardizzazione proprio del colore.

E invece è quello che io vi consiglio di fare e di farlo subito a monte.

Voi ovviamente dovete avere un minimo di idea della colpa Letta colore che volete utilizzare.

Ma immaginate che avete già un brand, quindi avete già dei colori di partenza.

Vi consiglio già di come dire, definire quelli che vuol dire standardizzare, che siano riutilizzabili degli stili, come se si fosse.

Per esempio, se usate in design si salvano sempre gli stili colori, anche gli stili di testo.

Questo vale anche, per esempio, per Fig, ma o per sketchbook.

In questo caso stiamo vedendo Fig.

Ma il concetto è non utilizzare il colore in maniera rendo mica, ma come dire, cristallizzate lo in uno stile in modo che potete riutilizzarlo costantemente, ma anche variare lo velocemente.

Che cosa vuol dire questo? Vuol dire che supponiamo vediamo qui in pagina.

Noi abbiamo un esempio dobbiamo fare questo nuova piattaforma di delivery un po', la brand identity ce l'abbiamo, quindi sappiamo che ci sono questi tre macro colori che guidano la nostra identità.

Ovviamente questi tre macro colori da soli non ci bastano.

Ci serve un po' come dire renderla più articolata.

Ma intanto partiamo da questi e che cosa ci facciamo con con questi? Con questi colori iniziamo appunto a standardizzare lee che cosa vuol dire? Anzi prima di standardizzare facciamo un'altra cosa creiamo le loro variazioni.

Io lo faccio partendo da un quadrato che è la cosa più semplice, ma l'importante è che questo colore sia applicato su qualche oggetto in pagina.

Io faccio una cosa molto banale copia dei quadratini sopra e sotto, facendo così con alte shift come avviene con altri software.

Altre shift trascino e poi inizia a creare una declinazione di nuance.

Diciamo che questi sono i miei colori di base e da qua vado a creare alleanze più chiare e più scure.

Per farlo posso farlo in diversi modi.

Posso farlo cliccando sul file andando ad interagire per esempio solo sulla luminosità.

Se il metodo impostato è che se il è usato richard lumini e lui è il leit ness possiamo lavorare spostando solo il parametro della luminosità, che come vedete mi agisce bene andando a schiarire o a scurire il colore.

Oppure potete usare un trick molto rapido che ci consente di andare verso il chiaro verso l'oscuro semplicemente selezionando la il codice esadecimale sulla paletta con shift verso il basso faccio lo scif in modo che il nudo, come dire il passaggio sia ampio, altrimenti faccio di insomma vale un valore alla volta diventa un po' lento shift verso il basso e vedete che progressivamente il colore si scurisce.

Magari se mi ricordo anche quante volte l'ho fatto sono in grado di riportarlo in maniera identica sugli altri colori, quindi lo faccio anche qui.

Shift uno due tre frecce verso il basso shift anche sul viola uno, due tre frecce freccia verso il basso è uguale faccio per la parte più chiara vado su questo colore verde di partenza, vado con lo chef e la freccia verso uno due tre vado su questo un due tre e idem per la parte viola un, due, tre chiaramente adesso la paletta la riduciamo a questi ma ovviamente voi potete ampliarla anche grigi ed altri colori, poi vi create insomma queste variazioni ora la cosa importante è fare in modo che dare dei nomi e raggruppare questi colori in modo che siano anche di facile gestione all'interno di Fig.

Ma come facciamo per creare uno stile con un nome che funzioni bene, io vi consiglio di dare sempre un nome alla paletta, quindi ovviamente Green Park per quello che vi interessa e non scrive scuro, chiaro o meno oscuro, meno chiaro, perché questi sono come dire valori che sono relativi non sono assoluti.

Ok, cos'è può essere qualcosa può essere più scuro di qualcos'altro ancora se gli dico più più scuro no.

Se invece non li nominiamo con dei valori numerici, siamo sicuri di essere in grado anche di rappresentare la scala.

Ma non solo questo ci aiuta anche a fare in modo che se all'improvviso tra questo colore questo colore vogliamo metterne un altro.

Se la scala va per esempio da zero a cento e questo è cinquecento queste ottocento o ben quattrocento numeri di, anzi trecento numeri di distanza per poter raggiungere alte nomenclature in mezzo.

Quindi diciamo come buona convenzione è buono utilizzare il parametro numerico.

Do un valore a questo mio primo colore.

Lo vado a standardizzare, quindi a utilizzare vado sul film vado sui quattro quadratini ora io qui già li trovo, però mi basta che vado sul più e vado a dirgli come voglio chiamarli.

Come vi dicevo, è bene utilizzare una buona convenzione di nomenclatura perché vi aiuta a gestirli più facilmente.

Vedete che qui li trovate già rappresentati sotto delle macro sezioni green water' in questo perché l'ho fatto io a monte semplicemente quando ho dato il nome invece di limitarmi a scrivere green e il numero in questo caso magari potrebbe essere dieci ok, metto uno slash questo slash mi sta creando una sottocartella all'interno del mio gruppo colore ok quindi se io metto nel nome del colore slash e poi ci metto un parametro abbiamo detto in questo caso numerico mi sta creando.

Come vedete adesso vado qui a guardare una sottocartella solo per i verdi.

Questo lo faccio ovviamente per tutti gli step che mi interessano sia per il verde che per l'acqua che per il vaiolo e vedrete che mi troverò una palette colore d divisa in questo modo qua adesso il cinquanta non mi interessa, le voglio cancellare, basta fare il tasto destro, ma come vedete in questo modo io standardizzare il colore.

Che cosa vuol dire? Che se domani mi metto a disegnare un nuovo rettangolo non prendo un colore a caso.

Non vado con il contagocce, ma vado qui a prendere uno dei colori che ho gia' parametrizzazione.

Ok, perché questa cosa è molto importante è molto importante perché nel momento in cui a un certo punto immaginate che il cliente mi dice Guarda, non voglio usare questo verde, questo verde non funziona.

Voi volete concentrarvi sulle sfumature del design e non andare a cambiare ogni singolo pulsante avendo standardizzato il colore.

Guardate che succede per esempio a tutti i miei pulsanti verdi se io vado cliccando sulla parte grigia del mio documento, vado qui a evitare il cinque che so che è quello vediamolo ok, sia il cinque quello che sta dando il colore pulsanti lo vado ad evitare qui con D.

Concina dell'editing se cambio colore a questo che succede? Che cambia dappertutto all'interno del mio layout.

Questo vuol dire che poi io posso concentrarmi veramente sul fare no piccole iterazioni per capire cosa funziona e non stare lì a cambiare quarantasei volte un pulsante, un colore semplicemente perché non lo standardizzato.

Quindi questo è il potere di definire gli stili su subito e uno potrebbe dire ok, ma io magari non sono in grado di definire subito gli stili, ma non vi preoccupate voi comunque parametrizzazione dei colori perché poi come vedete cambiarli è immediato.

Se a un certo punto mi rendo conto che questo verde per me non è più il verde che volevo veramente ci vuole poco, lo volete rendere un pochino più saturo? Vi muovete all'interno della palette colore, ma la cosa comodissima è che avendolo utilizzato in maniera standardizzata e stilizzata dappertutto, ve lo ritrovate dappertutto sul vostro gli houthi e questo non vale solo per i colori.

Vale per esempio anche per per gli effetti vedete che per esempio qui c' è cioè un'ombra ok un'ombra che sta utilizzando molto utile da utilizzare nei vostri layout perché crea profondità una quella tridimensionalità questa ombra puo' essere standardizzata in egual misura.

Quindi come si fa? Si crea sempre un rettangolo di base.

Io lo faccio diciamo bianco, così lo vedo meglio.

In questo caso invece di andare a standardizzare il colore, io vado a standardizzare l'effetto, vale a dire clicco su fx.

In questo caso varie tipologie di offerte in quel il caso all'ombra che la drop shadow.

Vado qui, gli dico un po' di parametri, magari faccio l'ombra un pochino più piccola e posso diminuire la sua opacità, metterla al cinque per cento.

Ok, questa ombra mi piace e voglio che diventi uno standard per tutti i miei elementi.

A questo punto, come ho fatto prima, quando voglio standardizzare qualcosa, vado sui quattro puntini e ne definisco lo stile.

La elevation, per esempio.

Anche qui normalmente la prassi vuole che si nomini per numeri, perché zero è come dire la distanza più bassa dal dalla superficie fino a crescere.

Quindi quando la elevation sopra i i numeri no.

Quattro, cinque, sei vuol dire che l'ombra più grande perché sto virtualmente spostando e allontanando l' oggetto dalla sua tavola di lavoro.

Anche questo appunto, una volta stabilizzata la standardizzata la posso applicare.

Guardate qui.

Per esempio, se clicco su questo mio questa mia card e vedete che c' è un elevation uno potrei dargli due Vedete che aumenta la profondità se gli do zero diventa ancora più piccola se gli do uno diventa leggermente, insomma un valore intermedio.

E anche qui, se a un certo punto mi rendo conto che non mi piace.

Mi basterà andare sul editing e andare a variare, per esempio sulla distanza o altri parametri che voglio cambiare.

L'importante guardate che cosa ho fatto.

La cosa interessante delle esempio delle ombre è che, come succede css nella nella parte di front si possono sommare le ombre, come succederebbe nella realtà.

Perché probabilmente io potrei avere piu' ombre, quella di contatto e quella della luce ambientale.

Allora magari creare due ombre cambiano due distribuzioni diverse ci possono aiutare a creare ancora più materico.

É vero il nostro il nostro elemento all'interno dell'interfaccia.

Vi ricordo che sempre tutti questi elementi standardizzati e poi li trovate cliccando in qualsiasi punto della tavola qui a destra.

Quindi troviamo sia gli effetti sia i colori e sia poi, ovviamente adesso vedremo nel secondo modulo la parte tipografica l'importante è ricordarvi di limitare la vostra scelta.

Quindi anche se ne fate venti, ma venti colori utilizzate solo in quella interfaccia e standardizzate li' subito, in modo che poi, se volete variare qualcosa, è facile variare su tutto il documento