Design geometrico: griglie, forme e idee di pattern

Il design geometrico costruisce immagini con forme regolari (cerchi, quadrati, triangoli e linee rette) disposte su una griglia. È il linguaggio del Bauhaus, dei manifesti svizzeri, dell’Art Déco e della maggior parte dei loghi moderni. Appare ordinato, sicuro e senza tempo perché le regole si vedono: le cose si allineano, si ripetono e dialogano tra loro. Qui trovi come impostare la griglia, scegliere le forme con intenzione e creare pattern geometrici, anche alcuni da disegnare in puro CSS.

Parti da una griglia di layout

Le forme da sole non rendono geometrico un progetto: lo fa l’allineamento. Una griglia dà a ogni elemento il suo posto: margini lungo il bordo, colonne nel formato e spazi tra una colonna e l’altra. Una volta definita, ogni cerchio, blocco e riga di testo si aggancia a lei, e l’insieme comincia a sembrare costruito.

I maestri di questo approccio furono i designer svizzeri degli anni Cinquanta e Sessanta, i cui manifesti sembrano ancora attuali. Il design svizzero racconta i loro metodi, e il design Bauhaus mostra dove nasce l’amore per cerchio, quadrato e triangolo.

Scegliere le forme con intenzione

Ogni forma di base porta con sé associazioni molto usate nell’insegnamento del design, anche se nessuna è assoluta. Considerale tendenze, e lascia che colore e contesto facciano il resto.

• Cerchio: completo, amichevole, concentrato. Ottimo per mettere in risalto una cosa sola, come una data o un volto.
• Quadrato e rettangolo: stabili, onesti, strutturali. Il contenitore naturale per testi e immagini.
• Triangolo: direzionale ed energico. Guida lo sguardo, suggerisce movimento o tensione.
• Linea e striscia: ritmo e velocità. L’orizzontale è calma, la diagonale è dinamica.
• Semicerchio e quarto di cerchio: ammorbidiscono un layout rigido restando geometrici, un classico dei manifesti moderni.

Idee per pattern geometrici

I pattern sono il design geometrico al suo più visibile. I classici sono strisce, scacchi, pois, raggi, anelli, chevron e griglie di linee. Resta su due o tre colori, scegli una sola scala e decidi se il pattern è il protagonista (un manifesto, una carta da regalo) o uno sfondo discreto: in quel caso abbassa molto il contrasto.

L’Art Déco adottò raggi, ventagli e forme a gradoni in oro e nero; Memphis ruppe la griglia con ghirigori e coriandoli. Il design Art Déco e il design Memphis sono entrambi fonti ricche se vuoi un pattern con il sapore di un’epoca.

Scacchi, pois e griglie in CSS

Alcuni pattern richiedono di impostare a parte la dimensione della tessera con background-size, così si ripetono su tutto l’elemento. Questi tre sono i più richiesti. L’articolo sui pattern css ne ha molti altri, e repeating linear gradient spiega nel dettaglio le interruzioni nette.

/* Checkerboard: one conic gradient, tiled */
.checks {
  background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}

/* Polka dots */
.dots {
  background-color: #fef3c7;
  background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
  background-size: 32px 32px;
}

/* Graph paper grid */
.grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

Idee di design geometrico da provare questa settimana

• Un grande cerchio: un solo cerchio che riempie metà manifesto, con la data dell’evento al suo interno.
• Bordo a strisce: una fascia a strisce da tenda in cima a un menu o a un listino, senza altri pattern.
• Angoli a quarto di cerchio: un quarto di cerchio in ogni angolo di un post quadrato, in due colori alternati.
• Numero sulla griglia: una cifra enorme (un anno, un prezzo, un conto alla rovescia) allineata alla colonna di sinistra, con testo piccolo accanto.
• Raggi dietro un prodotto: raggi a basso contrasto che si irradiano da dietro una bottiglia o una scatola in un banner di negozio.
• Appunti su carta a quadretti: un carosello di consigli su sfondo a griglia tenue, con una regola scritta su ogni slide.

Ogni idea usa un solo espediente geometrico e lascia il resto semplice. Di solito basta a dare al post un punto di vista chiaro, ed è facile da ripetere in un’intera serie.

Come mantenere leggibili i design geometrici

Strisce sottili e ad alto contrasto possono sfarfallare sugli schermi e trasformarsi in effetto moiré quando un’app ridimensiona l’immagine, quindi prova alla dimensione in cui le persone la vedranno davvero. L’ordine geometrico sta bene anche con un solo elemento morbido: una singola forma organica su una griglia rigorosa aggiunge calore senza rompere il sistema. In Gradiently il Designer può impostare un post su una griglia pulita nel Mark del tuo brand e ricavarne tutte le altre misure, così l’allineamento regge in ogni formato.