Quando nacque il Web, non c’era nessuna tecnologia per il layout di pagina, e il Web Design non aveva ragione di esistere. Ogni pagina infatti era una singola colonna di testo che doveva riempire lo spazio da un lato all’altro.
Nel corso degli anni abbiamo sviluppato un trucco dietro l’altro per affrontare il layout di una pagina.
Passando da trucco in trucco, dolorosamente, abbiamo messo un ordine al sovrapporsi di trucchetti e tecnologie, schivando i capricci dei vari browser che nel frattempo nascevano. Il tempo e il lavoro spesi sono stati enormi, promuovendo una maggiore efficienza, ed evitando continuamente i vari bug.
Ma i siti sembrano tutti uguali, la user experience è sempre la stessa, e diciamocela tutta, ci stiamo annoiando.
La nuova era del Web Design
C’è però una buona notizia: finalmente, stiamo per ottenere strumenti veri per diversificare il layout di pagina.
Flexbox, CSS Shapes, Maschere, Clip-path, Initial Letter, Rotation, Colonne multiple, Viewport Units stanno già aprendo un mondo di nuove possibilità.
La nostra più grande sfida sarà la lotta ai limiti della nostra immaginazione. Abbiamo sviluppato abitudini ossidate nel corso degli ultimi 10 anni.
Le nostre idee creative sono rimaste schiacciate sotto pile di ‘il Web non funziona in questo modo’ e ‘questo non si può fare’.
Combattere il codice non sarà più la parte più difficile della creazione di un layout. Bisogna quindi lasciar perdere abitudini di lunga data e sfatare miti sul Web Design. Cominciamo!
Mito 1: Tutto deve galleggiare su sapone
Ogni layout di una pagina sembra una vasca da bagno piena di saponette. Ogni elemento della pagina è un rettangolo, fino a salire in cima. L’intestazione è una barra in alto, poi c’è la barra di navigazione, una barra laterale, e una barra di contenuti.
La pagina basata sul float rettangolare, non ammette spazi bianchi. Ma per il Web Design, CSS Grid agirà in maniera diversa perché sfrutterà maggiormente delle righe.
In questo modo, si potranno allineare gli elementi in maniera sia orizzontale che verticale, lo spazio sarà distribuito in maniera più equilibrata, e sì, potremo anche creare uno spazio bianco necessario.
Vuoi convincere un cliente che il graphic design richiede tempo? Leggi qui!
Mito 2: “Rettangoli, solo rettangoli”
Per un’impostazione predefinita, tutto su una pagina web nasce come un rettangolo.
Gli strumenti che abbiamo usato mantengono questo ordine, e vengono allineati in una scatola dopo l’altra.
Ora abbiamo gli strumenti per aiutarci a rompere la tradizione. È infatti possibile utilizzare clip-path, maschere o gradienti per tagliare il rettangolo/scatola in una forma diversa. Triangoli, diamanti, trapezi – ora i contenuti possono essere tagliati in ogni sorta di sagome.
CSS Shapes consente di tagliare un elemento da un lato, e il flusso di contenuti che segue in una forma che non è rettangolare.
Mito 3: Non possiamo controllare il bordo
Sul Web, non abbiamo alcun controllo su dove il bordo inferiore dello schermo taglierà il layout. Abbiamo fatto finta per un po’ che tutti gli schermi fossero 1024×768 pixel (o 800×600), ma in realtà non abbiamo mai controllato il bordo inferiore dello schermo.
Con le Viewport Units, possiamo dimensionare o posizionare oggetti in relazione al viewport. In passato, definire sia l’altezza e la larghezza di un’immagine sarebbe stata una pessima idea.
Ma ora, object-fit:cover indica al browser di mantenere le proporzioni dell’immagine, e ritagliarla per adattarsi allo schermo.
Se vuoi conoscere 10 risorse on line per graphic designers, leggi qui!
Mito 4: 12 colonne è meglio
Nel 2006 l’industria ha iniziato a sostenere l’uso di una griglia simmetrica a 12 colonne. Con 12 colonne significa che abbiamo potuto facilmente dividere lo spazio a metà, terzi o quarti.
Ma dopo 10 anni quasi tutti i siti utilizzano la stessa griglia, e il Web Design è diventato incredibilmente noioso.
La griglia simmetrica a 12 colonne trasmette infatti una sensazione di stabilità e robustezza, e lo usiamo senza chiedere se questa è davvero la sensazione che vogliamo trasmettere. Abbiamo imparato a fare l’art directing tramite la nostra scelta di caratteri, ma non ancora attraverso i nostri layout.
La creazione di griglie personalizzate più moderne, magari dispari, invece ci permetterebbe di trasmettere molto di più su ogni progetto attraverso il suo design, ma in qualche modo queste idee non sono ancora decollate.
Perché no? Penso perché la matematica è troppo complessa per un Web Desinger quando la tecnologia di base è il float.
Il team di Mark Boulton Design ha creato quindi un’app chiamata Gridset per rendere tale lavoro di progettazione più facile, e la comunità Sass ha costruito una libreria dopo l’altro per astrarre la matematica di griglie complesse, ma in entrambi i casi sembra ancora tutto troppo complicato e fragile.
Mito 5: Dobbiamo usare un framework per layout
Usando scrivere in CSS usando la nuova Grid sarà più facile dell’applicazione di un framework, e l’aggiornamento dei framework vecchio stile con CSS Grid servirà solo a rendere la vita più difficile.
Smettila di cercare un framework, e scrivi la tua CSS personale.
Mito 6: Siamo bloccati dal Responsive Web Design
Non crederci neanche per un minuto. È stato difficile per l’industria accorgersi del responsive Web Design, e appoggiarsi agli strumenti per rinnovare i siti velocemente. Ma non c’è niente di inerente al RWD che ci obbliga ad usare quella manciata di modelli di layout tutti uguali.
Siamo in grado di creare tutto ciò che vogliamo con i CSS, e modificare tutto ciò che vogliamo in qualsiasi momento, se i Web Designer smettessero di usare sempre gli stessi strumenti di layout come cookie cutter, e avere gli stampini.
Lascia andare questi miti, il tuo lavoro saprà distinguersi. Approfittane mentre l’opportunità è ancora nuova e inizia a giocare con queste proprietà e a vedere ciò che è possibile.
