# Design geometrico: griglie, forme e idee di pattern

[Canonical HTML page](https://gradiently.design/it/guide/geometric-design)

Cerchi, quadrati, strisce e griglie sono gli strumenti più antichi della grafica, e restano i più affidabili. Una guida pratica a griglie, forme e idee di pattern, con codice da copiare.

## The short version

- Il design geometrico costruisce immagini e layout con forme regolari come cerchi, quadrati, triangoli e linee rette, di solito disposte su una griglia.
- Una griglia con margini, colonne e spazi tra le colonne coerenti è ciò che rende un layout geometrico ordinato e non solo spigoloso.
- Il cerchio tende a sembrare amichevole e completo, il quadrato stabile, il triangolo direzionale ed energico.
- Strisce, scacchi, pois, raggi e anelli si disegnano tutti con i gradienti CSS, senza file immagine.
- I pattern geometrici funzionano meglio con due o tre colori e una sola scala, così sostengono il contenuto invece di competere con lui.

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.

| Formato | Dimensioni | Margine | Griglia |
| --- | --- | --- | --- |
| Post Instagram | 1080×1350 | 72 px | 6 colonne, spazi da 24 px |
| Post quadrato | 1080×1080 | 72 px | 6 colonne, spazi da 24 px |
| Storia | 1080×1920 | 72 px ai lati, 250 px sopra e sotto | 4 colonne, spazi da 24 px |
| Poster A4 a 300 dpi | 2480×3508 | 177 px (15 mm) | 12 colonne, spazi da 59 px |
| Hero di un sito | 1920×1080 | 120 px | 12 colonne, spazi da 32 px |

Griglie di partenza per i formati più comuni. Non sono regole di alcuna piattaforma, solo valori sensati: adattali, poi mantienili in tutta una serie.

I maestri di questo approccio furono i designer svizzeri degli anni Cinquanta e Sessanta, i cui manifesti sembrano ancora attuali. Il [design svizzero](https://gradiently.design/it/guide/swiss-design) racconta i loro metodi, e il [design Bauhaus](https://gradiently.design/it/guide/bauhaus-design) 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.

Un manifesto verticale diviso in due blocchi, con il titolo di una lezione allineato su un lato

Un layout diviso: un’unica forte divisione verticale, con il testo agganciato alla griglia su un lato.

Un post verticale con una grande cifra che dice 12 colonne e una piccola riga di dettaglio allineata

Un grande numero sulla griglia. Il contrasto di scala tra cifra e dettaglio è una mossa geometrica classica.

## 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.

- Strisce diagonali: `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)`
- Strisce da tenda: `repeating-linear-gradient(90deg, #c2410c 0 40px, #fed7aa 40px 80px)`
- Anelli a bersaglio: `repeating-radial-gradient(circle at 50% 50%, #0f172a 0 18px, #fbbf24 18px 36px)`
- Raggi di sole: `repeating-conic-gradient(from 0deg at 50% 100%, #b91c1c 0deg 7.5deg, #fef3c7 7.5deg 15deg)`
- Quadrato in quattro: `conic-gradient(from 90deg at 50% 50%, #111827 0deg 90deg, #e5e7eb 90deg 180deg, #111827 180deg 270deg, #e5e7eb 270deg 360deg)`
- Righe da quaderno: `repeating-linear-gradient(0deg, #f8fafc 0 31px, #94a3b8 31px 32px)`

Sei pattern geometrici disegnati solo con gradienti CSS. Le interruzioni di colore nette (la stessa posizione due volte) danno bordi precisi invece di sfumature.

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](https://gradiently.design/it/guide/art-deco-design) e [il design Memphis](https://gradiently.design/it/guide/memphis-design) 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](https://gradiently.design/it/guide/css-patterns) ne ha molti altri, e [repeating linear gradient](https://gradiently.design/it/guide/css-repeating-gradient) spiega nel dettaglio le interruzioni nette.

```css
/* 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;
}
```

Scacchiera, pois e carta millimetrata. Cambia i colori e la dimensione della tessera; lascia stare la struttura. La differenza di 1px nei pois ammorbidisce il bordo.

## 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

### Da evitare

- Un pattern ad alto contrasto proprio dietro il testo
- Cinque colori in un solo pattern
- Forme che quasi si allineano ma sfuggono alla griglia
- Strisce sottili che vibrano sugli schermi
- Mescolare tre scale di pattern non correlate

### Da fare

- Un blocco pieno o calmo dove stanno le parole
- Due o tre colori, uno dominante
- Tutto agganciato alla stessa griglia
- Strisce larghe almeno 8 px alla dimensione del post
- Una sola scala di pattern, ripetuta con decisione

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](https://gradiently.design/it/guide/organic-shapes-design) 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.

## FAQ

### Che cos’è il design geometrico?

Uno stile grafico costruito con forme regolari come cerchi, quadrati, triangoli e linee, di solito allineate a una griglia.

### Come si crea un pattern geometrico in CSS?

Usa gradienti ripetuti con interruzioni di colore nette, come `repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px)` per le strisce. Per scacchi e pois aggiungi `background-size` per impostare la tessera.

### Quale griglia usare per un post Instagram?

Un post da 1080×1350 funziona bene con margini da 72 pixel e sei colonne con spazi da 24 pixel. Usa la stessa griglia per ogni post di una serie.

### Quali movimenti di design usano forme geometriche?

Il Bauhaus, lo stile tipografico svizzero o internazionale, l’Art Déco e Memphis si sono basati molto sulle forme geometriche, ciascuno con uno spirito molto diverso.