Lezione dal corso UI Design
Ovviamente dobbiamo iniziare a pensare nel momento in cui progettiamo gli hai, quindi progettiamo prodotti digitali.
Dobbiamo iniziare sempre a immaginare che quello che facciamo deve essere replicabile.
Non solo per noi, per altri designer che magari potranno lavorare insieme a noi nel gruppo, ma anche semplicemente per noi stessi, non solo per rendere il lavoro è più veloce e più fluido, ma anche per rendere più coerente tutto il sistema visivo che stiamo progettando.
Quindi dobbiamo iniziare a imparare a, come dire, standardizzare anche la parte proprio degli elementi grafici.
Quindi non solo gli attributi no, come i colori, la tipografia, per esempio.
Però possiamo dire tranquillamente che nel ci sono degli elementi che si ripetono costantemente.
Ripeto, non stiamo facendo una campagna pubblicitaria, non stiamo facendo una branda, i denti ti stiamo facendo un sistema per interagire.
E questi sistemi spesso e volentieri hanno appunto degli elementi, soprattutto quelli interattivi, ma non solo, che si ripetono costantemente all'interno dell'interfaccia.
Uno di questi è il diciamo il più frequente è quello, per esempio, del bottone faccio questo esempio perché è sicuramente uno degli elementi che andremo a riutilizzare costantemente all'interno dell'interfaccia quando è creiamo appunto un layout, quello che dobbiamo iniziare a fare è nel momento in cui sappiamo che qualcosa la riutilizzo eremo almeno più di una volta.
Là dobbiamo trasformare in quello che in gergo si chiama un componente, cioè qualcosa che può essere riutilizzato più volte e che ha una matrice da qualche parte che possiamo variare all'occorrenza che a cascata ci farà cambiare tutte quelle che in gergo vengono chiamate le istanze, cioè le repliche di questa matrice originale.
Andiamo a vedere come crearle all'interno di Fig.
Ma è molto semplice.
Supponiamo che vogliamo creare un pulsante con con questa call to action questa freccia.
Innanzitutto, la prima cosa che dobbiamo fare ritorniamo sull'argomento che abbiamo visto precedentemente l'aut aut se vogliamo fare in modo che questi due oggetti siano tenuti insieme da una regola all'allineamento orizzontale da uno spazio tra gli oggetti tra di loro e da un padding generale che crea, diciamo la forma del pulsante, abbiamo detto dobbiamo semplicemente selezionare questi due oggetti e dirgli che sono tenuti insieme da auto layout.
Come vedete qui mi crea un contenitore che lui chiama fra noi.
Andiamo a dire che questo contenitore a delle misure dei padding sopra sotto costanti mettiamo venti per esempio in questo caso sopra, sotto a sinistra e a destra.
Ok, adesso vedete che è un po' sbilanciato.
Ovviamente posso in ogni momento andare ad allineare gli oggetti all'interno.
Posso andare a dare un colore al mio pulsante? Posso chiaramente andare tramite il corner rebus qui in alto andarvi a dare anche un arrotondamento.
Ora vedete che è un po' sbilanciato, nonostante gli abbia dato é una misura identica sopra e sotto.
Questo perché spesso le interlinea e delle fonti non sono sempre lineari.
Quindi qui vado un po' ad aggiustare otticamente, magari aumentando il parametro sopra in modo che risulti tutto più bilanciato.
Così abbiamo creato un pulsante, ma non l'abbiamo ancora reso qualcosa di replicabile.
Come facciamo? Aspettate che vado anche a mettergli un colore che abbiamo gia' standardizzato.
Gli vado a mettere un nome facendo doppio click sull'angolo in alto a destra.
Ora come faccio? Andiamo ad utilizzare questa parte dell'interfaccia che ancora non abbiamo visto e nello specifico questa icona con quattro rum Betty in alto a sinistra vedete che se vado sopra mi dice crea componente che cosa succede? Succede che questo oggetto diventa in innanzitutto visualizzata in modo diverso.
Vedete che c' è un viola e non più l'azzurro vuol dire che questo oggetto se io adesso lo prendo e lo copie lo replico guardate che cosa sta succedendo qua a sinistra l'originale a quattro rum betty pieni e la sua replica a un trombetta vuoto vuol dire che questi due oggetti sono replicati da sono tenuti insieme da questa logica che li lega amatrice distanza questo è l'originale, questa è la sua replica, ma queste repliche che io vado a creare e vado a spostare in pagina sono sempre vincolate all' originale.
Vale a dire che se io qui nel pulsante originale vado a cambiare per esempio il colore a cascata andrà a replicarsi questa modifica su tutte le istanze all'interno della pagina.
Questo quindi vuol dire che se adesso io vado anche a cambiare qualcosa all'interno della tipografia, quindi della scritta cambierà e si replicherà dappertutto.
Questo però accade se io vado a modificare la matrice, quindi la base, il componente originale.
Se però io vado a modificare la sua istanza, come faccio a capire se una cosa è un'istanza o è la matrice originale? È molto semplice, lo posso vedere sia a destra da qua vedete che l'icona è sempre un rombo vuoto mentre se avessi selezionato l'originale qui, non avrei questa visualizzazione qui.
Non avrei la possibilità di vedere le stesse le stesse proprie proprietà e l'altra, cosa che me lo fa capire.
Appunto.
È qui.
È qui a destra.
Mi dai il link diretto perché ovunque io mi trovassi, supponiamo che questa call to Action adesso noi andiamo a mettere in pagina.
Quindi la mettiamo esattamente qui e dico Ok, voglio cambiare il suo simbolo originale, il suo componente originale.
Come faccio a ritrovarlo? Semplice.
Andando qui in alto a destra, lui mi ricollega alla sua matrice originale.
Ma tornando a prima, qual è la differenza tra matrice istanza? La differenza è che l'istanza può essere sovrascritto ed essere cambiata nelle sue proprietà.
Noi possiamo cambiare colore Shape ombre.
Possiamo nascondere alcune cose cose di quelli stanza, per esempio, potremmo nascondere l'icona della freccia.
Possiamo cambiare il testo senza andare a cambiare la radice.
Che cielo origine.
Quindi se per esempio in questo pulsante io andassi a scrivere Questa è una call to action.
Come vedete, quello che sta succedendo è che la matrice è rimasta invariata, mentre la sua istanza è cambiata.
Però portandosi dietro gli attributi di base.
Vale a dire che se nella sua matrice io adesso vado a cambiare, per esempio il tipo di tipografia, questa mi cambia a cascata su tutti gli altri.
Se tutte le altre istanze all'interno della pagina, ma non va a cambiare il testo che ho inserito dentro nella sovrascrittura dell'istanza.
Questo se ci pensate, diventa super comodo, perché è chiaro che se noi avessimo un oggetto replicabile, per esempio su Photoshop, esistono questi oggetti avanzati che ci consentono questa modalità molto simile.
Ma qual è il vincolo di quella modalità che spesso e volentieri noi abbiamo è una un oggetto collegato, ma non possiamo variare niente di questa di questa qua connessione.
Invece in questo caso noi possiamo andare a cambiare vari elementi.
Addirittura, se volessi, potrei andare a cambiare di questa coltura action anche il colore di sovrascrittura.
Quindi se io qui andasse a dire che invece di questo colore volessi questo piccolo viola, potrei utilizzarlo.
Potrei andarlo a sovrascrivere senza andare a cambiare la sua matrice originale.
Ok, quindi questo è un elemento fondamentale, perché quando iniziamo a progettare la a creare questi elementi replicabili ci aiuta ovviamente a snellire il lavoro.
La buona prassi vuole che invece di creare ovviamente sparsi questi componenti in giro.
Nel nostro documento li' raggruppiamo all'interno di una pagina specifica che chiameremo components.
Possiamo farlo in due modi o manualmente.
Quindi noi andiamo proprio a fare me la X o contro l' x di questo componente.
Andiamo a creare una pagina che chiameremo components e ce ne andiamo ad incollare dentro.
Questo ci aiuterà come Becks Praxis a fare in modo che sia noi sia.
Chiunque arriverà dopo nel file saprà che tutti gli oggetti replicabili che abbiamo costruito lì troveremo qui da qualche parte all'interno della pagina components.
Questa è è una buona pratica.
Altrimenti quello che possiamo fare è supponiamo per esempio, che noi adesso vogliamo standardizzare.
Quindi rendere un componente questo luogo che cosa facciamo? Andiamo sempre qui.
Clicchiamo sull'icona Cina con i quattro Trombetti adesso per portarlo nella pagina components, noi possiamo anche qui ricorrere ad un plugin.
Vi ricordo che facendo me la picchiamo il menù dei comandi veloci.
Cerco il comando, il planking component Paige e seleziona la voce Mu select Maastricht Sai che cosa fa? Che in automatico ora voi lo vedrete sempre qua.
Ma quello che sta succedendo è che questo come potete vedere dalla sua Concina trombetta in outline è la sua istanza, il suo ma il suo.
Come dire il getto master si trova cliccando qui.
Lo vedrò nella pagina components che ho creato prima.
Ok, questo veramente ci aiuta ad essere molto puliti nelle layout e ci aiuta soprattutto poi a fare in modo che tutti gli oggetti che abbiamo costruito, che sono replicabili, li troviamo sotto la sezione asset dentro la pagina local components.
Quindi quando noi vogliamo, per esempio utilizzare qualcosa e rimetterlo in pagina e sapere che sta sta sapendo che è stata messa nella pagina dei componenti.
Vedete, lo troveremo molto rapidamente qui sotto, components sotto assets e li troviamo tutti raggruppati insieme sotto la sezione locale Component.
Quindi posso prenderlo, trascinarlo più volte e poi andare a sovrascrivere come abbiamo visto prima.
Ovviamente qui noi abbiamo lavorato solo con pochissimi componenti, ma quello che ovviamente dovremmo vedere la fine di un progetto più corposo è avere tantissimi elementi che vanno a costruire i mattoncini sono dei piccoli Lego che costruiscono la replicabilità della mia interfaccia.
Ora, ovviamente dipende dal progetto.
Chiaramente, se si tratta di una landing page, probabilmente avremo tre quattro elementi che si replicano una call to action.
Il logo potremmo addirittura Ray è componente componenti gli stessi blocchi testo che compongono la narrazione della mia landing page, ma in progetti più complessi.
Immaginate una Dashwood.
Immaginate un commercio dove ci sono tutte le card, per esempio dei prodotti che si replicano.
Lavorare in questo modo vi aiuterà ad essere molto più efficienti e lineari nel vostro flusso di lavoro.
Learnn è la piattaforma online che ti aiuta a 360 gradi a crescere nel digitale. Sviluppa competenze con oltre 220 corsi, condividi i tuoi risultati, fai networking con otre 120.000 professionisti/e e oltre 300 aziende.
Vogliamo cambiare l’Italia, una persona alla volta.
Per farlo ci proponiamo di democratizzare l’apprendimento e accelerare la crescita di persone, idee e aziende attraverso strumenti tecnologici a supporto di qualsiasi professionista.
Learnn prevede un piano totalmente gratuito (Free) che ti permette di iniziare qualsiasi corso che abbiamo su Learnn.
Per chi volesse finire i corsi, ottenere certificazioni e connettersi con professionisti e aziende, Learnn Pro permette di avere accesso illimitato a tutto questo. Il corso di Learnn Pro è 9.99 euro / mese e puoi disdire quando vuoi.
Per i team di aziende abbiamo anche un Piano Team con oltre 300 clienti aziendali.
Potrai seguire i contenuti da computer, tablet e smartphone.
Scarica l’App iOS/Android Learnn e segui i contenuti in modalità video, audio e testo.
Learnn ha un piano gratuito che ti permette di accedere all 40% di ogni corso in maniera gratuita e solo con la tua email.
Learnn offre sia un piano gratuito con accesso limitato ai contenuti, sia un piano PRO del costo di soli 9.99 euro al mese con cui potrai avere accesso a tutti i nostri contenuti senza limiti o sorprese.
Una volta completata l’iscrizione sarà possibile gestire i propri dati e disdire in qualsiasi momento e in completa autonomia.
No, non offriamo certificazioni, facciamo di meglio.
Man mano che completi corsi potrai verificare le tue competenze e condividerle sul tuo profilo LinkedIn o CV.
Inoltre abbiamo sviluppato una feature chiamata Profile attraverso il quale otterrai un link personale per mostrare in tempo reale tutti i contenuti da te completati e molto altro.
Immagine personale, username, badge, link esterni e molto altro.
Crea una vera e propria sales page dove il prodotto in vendita sono le tue competenze.
Se avessi altre domande puoi usare la live chat qui di fianco.
Per partnership compila questo form
La nostra vision è rendere l'Italia famosa nel mondo per l'esecuzione.
La missione di Learnn
è accelerare la crescita di ogni individuo rendendo accessibili conoscenza, opportunità e tecnologia per avere un impatto positivo sul mondo e sugli altri.
Tutto incluso (come Netflix), IVA inclusa, nessuna sorpresa o addebito indesiderato.
Disdici quando vuoi, in 1 click.
Scegli di migliorare ogni giorno per 12 mesi senza interruzioni scegliendo il piano annuale.
In un unico pagamento annuale
Disdici quando vuoi, in 1 click.
Con l’abbonamento otterrai:
Consuma i +200 corsi e webinar di Learnn da webapp o app iOS e Android, in formato video, audio o testo.
Con l'abbonamento a Learnn hai accesso a tutto (proprio tutto) ciò che contiene la piattaforma.
Ogni mese registriamo nuovi corsi su tutto cio di cui potresti avere bisogno nel mondo digitale.
Con l'app Learnn trasformi ogni momento di vuoto in un'occasione di apprendimento.
Scarica tutto il materiale che ti serve e utilizza i moduli riassuntivi per fissare i concetti.
Ogni settimana nuove offerte di lavoro da parte di tantissime aziende che operano nel mondo digitale.