Ora che abbiamo iniziato a raccogliere quello che è il benchmark visivo.

Quindi cosa ci piace di più a livello estetico e cosa ci piace di meno a livello estetico? Abbiamo capito che cosa vogliamo rappresentare all'interno del nostro film.

Quindi quello che facciamo è passare direttamente a un altro file che ho creato, che è loro templates Fig.

Ma abbiamo prima un film, che è quello che vi dicevo prima.

Dove il all'interno Possiamo iniziare a mettere i nostri competitors e dall'altra parte.

Abbiamo un file sempre collegato con l'altra Board, dove mettiamo solo le nostre immagini preferite, quelle che più ci piacciono.

Mettiamo caso quindi che vado a prendere una di queste.

Prendo questa immagine.

Mac, che meraviglia! E qui all'interno mi trovo la' screenshot.

Ho creato questa board che si può allungare come vedete qui e quindi mettere all'interno tutte le vostre immagini che volete qua? So che questo mi piace.

Poi magari vado a prendermi altre sempre screen da questa parte e me li porto tutte qua nel mio file FIG.

Ma come vedete, qua riesco a vedere a livello visivo ciò che mi interessa di più rispetto al resto.

Qua faccio un crop per andare solo sulla parte che più voglio andare a riprendere quando costruirò la mia interfaccia.

Quindi in questo caso mi piace molto il la tipografia.

Qui il colore, come viene scritto in generale mi piace il modo in cui viene, cioè un highlight sul prodotto, quindi cerco di prendere questi elementi.

Quello che facciamo nella seconda parte è definendo la tipografia attraverso un sistema.

Quindi ho preparato anche per qua una borsa dove andare a mettere i colori che più vi piacciono.

La tipografia che piu' vi piace perché possiamo iniziare soprattutto con i colori a inserire delle palette cromatiche molto interessanti.

Quindi qui, come abbiamo visto prima, abbiamo uno sfondo che ci può piacere.

Quindi quello che faccio solitamente e andare al canale di quadrati e andare a picchiare il colore che più ci interessa.

In questo caso ho un primo beige all'interno me ne crea un altro, quindi lo pubblico attivo qui all'interno l'ha chiusa tu riesce nel business solitamente lavoro con quella perché è più semplice.

Quindi la Hewes va a cambiarci i valori a livello di tonalità del colore.

Quindi in questo caso trenta pd blue da piu' di verde pt giallo dall'altra parte.

Abbiamo la sature shoshone che la saturazione effettiva del colore, quindi molto acceso oppure molto spento.

E poi, come molti abbiamo, la è bright ness del colore, quindi molto spento oppure molto, molto chiaro.

Quindi in questo caso lo vogliamo un pochino più scuro per vedere un attimo come potrebbe stare il contrasto.

Quindi utilizziamo sempre l'aiuto del primo colore.

In questo caso dovrebbe essere trentatré modelli coppie dall'altra parte e quindi ho delle ho una stessa linea colore che è condivisa da entrambi, ma vanno a differenziarsi sulla sature nation e la bright ness.

In questo modo sembrano dei colori abbastanza simili che possono stare anche abbastanza bene insieme, ma effettivamente una sono molto più chiaro e l'altro molto piu' scuro, quindi inizio a crearmi la prima parata di colori.

Qua vi ho inserito all'interno dei colori che sono dei colori di aiuto, quindi trovare un colore primario, quindi con le primarie, solitamente è quello che evidenzia un elemento secondario.

Quello che fa da accompagnamento e l'accento è quello che è effettivamente quello che ci permette di visualizzare un bottone, un qualcosa in maniera più accesa, appunto come il nome rispetto alle altre.

Abbi un po' di background, quindi in questo caso ho semplicemente lasciato background due-tre vuoti e poi i test light normale e dark.

Solitamente i colori del testo in questo caso possono essere nero e possiamo avere delle diverse tonalità di nero.

Quindi il primo potrebbe essere un po' più grigio perché abbiamo nominato takes flight e secondo avere un grigio un pochino più scuro e l'ultimo poteva avere un grigio più scuro e quello normale invece una via di mezzo tra questi qua.

Quindi in questo modo io inizio già a iniziare ad aspettarmi dei parametri all'interno del mio file.

Quello che poi è da fare nel momento in cui saremo sicuri che voglio prendere questo colore iniziero' a chiamarlo prima l'altro secondarie, quindi creando gli stili di testo, gli stili di colore max.

Così facendo posso creare tanti altri elementi, come ad esempio questi elementi a livello visivo selezionarli e poi nel momento in cui se qualora secondario andrà a cambiare, cambierà su tutto quanto.

Quindi questo ci serve soprattutto per capire quali sono i colori che più ci interessano e poi andare a definire all'interno del nostro file ci permette di dire ok, ho deciso di fare questo, di scegliere quel colore, di scegliere quell' altro colore.

Ora vediamo un file un pochino già più definito da questa parte ho preparato quello che è l'idea che vi raccontavo prima, ovvero del questionario da fare con una serie di visual già preparati per per l'occasione.

Quindi qui cosa possiamo vedere? C'è sicuramente un eder qua all'interno sopra c'è un certo tipo di tipografia andando ad aprire la libreria all'interno.

Questo elemento è composto da una serie di altri elementi che hanno una propria proprietà.

Vediamo questi elementi uno accanto all'altro.

Gli elementi in questione sono questi ovvero delle icone un menu item attivo inattivo, una ball, un logo e il colore.

Questo è quello che è il designer chiamano l'atomica design.

Quindi io miss compongo quello che è l'interfaccia all'interno di quello che saranno tutti i parametri che mi permetteranno di costruirla.

Poi in futuro, tornando nel nostro modulo, vi ho preparato all'interno qui proprio la creazione del componente come avviene.

Quindi possiamo vedere che Lehder è composto, come dicevo prima, da proprietà colore, quindi nero, rosso, bianco, un'immagine degli item che sono i menu' all'interno, quindi quello inattivo, quello attivo una double é un'icona, anzi delle icone.

Qui sotto invece possiamo vedere che c' è un Eder, effettivamente dove è tutto interamente costruito con elementi sopra semplicemente riorganizzati in maniera diversa.

Io qui posso fare diverse prove, poi, dopo non avere solamente un'unica prova, come ad esempio avere prima la parte a sinistra, avere in centro il logo, quindi cambiare diversamente quello che è la struttura di quello che sto facendo.

Ma gli elementi rimangono sempre, assolutamente, sempre quelli.

È interessante per me è sempre utilizzare una una base come questa per evitare di ripetere elementi nuovi, perché sarà una parte fondamentale quando passeremo Winslow e soprattutto per riuscire a creare qualcosa che sia sempre in continuazione, costante, coerente con quello che è la nostra, il nostro obiettivo, la nostra mission.

Esempio perché io ho fatto questo sito internet che ha questi colori, Perché ho fatto un luogo di questo tipo? Perché Dio mi rivolgo al designer il designer, soprattutto quando ho creato questo luogo, ovvero nel duemila, e quindi ci avevano come riferimento tra i tanti tipi di design in Svizzera, cosa che ricorda molto la tipografia che utilizzato.

Quindi ho preso quello che erano esempi di marchi di altro tipo e ho creato questa tipografia, questo colore, questo rosso che in modo potesse raccontare molto la parte svizzera del design in maniera molto piu' in grigliata con un quadrato ne é inoltre il nome.

È un gioco di parole tra il segno di e design.

Quindi è molto rispetta molto quello che è l'idea che mi sono immaginato, ovvero parlare designer e parlare singolarmente ognuno di loro.

Quindi raccontando la storia di queste persone qui all'interno.

Quello che ho fatto poi è stato ci decidere una tipografia che ho selezionato.

Sono andato a mettere all'interno di una tabella e come vedete qua all'interno io anzi ad esempio design system io una serie proprio di tipografie che ho inserito, che sono tutte qui dentro.

Come vedete qua gli testi, gli stili di testo sono diversi vari.

Questi stili testo solitamente io li creo alla fine quando finisce il progetto e sono sicuro di quello che sto facendo, non prima.

Quando sono in bozza, diciamo nel momento in cui fai bozza non decidi queste cose, ma le decidi una volta che hai definito quello che vuoi creare.

Quindi mettiamo caso che io adesso vorrei rivedermi questi stili di testo che sono andato a scrivere li possiamo vedere tutti qua.

Ci sono diversi modi in cui una persona puo' inserire il testo è mme.

Ci sono persone che lavorano prima con gli account che uhhh cinque e gli vanno a elaborare, poi dentro a a fig, ma diversi media qui quindi se su backstop vedrò h una, due, tre, quattro, cinque in una certa maniera.

Se invece è a come scritto qua, avrò tutte le tipologie di testo che posso utilizzarle in qualsiasi media.

Qui quindi io ho preso una scala molto grande che parte da un centodieci pixel e a medium e regole all'interno con delle diverse linee una punto uno uno punto zero, andando a definire poi tutte le diverse casistiche.

Quindi heading xl heading l M s utilizzato una classica struttura come quella dei vestiti.

Quindi le taglie è una cosa che solitamente si fa nello sviluppo, ma si fa anche al design e come vedete poi definito quelli che sono gli heading, quindi i titoli e quello che invece è.

Il body quindi è il corpo del testo, quindi più la parte dove vive un paragrafo.

Se vedete anche qui ci sono una serie di colori che ho iniziato a definire, ma chiaramente non sono tutti definiti poi infine o dei grilli utilizzo a seconda della tipologia di auto di contenitore che sto andando a creare.

Questo è un progetto già abbastanza avviato che ci permette poi di avere la possibilità di disegnare qualsiasi schermata che noi vogliamo, che riprende effettivamente qui pattern.

Quindi vogliamo caso che voglio creare una una parte visiva.

Ho gia' il mio colore definito nel branding, quindi so che ho il mio black background.

So che ho una tipografia di qualche tipo.

In questo caso voglio selezionare un heading abbastanza grande, quindi selezione nel sessantaquattro gli do il colore bianco e inizio a scrivere all'interno.

In questo caso un'altra persona che può prendere in mano il progetto che vedete può essere in grado anche lei di riuscire a riprendere la parte visiva contratto io senza per forza avere accesso a tutti i miei componenti, ma semplicemente prendo le proprietà che possono essere quelli di colore di testo e creando a sua volta nuove schermate.

Quindi anche qui, come vedete, posso scegliere altri colori che sono magari il rosso, appunto classico in questo caso che il mio colore di accento e lo vado a definire all'interno di un tram come quello che vediamo qua possiamo vedere tante altre componenti che abbiamo costruito, come ad esempio una card.

Alcune immagini, tipologie di immagini diverse, quindi quella l'immagine per il backstop l'immagine mobile.

Questa è una variante che parla con duemila aquile, quindi ho due media qui in questo caso perché ho selezionato qua è mobile e mentre sessantasei invece di scrivere l'ex top perché come vedremo più avanti dentro workflow, ma anche in generale su altri siti internet possa avere delle grafiche diverse a seconda della grandezza dell'immagine.

Quindi qui ho voluto specificare quello che vedrei come vedrei la scritta quando vado su dimensioni molto più grande di quella che trovate qui dentro.

Questo invece è un filtro e possiamo vedere che da una parte a sinistra ci sono delle scritte settembre, ottobre, novembre, dicembre e a destra abbiamo una ricerca, un rossore.

Qui è spaccato il componente, ma l'importante per noi qua è riuscire a capire semplicemente che abbiamo due elementi simili uno accanto all'altro che vengono ripresi backstop mobile, quindi è una coerenza tra gli elementi che io scrivo da una parte e dall'altra qua ci sono tutti gli input che ho definito all'interno l'input sono una delle parti fondamentali quando stai creando ad esempio un form perché ci permettono di dire Ok, cosa succede quando la persona sbagliata, quel campo, quando succede con la persona, non compirà quel campo.

Quindi magari disabilitato quel campo.

Cosa succede quando abbiamo una checkbox o qualche altro tipo? Come vediamo all'interno qui è iniziato a finire degli input.

Il jukebox è come avendo degli stili già definiti e poi dando una serie di stati a quello che è l'input stesso, ovvero come sarà quando è attivo, disabilitato, selezionato.

Stessa cosa per quello che riguarda il forno.

Stessa cosa per quello che riguardano gli input.

Quindi qui ho iniziato a disegnare tutti quelli che potrebbero essere i bottoni che andrò a utilizzare.

All'interno.

Chiaramente non è è troppo specifico e non ha tantissime varianti, ma all'interno sono quelli che mi servono in questo momento per questa tipologia di progetto.

Poi è chiaro che quando noi andiamo a progettare questo tipo di elementi, a seconda della casistica, a seconda di quello che è, bisogna complicare oppure far diventare molto più semplice quello che sono tutti i bottoni.

Quindi potremmo averne massimo noi due o tre.

Non c' è bisogno di averne così tanti all'interno di questo file ho definito anche quelle che sono le sezioni, quindi le tele sezioni del sito internet.

Alcune le ho utilizzate, altre no, ma all'interno mi hanno permesso di capire di costruirle tutte una dall'altra, quindi in questo caso la comunità di design, le interviste e altri elementi come gli eventi.

E qui come vedete una cosa fondamentale di questi componenti e che hanno un proprio una propria struttura costante fissa come che io posso prendere e portare da un'altra parte.

Quindi se noi ragioniamo sul web, il web è interamente fatto a blocchi, quindi immaginatevi un blocco sopra l'altro che vanno a comporre poi quello che tutta la nostra interfaccia se io qui volesse avere meno spazio dall'alto al basso, basta che volete finire questo questo padding interno.

Invece di mettere ottantotto metto un quarantotto e come vedete il sito, la parte di questa sezione diventa più piccolina e il contenuto si rimpicciolisce.

Poi ho anche, ad esempio, lo spazio qua all'interno che indica lo spaccio tra gli elementi, quindi tutta la parte del blocco che è icona, eventi, tipografia e l'hubble sotto con quelle che sono le card.

Quindi qui posso andare, aumentare o diminuire quello che è lo spazio questa parte è fondamentale capirlo adesso e farla in questo momento, perché quando andrete dalla parte di web glow, tornare indietro a rivedere alcuni componenti sarà più complesso.

Quindi conviene sempre fare tutti gli elementi a livello prima di componenti e poi creare delle sezioni uniche.

Magari non fare il componente come ho fatto io, ma l'importante è che diventino poi delle sezioni effettivamente utilizzabili, tornando indietro a vedere effettivamente quello che è poi la costruzione della tipografia dentro workflow che iniziamo a vederlo qua possiamo vedere che fu una delle prime cose che ci andrà a chiedere dopo sarà quello di definire la tipografia su quattro tipologie di media Qui eri, ovvero backstop, tablet, mobili, land Scape, mobili Portrait è solitamente il backstop riutilizzo o mille e quattro e quaranta quattro e quaranta oppure, a seconda del casistica, potrà utilizzare anche degli schermi più piccoli o più grandi.

Solitamente ci sono delle dei dati, se non sbaglio, su un sito che si chiama Starz Starz, backstop quindi in questo ius stats.

Quindi in questo caso io vado a vedere una ricerca sulla mobile verso l'ex usage, quindi quello che posso trovare come parole chiave best, quindi mostra back stop using, quindi qua vediamo ad esempio un dato direttamente da wikipedia che mi dice effettivamente quante più o meno persone utilizzano il la tipo la tipologia di mio daiquiri all'interno di un sistema operativo dall'altra parte questo mi serve per capire come voglio iniziare a progettare e a che risoluzione.

Tornando indietro noi possiamo solitamente decidere due principali l'ideale sarebbe disegnarne tre, ma solitamente quello che consiglio a disegnarne almeno due.

Quindi quella dell'ex top quella mobile è saltando quella tablet che si va a ridefinire a seconda di quello che noi andremo a definire dopo.

Come vedete qua dopo io ho semplicemente riportato tutte queste la tipografia che vi ho fatto vedere prima in entrambe le versioni, quindi cioè una versione mobile e una versione dell'ex top che hanno delle determinate di firenze da una all'altra ho dovuto costruire tutte partendo da la stessa.

Quindi qui come vedete abbiamo un componente che è componente heather sarà sempre redmayne heather lo posso vedere in versione mobile oppure milleseicento novantadue quindi molto più grande come posso anche vederla anche un pochino più piccolina? Dai qua inoltre ho fatto un componente che si va a riaggiustare e di conseguenza, a seconda di quanto io lo ingrandisca o meno il componente rimane più o meno delle stesse, con gli stessi elementi ancorati a destra e a sinistra.

Qui inoltre possiamo vedere che io ho iniziato a mettere da parte tutto.

È un body unico che vediamo qui, che alla fine si compone di questi elementi.

Quindi del lehder della hiro, una punto zero e un elemento sotto c'è un fra me e dall'altra parte possiamo vedere che abbiamo un mein component.

Poi abbiamo la nostra hiro che è uguale a quella che abbiamo.

Dall'altra parte semplicemente in una versione un pochino più piccola e questo ci viene in aiuto perché quando dobbiamo definire ad esempio le sezioni come le hiro o di altro tipo, dobbiamo vedere che tutti i dati che abbiamo inserito in entrambe le parti siano effettivamente coerenti.

Quindi qua, ad esempio, una cosa che non ho fatto è stata non ho ripreso questo elemento rosso all'interno del mobile.

Quindi il desktop non ce l'ha in questo caso, ma non lo volevo e non si vede più e quindi alla stessa tipografia dall'altra parte.

Inoltre, come vedete qua abbiamo gli stessi elementi.

Quindi c' è un titolo e un titolo dall'altra parte una a un heading xs e altri invece un heading xl.

Nel nostro caso, quando andremo a passare all'interno di bob lo avremo un account su backstop quindi, come in questo caso é un account su mobile, solitamente la progettazione di questo tipo.

Quasi tutti lavorano prima sul mobile e poi passano l'ex top ed è la cosa migliore.

Però purtroppo quando si lavora all'interno di di fig, ma anzi interno di workflow si passa subito da ex top e non puoi lavorare prima sul mobile e poi su backstop.

Quindi viene un po' contro il mobile first che noi tutti conosciamo.

Qui vedete all'interno dei tasti e andiamo a riprenderli uguali a quelle che ci sono da destra a sinistra e sono identici e poi all'interno gli stessi elementi.

Quindi un input cominciamo dall'altra parte e ho sotto una serie di dati che mi aiutano a capire quello che stanno a definire qua all'interno di questo campo input tutti gli elementi sono uno sotto l'altro.

Come vi dicevo prima, il discorso di avere il tutto a grandi blocchi ci permette di avere una flessibilità sulla struttura sicuramente, ma soprattutto gli elementi riutilizzabili.

Quindi io definisco già gli elementi con un proprio padding un proprio margin gh all'interno della propria spazzatura interna.

In questo modo, avendo tutto quanto in auto layout se io voglio diventare diventare questo più grande perché eh, mi ritrovo sul prototipo che questa parte è troppo presente, posso andare a semplicemente ad allargare il mio contenuto a livello di altezza e tutto quanto si andrà a riaggiustare insieme a me uguale per il tasto.

Chiaramente tutto questo è fatto prima però ci permette di avere molta libertà nell'avere altre pressioni all'interno del team per riuscire ad avere una migliore idea di quello che vogliamo fare é una migliore struttura scalabile a livello di design.

In questo modo possiamo collaborare con altre persone per lavorare sul contenuto senza che ci occupiamo di ogni volta stare a ridisegnare parte dell'esperienza mentre invece facendo così il componente si auto gestisce lo spazio che il contenuto inizia a progettare all'interno.

Quindi qua chiudiamo e facciamo let's e torniamo come era prima.

Dall'altra parte qua ho definito quello che sono le viste da un punto di vista proprio concreto visivo con la barra di Crom, quindi questo ci permette di vedere soprattutto come l'applicazione il sito che stiamo definendo.

Si va a elaborare all'interno di un contesto reale, quindi con il browser vero e proprio e poi posso avere qua un'apertura del menù in, quindi ho una vista appena terry e poi cosa succede quando tu tappi all'interno del menu e quindi si crea questa x e poi in meno che arriva? Possiamo anche vedere che poi questa pagina una pagina intera non ha niente di tutto questo perché è vuota? In questo modo può essere è totalmente visibile da una persona, anche da mobile, andando a condividere un semplice link, quindi semplicemente andando a fare un prototipo e andando su un floating point e creando un prototipo oppure semplicemente con link condivisibile perché in questo modo non abbiamo ancora delle azioni.

Faccio play dopo che il sistema si è caricato possa andare a condividere lo sharing prototipi, saremo un mobile come in questa fase possiamo fare due cose o lasciare all'interno di nessun canvas, oppure se vogliamo mandarlo a qualcuno da vederlo in ex top, possiamo andare a selezionare da qui una tipologia di iPhone per quello che stiamo progettando, quindi in questo caso un iPhone dici pro andare a definire un background, quindi magari non da prendere a prendere anche i colori della nostra palette che abbiamo utilizzato e poi non definire la tipologia di colore dell'iphone che andremo a vedere.

Se torniamo all'interno del nostro prototipo, vediamo che ora il contenitore non vive all'interno di un tram e in particolare, ma c' è un telefono che lo circonda.

Questo link può essere poi condivisibile all'interno di quello che vi dicevo prima, ovvero il software che vedevamo che si chiama mike spunto design io con questo posso dare e creare un prototipo da far testare qualcuno.

Un prototipo che può essere semplicemente con due azioni specifiche che può essere il clic il tapping all'interno di quella che può essere la l'esperienza che noi stiamo disegnando.

Tornando qui, qua vi ho insegnato un breve prototipo che mi aiuta semplicemente ad avere l'idea di quello che succederà.

Quindi rispetto a prima c' è una brevissima animazione che vedete qua Ehi, rusty è come quello che abbiamo visto dall'altra parte.

In più ho voluto fare un circo ed qua, ovvero la prima cosa che voglio vedere come viene il sito è primo come viene su Chrome, che è una delle browser più utilizzati al mondo e quindi di conseguenza mi prendo più casistiche in questa maniera tappando qua vedo come verrebbe all'interno come devo pensare di disegnarlo poi all'interno di whitlock.

Però una volta che io scorro questa non rimane come immagine.

Quindi ho creato un cit dove tappando semplicemente la hiro, il contenuto diventa totalmente scroll, abile con esattamente la barra che dovrebbe comparire dentro a roma quando il contenuto scorrere di tappando qui dentro ripasso dall'altra parte in questo modo io poi posso condividere questo con qualcuno che una persona può visualizzare l'esperienza prima ancora che io sia passato all'interno di golf.

In aggiunta, alcune delle cose che vi consiglio sono due siti internet che utilizzo tantissimo una e-type wolf dove all'interno trovate i migliori tipografie che ci sono in giro su altri siti.

Alcune sono a pagamento, ma ci sono delle versioni che vi suggeriscono su Google font che sono invece gratuite.

Chiaramente.

Personalmente preferisco sempre scegliere di fronte a pagamento perché in un modo o nell'altro riescono a identificare meglio il sito internet come proprio, quindi non utilizzando magari un roboto, un Google fonts google però chiaramente se non c' è un budget di dietro inizialmente in partenza sta benissimo fare qualcosa con un font gratuito come Google font.

Quello che eviterei sono fonti che sono molto difficili da leggere alla alla propria lettura e che la prima cosa, quando scegliamo un font, oltre al fatto di rappresentare, di scegliere un carattere che ci rappresenti, rappresenti il servizio, il business.

Quello che stiamo facendo deve essere soprattutto qualcosa che sia leggibile bene, se ne scegliamo uno per i testi, proviamolo.

Prendiamo il testo che può essere il Google sa il google Google font, come dicevo prima, e inseriamo all'interno di un canvas di un telefono mobile dentro, filma e testiamo lo con delle persone.

In questo modo possiamo capire se il nostro target abbiamo in testa prima ancora di iniziare a progettare.

Può effettivamente capire attraverso un testo con il phon che abbiamo scelto e ci sono differenze molto differenti tra una tipografia come può essere un roboto ha dodici tredici pixel, è un Inter invece vai a stessa misura, quindi dipende sempre la tipografia.

Altra cosa che vi consiglio è di scaricarmi un plugin per Chrome che sia fonte ninja, che permette di semplicemente con un click ispezionare tutti fonte che sono presenti all'interno di un sito.

In questo modo non dovete andare tutte le volte con ispeziona elemento.

Volete semplicemente utilizzare questo strumento per riuscire a leggere prima la tipografia