Menu
Contattaci
Avete avuto anche voi l’impressione che ultimamente il web si ripeta sempre uguale a sé stesso, con un’infinità di siti con layout molto simili tra loro? Cerchiamo di capire cosa sta succedendo nel mondo del Web Design delle Web UI.
L’oggetto di questa trattazione è il Visual Design di siti web, quel tipo di progettazione grafica imparentata con la grafica editoriale; quindi parliamo di siti vetrina, splash pages, magazine online, blogs, siti personali, etc. escludendo le interfacce dei pannelli di amministrazione, che invece spesso hanno molti punti in comune con il Design del Software.
Guardateli bene, i siti prodotti negli ultimi anni: notate qualcosa? Eccolo lì, il Layout Standard. Normalmente è composto da una testata con il menù, un megabanner, tre contenuti spesso circolari (quattro per i più temerari), blocchi squadrati di testi e immagini e un mega footerone, spesso con altre colonne, denso di contenuti.
Si comporta anche in modo sempre uguale a seconda del device: quasi sempre gli stessi breakpoints, stessa icona a hamburger per il menu, stessa gestione del reflow, etc.
Vi invito a riguardare con questa consapevolezza l’offerta dei siti che vendono temi. Ecco qui qualche campione preso da Themeforest.
Verrebbe da supporre che il web sia stato sempre così, o che perlomeno il percorso di standardizzazione derivasse dall’uso comune di una determinata soluzione grafica (ad esempio: il logo nella parte alta del sito, soluzione comune anche alla carta stampata, è sempre stato utilizzato fin dagli albori del web).
Invece se andiamo a recuperare vecchi siti, magari in Flash, ci accorgiamo che vigeva una certa anarchia; soluzioni caotiche, spesso navigazione in stile videogame, forme inconsuete e forte utilizzo di soluzioni grafiche originali.
Ovviamente non voglio dire che Flash fosse cosa buona; aveva una accessibilità pari a zero, necessitava di un plugin esterno al browser, e ovviamente non era responsive (anche perché in quel periodo, il concetto di responsive non aveva senso di esistere, visto che gli smartphone non c’erano).
Ben venga quindi l’evoluzione, la chiarezza, la responsività dei siti moderni. L’unico prezzo che paghiamo per questa evoluzione, è la monotonia.
C’è un motivo specifico che giustifica il “Layout Standard” sul web, oltre alla mera questione modaiola; molto spesso il Designer o il FrontEnd Developer di oggi si trova ad utilizzare dei Framework (Bootstrap, Foundation, Bulma, etc.) per velocizzare il lavoro e risolvere al volo tutte le problematiche legate alla responsività. Il framework è strutturato con delle Media Query e dei Breakpoint che gestiscono le risoluzioni dei device più comuni; si tratta di un alleato importante ma che non stimola nell’invenzione di soluzioni originali.
Lo sforzo creativo dietro alla grafica cartacea è decisamente più evidente, si gioca con i blocchi di testo inserendoli all’interno di forme, inclinandoli, facendoli ruotare intorno a delle immagini, oppure si fanno enormi capolettera, o testi che “forano” la pagina, mostrando un’immagine in background. Sul web, ben poco di tutto ciò.
Certo ci sono siti che rompono gli schemi, vi propongo infatti di dare un’occhiata alla raccolta su brutalistwebsites.com: nella maggior parte sono matti come cavalli e hanno una pessima usabilità, ma vale la pena farci un giro.
Per ottenere dei risultati che sappiano di “fresco” e si avvicinino alle soluzioni estetiche della carta stampata, tuttavia, non è necessario far impazzire l’utente o bruciargli la retina con contrasti improbabili: i CSS ci offrono infatti alcune proprietà ancora pochissimo usate ma davvero graziose.
Vi illustrerò alcune di queste proprietà, ma considerate che gli esempi potrebbero non funzionare sul browser che state usando; si tratta di proprietà già riconosciute dal W3C ma ancora largamente non supportate. Confidiamo che nei prossimi mesi si possano usare con più tranquillità, nel frattempo vi consiglio di visualizzare questa pagina con chrome, ultima versione.
Permette ad un testo di assumere la forma di un’immagine scontornata, girando attorno ad essa. Si tratta di una soluzione grafica molto utilizzata nella stampa, semplice da fare con software di grafica come Adobe InDesign. Es:
Sul web fino ad oggi il massimo che si poteva fare era utilizzare float: certo il contenuto testuale si disponeva intorno all’immagine flottante ma assumeva una forma squadrata.
Oggi con css shape e i suoi attributi (tra questi: circle(): per forme circolari, ellipse(): per forme ellittiche, polygon(): per qualunque forma poligonale con più di 3 vertici, url(): per identificare un’immagine a cui girare intorno) invece, possiamo ottenere risultati coerenti con l’effetto desiderato (vi consiglio la visualizzazione 0.5x in modo da apprezzare al meglio il comportamento del blocco di testo che “gira” intorno all’immagine):
See the Pen 1. CSS Shapes by Elena (@elenagranchi) on CodePen.
Clip-Path ci permette di creare tracciati di ritaglio su delle immagini, esattamente come potremmo fare con software di grafica. Combinandolo con Shapes si possono ottenere effetti carini come sulla carta stampata:
See the Pen 2. Clip Path by Elena (@elenagranchi) on CodePen.
Se a questo punto vi state chiedendo come creare correttamente l’attributo Polygon(), per il quale è necessario specificare le coordinate di tutti i vertici del poligono, sappiate che esistono diversi tool online e anche plugin per chrome che ci risparmiano questo lavoro ingrato, fornendocele in modo automatico. Uno che mi sento di consigliarvi è https://bennettfeely.com/clippy/
Mentre Clip-Path ritaglia un’immagine lungo un determinato perimetro, Mask Image sovrappone un’immagine, che permette di far trasparire quella sotto in base alla trasparenza dei pixels.
Possiamo applicare mask-image per creare effetti speciali “3D”, come ad esempio un testo che scorre “dietro” a un personaggio in primo piano. Nell’esempio che vi propongo di seguito, ho creato con un software di grafica una maschera (in rosso) e l’ho applicata ad un blocco di testo. Come sfondo viene mantenuta l’immagine del coniglio, e applicando un effetto transizione di movimento sull’hover, vedrete che il testo sembrerà “emergere” da dietro il coniglio.
See the Pen 3. Mask Image 3D Effect by Elena (@elenagranchi) on CodePen.
Con mask image possiamo produrre altri effetti applicando gradienti o immagini SVG
Gradiente:
See the Pen 4. Mask Image Gradient by Elena (@elenagranchi) on CodePen.
SVG (effetto sull’hover):
See the Pen 5. Mask Image SVG by Elena (@elenagranchi) on CodePen.
Quante volte abbiamo visto questa soluzione su carta? Il testo “trafora” la pagina e mostra un’immagine di sfondo. Da oggi possiamo proporla anche in ambito web.
See the Pen 6. Background Clip by Elena (@elenagranchi) on CodePen.
Chiunque utilizzi un software di grafica, conosce benissimo la funzionalità “Metodi di Fusione”; si tratta di un sistema di ‘miscelazione’ dei pixel di due immagini sovrapposte, in base a diversi parametri (luminosità, tonalità, saturazione, etc.)
Oggi non solo possiamo utilizzare la funzionalità con i css, ma possiamo applicarla a più di due immagini sovrapposte, miscelando diversi background per risultati sorprendenti.
See the Pen 7. Blending modes by Elena (@elenagranchi) on CodePen.
Ci permettono di agire direttamente sulle caratteristiche di un’immagine e restituiscono un’immagine modificata; è possibile utilizzare più filtri contemporaneamente separandoli con una virgola.
See the Pen 8. CSS Filters e SVG Filters by Elena (@elenagranchi) on CodePen.
Abbiamo finora affrontato tematiche fondamentalmente estetiche. Ma come ben sappiamo un layout oggi ha soprattutto altre esigenze legate alla responsività, che non possiamo ignorare durante il nostro sforzo creativo per uscire dall’anonimato.
Tuttavia, in un WEB che parla sempre di più di componenti, ha ancora senso l’approccio “globale” delle media query? O forse potremmo valutare un comportamento autonomo del componente?
Nel caso vi stiate preoccupando, non sto per suggerirvi delle Element Query. Piuttosto vorrei porre alla vostra attenzione alcuni comportamenti speciali che possiamo ottenere sfruttando proprietà come flex e grid, che gestiscono il reflow in modo già particolarmente aggraziato e con decine di soluzioni utili a ogni evenienza.
(Zoommate e passate col mouse sopra ai blocchi per osservare il reflow handling)
See the Pen 9. Responsive Component & Reflow Handling by Elena (@elenagranchi) on CodePen.
Il mio quindi è un invito a esplorare queste “nuove” proprietà fino in fondo, e sperimentare. Guardate ad esempio cosa è possibile fare con il grid layout sfruttando la proprietà grid-auto-flow: row dense; e associandola ad un contenitore con overflow hidden; in base alla larghezza della viewport possiamo proporre un contenuto piuttosto che un altro, senza neanche una media query.
See the Pen 10. Grid Layout & Overflow Hidden by Elena (@elenagranchi) on CodePen.
Grazie mille al Grusp e al suo CSS Day! E ovviamente alla mia azienda, Giuneco, che ogni anno mi sponsorizza la partecipazione. In particolare per questo articolo vorrei ringraziare Carmine Alfano e Giacomo Zinetti con i loro speech davvero di ispirazione.
PS: vi consiglio di zoommare la parte di anteprima dei codepen importati in questo articolo o di visualizzarli in una nuova finestra per vederli correttamente.
