Lezione gratuita dal corso UI Design
Ok, ma abbiamo capito come abbinare il nostro testo.
Abbiamo capito tutta una serie di inform dove prendere ispirazione, dove cercare le font, ma adesso dobbiamo capire quando funzionano.
Quindi una parte fondamentale per noi che siamo dei progettisti è testare il testo che sembra uno scioglilingua, però invece appunto è una parte fondamentale.
Anche qui Rick ricorre questo Blair in test perché sembra un gioco, ma in realtà è una parte fondamentale che è un po', come quando noi chiudiamo un po', gli occhi per simulare, no, per vedere sfocato.
Noi lo facciamo con un software qualsiasi, quello che ci viene diciamo meglio a portata di mano, e quello che si fa con questi test è di prendere l'abbinamento tipografico che abbiamo scelto e metterlo sopra con una via che lo sfoga tutto per vedere se il contrasto e la leggibilità continuano a funzionare.
Più il contrasto è leggibile, diciamo no al l'armonia eleggibile anche quando viene sfocato il testo, più siamo sicuri che stiamo portando a casa un prodotto che sta funzionando, altra cosa importante.
E questo lo dico perché anche io all'inizio faceva un casino enorme quando si inizia a progettare tipografia e prodotti appunto digitali e poi lo vedremo quando lo metteremo.
In pratica bisogna iniziare a ridurre le scelte, quindi fare in modo di creare delle scale tipografiche.
Ma questo lo vedremo anche con i colori dov'é riduciamo la scelta, noi tiriamo fuori.
Sono dodici stili diversi per dimensioni della tipografia e utilizzeremo e ci come dire ci obbligheremo ad utilizzare solo quelle dimensioni lì per fare in modo che a agevole remo lo sviluppo.
Ma b soprattutto più importante saremo coerenti nella progettazione del design per i nostri utenti.
Quindi sembra una cosa come dice ma come? Io già riduco le scelte senza aver iniziato a progettare? Sì, perché tanto se vado da una molto piccola, uno molto grande, passando per dodici scalini, sicuramente ho coperto tutto, come dire lo scenario delle mie possibilità.
Ma bloccare già queste scelte mi aiuta poi a creare un design super coerente e sostenibile.
Altra cosa che è importante per la parte tipografica è capire quali sono le dimensioni corrette.
Questo sembra banale, ma non è così facile da scegliere, soprattutto se si è alle prime armi e soprattutto, per esempio, una cosa che noto sempre anche con i miei alunni.
Quando siamo al master che progettano delle cose che zoomata al duecento percento funzionano, ma quando poi andiamo a vedere le al cento per cento il valore reale con cui poi i nostri utenti le vedranno, non si legge niente oppure è tutto troppo grande.
Quindi anche qui diamoci è come dire del possiamo darci delle regole.
Ad oggi delle buone linee guida dicono che se volete progettare un testo leggibile usabile sul web non dovete scendere sotto i sedici più pixel.
Ok, certo si puo' arrivare per delle eccezioni a dodici dieci.
Ma parliamo di labelle accessorie, di magari di didascalie di piccoli e movimenti, ma non un testo da leggere sotto i sedici punti medium punto com non so se lo conoscete, è un insomma una piattaforma dove ci sono tantissimi attivisti da leggere che vi con che vi consiglio lì il testo, per esempio addirittura sui ventiquattro pixel, che sembra immenso, ma vi assicuro una delle esperienze di lettura più piacevoli che oggi ci siano sul web.
Questo per quanto riguarda il backstop.
Per quanto riguarda invece il mobile, la buona tipografia si può aggirare tra i quindici e i diciassette pixel.
Questo per quanto riguarda sempre i testi da leggere poi ovviamente sui titoli si può andare sempre un po' di più, ma mai sotto quella dimensione, perché rischiamo che il nostro utente non lo leggo.
Quindi fissiamo in questi punti misura minima sul web sedici pixel misura minima sul mobile dai quindici ai diciassette è pixel, altro elemento importante, ma anche qui non per ultimo l'inter linea perché sto per tutto questo tempo sulla tipografia, perché è veramente il cuore dei nostri progetti digitali l'inter linea che cos'è appunto la distanza tra una linea e l'altra all'interno di un blocco tipografico, mentre per esempio a cui dobbiamo fare una distinzione, mentre quando si stampa un libro si stampa una rivista, qualcosa di cartaceo, interlinea molto più ridotta, un po' anche per esigenze economiche, perché chiaramente piu' aumentiamo l'inter linea più carta stampiamo no.
E un po' perché la convenzione anche che un libro o una rivista voi potete avvicinarlo in maniera diversa.
Ma soprattutto la carta è più rilassante del monitor perché la luce viene rifratta, non viene, diciamo non ci arriva un led da dietro che comunque ci affatica la vista, mentre sei uova appunto l'inter linea.
Si tende ad essere più ampia se dovessimo dare un parametro, mentre sulla carta il valore della tipografia viene moltiplicato per una punto.
Due su invece il digitale si tende a moltiplicare il valore del della dimensione iniziale della fonte per uno punto tre fino ad arrivare ad una punto cinque.
Questo vuol dire appunto che se abbiamo Intel una fonte di sedici pixel, una buona inter linee di ventiquattro pixel, questi calcoli potete farli con una calcolatrice.
Ma vedrete, lo potremmo fare anche all'interno del tour che utilizzeremo dopo che si chiama Fig.
Quindi potete proprio farlo manualmente li' in modo che non dovete mettervi a che diciamo fare beautiful mind mentre starebbero impostando interlinea oltre all'inter Lina, è importante capire la larghezza del blocco.
Il blocco d d una buona tipografia deve essere relegato ovviamente al numero di battute.
Questo perché? Perché se voi fate una fonte molto piccola è un testo molto lungo.
Immaginate il nostro utente che va con l'occhio avanti e indietro, avanti e indietro, avanti e indietro, si perde e non sa più dove inizierà la seconda riga.
Quindi anche qui le convenzioni vogliono che un buon blocco testo a prescindere, diciamo nella sua dimensione, contenga tra le è quaranta e le sessantacinque battute per rig.
Se facciamo blocchi di questa lunghezza, siamo sicuri che il nostro utente li leggerà facilmente.
Se andiamo a scavallare questi numeri, diventa sempre un po' più complicato.
Ovviamente, ripeto, qui vedete una larghezza di riga su questo monitor è sempre relativa alla dimensione della fonte che stiamo utilizzando anche qui.
Quindi quindi abbiamo una summa finale di come dobbiamo utilizzare la nostra tipografia.
Dimensioni minime su desktop mobile la legge che non ha altro che l'inter che Scusate em la giustezza del nostro paragrafo la light se non altro che l'inter linea.
Quando avete dei dubbi guardate questo specchietto vi aiuterà a muovermi meglio.
Poi ovviamente tanto fa anche come dire l'esperienza il gusto e questi parametri possono essere elusi e rese ancora diciamo più estremi.
Però se rimanete in questi parametri, siete sicuri che state progettando un buon prodotto digitale.
Se volete fare una prova, vi vi invito.
Andate su questo sito che si chiama The Perfect Triangle, dove potete mettere alla prova la vostra abilità.
Lui metterà dei test mettendo dei blocchi di testo con dove dovete impostare a seconda di quello che lui dice o la giustezza all interlinea o la dimensione del testo.
Quando azzeccate perfettamente questi parametri il triangolo sarà esattamente equilatero al centro, quando sbaglierai te, la piramide tenderà ad andare a destra o a sinistra per dirvi che avete sbagliato.
Ultima cosa ma fondamentale l'allineamento e dopodiché diciamo questa somma sulla tipografia la chiudiamo l'allineamento sul web è solo di un tipo due tre ma dobbiamo assolutamente escludere il giustificato che cos'è l'allineamento giustificato quel dell'allineamento per cui il testo lo vediamo a blocchetto, cioè non vediamo che va a capo in mok naturale e perché può andare a blocchetto é questo per esempio nella stampa succede spesso perché le parole vengono sì l'abate e mandate a capo con un trattino.
Questo accade nell'editoria ok, non può accadere nel web perché tecnicamente la sillaba azione è molto complicata da fare per diversi linguaggi per insomma di codice è molto complesso appunto da fare lato codice e soprattutto diversi.
Gli studi dimostrano che è molto più facile, anche se è meno bello leggere un testo epigrafe a sinistra che va a capo naturalmente quando la parola finisce piuttosto che spezzarla piuttosto che vedere questi allineamenti, così che spesso, soprattutto quando i blocchi sono molto piccoli, immaginate sul mobile dove il nostro spazio ristretto creano proprio delle aberrazioni visive dei dei canyon e vedete qui dei grandi buchi tra una cosa e l'altra per far entrare tutto in maniera Preci e rende e rende, diciamo un'aberrazione visiva che è veramente poco poco gradevole.
Quindi, mi raccomando, non allineate a blocchetto, ma allineate sempre a sinistra.
Questo è fondamentale.
Abbiamo quindi visto un po' tutto quello che riguarda la tipografia.
Mi raccomando, mettiamo i punti uno dopo l'altro, perché questa diventa veramente le fondamenta del nostro progetto.
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.