Ok, abbiamo visto tante cose, aveva visto che il percorso per diventare bravi i tuoi designer è è lungo, ma adesso iniziamo appunto a mettere proprio mani nel nostro nelle out.

Ora è importantissimo sapere che quando si progetta questo da sempre, ma nel digitale ancora di più quando si progetta un progetto digitale è fondamentale avere chiaro è insomma progettare con delle linee guida.

No, noi in gergo parliamo sempre di di griglie di playout e griglie.

Il concetto delle griglie non è assolutamente un concetto vecchio, non è un concetto nuovo concetto che ci portiamo dietro.

Già.

Insomma, dalle epoche riesce rinascimentali della pittura è un grande, per esempio.

Designer invece italiano che è morto qualche tempo fa insieme a Massimo Vignelli, diceva una frase che io trovo molto, molto bella e fa capire bene qual è il senso delle griglie nella progettazione dei prodotti oggi, ed è quello che è.

Una griglia è come un indumento intimo, lo devi sempre diciamo, portare, ma nessuno deve vederlo.

E questo è quello che oggi appunto è.

Progettare attraverso le griglie vuol dire proprio questo, cioè sempre avere delle griglie dietro che supportano il nostro design, ma ovviamente non devono essere un vincolo non deve essere qualcosa che è così.

Come dire é evidente che sembra tutto allineato, sempre lo stesso, appunto, senza ritmo, senza, diciamo, senza anima.

Come dicevo, questo concetto delle griglie, non solo quelle ovviamente verticali orizzontali, ma linee che guidano la progettazione visiva ci sono, ci sono da sempre è come vedete qui C' è un'immagine che sto facendo vedere nelle diapositive di Masaccio.

In questo quadro, dove crea tutta una serie di linee di guide per il punto prospettico che aiutano la composizione Quinn.

Per Grillo intendiamo comunque tutte le guide visive che aiutano a leggere meglio la la, il design o o, insomma, la pittura, in un contesto piu' ampio.

E già diversi anni fa è nato questo canone.

Si chiama canone van de Graaff, che è una ricostruzione storica del Medioevo per la progettazione di un libro.

Guardate che bello! Per progettare il migliore equilibrio di un testo all'interno di una pagina veniva utilizzato questo si sta prima si tiravano delle diagonali all'interno, della pagina dei vari punti, insomma focali all'interno delle due intersezioni e si ricavavano questi due blocchi con un meraviglioso ed armonico equilibrio all'interno della pagina.

I libri più belli che vedrete che avrete tra le mani rispondono proprio a queste diciamo intersezione di linee guida creato proprio da questo signore che si amava Van der Graff.

Ma poi comunque, le griglie e le guide sono sempre state a disposizione come elemento strutturale portante della progettazione dei design.

Per esempio, qui vediamo una classica progettazione a griglia orizzontali e verticali che tipico per esempio della tutta il movimento del design svizzero degli anni trenta, quando si sono iniziate a progettare i primi libri con ovviamente grafica e design insieme si è iniziato a utilizzare il metodo delle griglie per aiutare gli immagina motori a fare in modo che ci fosse ritmo, ma anche una struttura costante e coerente all'interno dell' impaginazione.

Questo è, per esempio un esempio che ancora oggi viene utilizzato all'interno di libri e riviste.

Chiaramente i libri di lettura classica non hanno questa struttura così complessa, però immaginate le riviste dove ci sono piu' moduli da gestire, più elementi da gestire in pagina, spesso e volentieri, anzi, direi assolutamente sempre si usano queste griglie e la cosa interessante è bella, che è.

Quello che sta accadendo è che è accaduto che tutto l'elemento, diciamo della modularità delle griglie è stato portato anche nel digitale.

Quindi anche oggi chi approccia ad un prodotto digitale, una landing page, un sito web, un lavora con queste griglie uno perché rendono piu' facile il design, diciamo no, è più coerente.

Gli diamo anche, come dire, una coerenza visiva degli allineamenti che aiutano a scansionare meglio il nostro contenuto.

In secondo luogo, le guida, le guide, le griglie sono fondamentali perché rispecchiano i framework che oggi ci sono lato front-end di sviluppo.

Quindi vuol dire che se noi partiamo con un certo asset specifico in questo caso, per esempio, quasi sempre oggi si progetta sul backstop a dodici colonne.

Noi progettiamo di predisporre i nostri elementi all'interno di queste dodici colonne stiamo facendo, diciamo già agevolando il lavoro dello sviluppo che ha dei framework preimpostati.

Quindi è dei blocchi diciamo, di codice già scritto, che sanno già che se io gli dico guarda, ho progettato per riempire sei colonne.

A loro basterà scrivere una ri una piccola stringa di codice che gli dirà che quel blocco occupa sei colonne e saranno in grado di rispettare perfettamente il design del mio bailout.

Uno di questi film, per esempio, si chiama Bootstrap, un altro è foundation, quindi lavorare con le griglie oggi è diventato un valore aggiunto, anche perché viene incontro sempre di più alle necessità di lo sviluppo.

Attenzione però è vero che dobbiamo utilizzare queste griglie, possiamo utilizzarle cercando di posizionare gli elementi in sia in maniera simmetrica che non riempiendo queste colonne.

Ma non dobbiamo essere necessariamente così rigidi.

Come vediamo dalle slide non possiamo occupare magari sette colonne, una lasciarla vuota riempirne quattro non vuol dire che se abbiamo tutte le colonne a disposizione le dobbiamo riempire tutte.

Ma dobbiamo semplicemente fare in modo che gli elementi si posizionano alla fine o all'inizio di una di queste colonne.

Quindi una volta imparata la regola impariamo anche a romperla e romperlo vuol dire anche spesso, magari poter fare un piccolo scalino a destra a sinistra, quello che in gergo si chiama l'offset all'interno delle out, perché comunque è come dire costruito sempre all'interno di una è di una regola.

Questo è, diciamo il web per il web fino a poco tempo fa.

Adesso poi la tecnologia ci sta portando ancora più avanti.

Oltre alle colonne, si può sviluppare in quello che in gergo viene chiamata proprio in griglia, quindi non solo con un grillo con colonne verticali, ma anche quello che viene in gergo definito il CSS grid, cioè questa nuova tecnologia front-end che consente di creare intersezioni sia orizzontali che verticali, mentre prima ci si muoveva dato un numero di colonne solo su fasce orizzontali, adesso c'e' una nuova tecnologia che è sempre più simile alle grigie che abbiamo visto delle riviste di impaginazione che vengono utilizzate in editoria.

Questa nuova tecnologia consente di creare, diciamo, blocchi intersezioni sia sull'asse orizzontale che sull'asse verticale.

Questo ci aiuta anche a capire che i bravi o i designer sono persone che in qualche modo sono sempre a contatto con la tecnologia e con lo sviluppo.

Perché non possiamo ipotizzare di sviluppare un prodotto, disegnare un prodotto digitale senza sapere che cosa si può fare oggi.

Oggi si può fare quasi tutto, però è bene che noi abbiamo gli strumenti per sapere come si sta evolvendo proprio il mondo della programmazione, per andare di pari passo e non farci trovare impreparati.

E un ulteriore passo è stato fatto ancora avanti con quest'altra tecnologia che siamo flex box, che è diciamo sempre molto simile.

Però mentre prima nella nella diciamo impaginazione a colonne a griglie, le colonne devono riempite integralmente.

Flex Box lavora con un altro principio ancora che dobbiamo conoscere, che è quello di lavorare per percentuali di contenuto.

Vale a dire che posso creare dei moduli e dirgli tu non mi importa quante colonne a questo layout, ma questa riga la dividi in percentuali di te quindi, oppure lividi per quattro.

Ogni modulo vale oppure posso dividere che un modulo e il restante occupa ancora.

Un altro modo di percepire e di progettare.

Sono tutti metodi diversi, però sono tutti i metodi che possono essere utili di volta in volta a seconda del nostro, del nostro bisogno progettuale.

Ovviamente prima di partire con un metodo piuttosto che con un altro, è bene interfacciarsi quello sviluppo mi è capitato diverse volte di partire in quarta e dire facciamo tutte queste regole in percentuali vado progetto faccio e poi che è successo? Ma i programmatori dicono non si puo' fare.

Io sapevo benissimo che si poteva fare perché avevo studiato, avevo visto fa.

Però poi ho avuto un muro, diciamo di gomma da parte dello sviluppo, non perché, diciamo in realtà non sapevano realizzarlo loro e questo può succedere.

E anche perché quella tecnologia non era ancora così diffusa e supportata da tutti i browser, no.

Quindi anche qui prima di partire in quarta e conoscere andare con una tecnica piuttosto con un'altra è bene confrontarsi con chi poi svilupperà il progetto perché altrimenti la batosta diventa è diventa grossa, ma l'importante adesso partire preparati e ricordarsi che quando si inizia a progettare lo sviluppo fa parte del team dal primo giorno e non dall'ultimo altra cosa riguardo proprio gli out e diciamo alla sua gestione degli spazi è una cosa che vi consiglio caldamente è quella di imparare a gestire il ritmo verticale, vale a dire il ritmo con cui noi leggiamo verticalmente le cose, per fare in modo che tutto sia più omogeneo e più leggibile dal insomma, dai nostri utenti cerchiamo di creare un ritmo modulare fatto di step progressivi per un'unità che decidiamo noi.

Può essere otto dieci sedici.

Decidiamo noi quale.

Però facciamo in modo che tutti gli elementi che verticalmente si andranno a predisporre sul nostro layout è come dire afferiscono a questa un'unità di misura costante o minima moltiplicata.

Non vedremo mai queste righe orizzontali che adesso vedo qui rappresentata dalle nostre slide, ma sembra come dire quasi magico, ma quando un buon ritmo verticale implementato bene, senza righe, tutto sembra no, naturalmente più armonico.

Quindi imparate anche a gestire questo é per esempio prima visitavo il numero otto perché spesso nel design digitale si usa questa unità di misura minima, mentre in alti diciamo contesti si usa sempre quasi un multiplo di dieci no, non so se voi mi è capitato che magari sul photoshop illustrator voi spostate le cose é quello che viene chiamato in gergo il mugen no quant'è lo spostamento con la frecciatina eh uno o dieci di base impostato sui vostri software, mentre quando fate sugli out digitale e poi se volete lo vediamo anche su fig.

Ma potete impostare otto perché otto e multipli di otto, perché questo numero qui è il numero che è meglio diciamo si divide per tutte le risoluzioni più comuni che oggi ci sono.

Ovviamente non lotto che si divide, ma tutte le risoluzioni più comuni si dividono meglio per otto che perdi dieci come potete vedere da questa tabella, le risoluzioni più diffuse ad oggi con si dividono molto bene molto bene con i multipli di otto.

Quelle con i multipli di dieci invece hanno molte più x rosse su all'interno della loro tabella.

Quindi se dovete spostare gli oggetti all'interno del vostro yacht otto multipli di otto chiaramente sedici ventiquattro, trentadue, quaranta e via dicendo.

Ci sono in gergo quelle che vengono descritte due tipologie di grid harry hard e soft hard, quella diciamo all'interno di uno stesso modulo ci si muove sempre con lo stesso rapporto, quindi come vedete più a sinistra, per esempio sedici su tutti i margini.

Otto tra gli elementi interni una soft grida invece semplicemente una griglia che lavora con molti piu' di otto senza questa restrizione, quindi magari posso avere in altri in alcune zone trentadue in altre sedici in altre ventiquattro, quindi lavoro per multipli di otto, ma non in modo così standard.

É netto sempre tornando alle griglie, ovviamente non è che se ci troviamo davanti dodici colonne li dobbiamo riempire tutte.

Immaginate che è brutto che è un forum dove voi riempite dodici colonne orizzontali su monitor grande è veramente obbrobrio su.

Quindi è vero che abbiamo le colonne, ma come vi dicevo prima dobbiamo solo occuparne alcune e quindi vediamo un esempio se dobbiamo fare un foro d'ingresso una schermata di login, non riempiamo le tue, ci basta riempire magari le sei centrali piuttosto che andare a riempire tutto e mi raccomando, lo le griglie devono essere così gestite.

Vi appoggiate tra l'inizio e la fine di una colonna, ma non riempite mai quello che albergo in gergo viene chiamato il butter, cioè lo spazio di inter colonna è uno spazio che non deve essere utilizzato nel design, quindi come vedete a destra non va bene.

Come vedete a sinistra invece in questo caso va bene e mi raccomando, la griglia va assolutamente considerata per i macro oggetti.

Io appoggio un format qui appoggio una card qui all'interno della griglia, ma gli oggetti poi dentro che si trovano dentro questi elementi non devono necessariamente appoggiarsi alla griglia.

Sarebbe veramente molto difficile.

Come vedete, questa card appoggia su sei colonne, ma gli elementi dentro la carne, il testo, la fotografia e tutto il resto invece lavorano con elementi di spazzatura costante tra di loro, ma non si allineano alla griglia.

Quindi no, non siate così rigidi quando iniziate a utilizzare una griglia nel vostro layout di iui e cosa importantissima, la griglia serve soprattutto a far capire a fare in modo che alcuni elementi siano sempre visibile all'utente ed altri possano essere in qualche modo, come dire, sacrificati più a sinistra vedete molto bene l'utilizzo di una buona grigia.

Come vedete la tavola deck stop molto più ampia.

Ok le colonne la nostra griglia è all'interno di margini molto ampi.

Io posiziono tutte le cose che sono fondamentali, i testi, le call to action, il menu all'interno di questa griglia, ma è chiaro che gli elementi che per esempio sono immagini illustrazioni i colori di fondo possono andare fuori da questa griglia perché sono elementi accessori.

Si è chiaro, magari qualcuno potrà vedere l'immagine un po' tagliata, ma è un elemento ovviamente di è come dire di piu' piu' di orpello che non di funzionalità.

E quindi se viene tagliata a noi diciamo importa meno l'importante è che all'interno della griglia che abbiamo definito ci sono i testi, le funzioni, le colture action nel menù, tutto quello che mi consente di muovermi all'interno del mio sito.

Quindi mi raccomando, partite sempre da una griglia perché quella vi darà, come dire, la strada sicura per muovervi anche con piu' libertà di quanto voi possiate immaginare