Design con sfondo bianco: quando lo spazio vuoto è la scelta giusta

Il design con sfondo bianco è la scelta migliore quando ciò che sta sopra merita tutta l’attenzione: un prodotto, una fotografia, un lungo paragrafo, una frase che deve colpire. Fallisce quando il bianco è scelto per default, perché allora sembra una pagina che nessuno ha finito. La differenza si riduce a tre decisioni: quale bianco, quanto spazio e un piccolo dettaglio che dica a chi guarda che il vuoto era voluto.

Quando uno sfondo bianco è la scelta giusta

Il bianco non ha un umore suo, ed è la sua forza. Si fa da parte. Per questo è il fondo naturale per tutto ciò che ha un proprio colore o una propria texture, e il fondo peggiore per tutto ciò che ha bisogno di atmosfera per reggersi.

Se il tuo design sta a destra di quella tabella, un fondo a tinta morbida o un gradiente delicato di solito lo servirà meglio. Sfondi minimalisti tratta opzioni sommesse oltre il bianco, e design in modalità scura l’estremo opposto.

Scegli un bianco sporco, non il bianco puro

Il #ffffff puro è la cosa più luminosa che uno schermo possa mostrare. Per lo sfondo di una foto va bene; per una pagina che si legge per due minuti, abbaglia. Un bianco sporco abbassa un poco la luminosità e dà alla pagina una temperatura. I bianchi caldi sembrano stampati, calmi e umani. I bianchi freddi sembrano clinici, tecnici e precisi. Scegli quello che corrisponde a ciò che vendi.

Dai aria alle parole

Lo spazio bianco non è ciò che avanza. È una decisione di layout, e sembra voluto solo quando è generoso. Una regola pratica: margini di almeno l’8 per cento del lato più corto, cioè 86 px su un post 1080×1350, e più spazio tra i gruppi che al loro interno. Un titolo, una riga breve sotto e un piccolo dettaglio in basso bastano per un post.

La gerarchia conta più sul bianco che altrove, perché non c’è colore a guidare l’occhio. Usa dimensione e peso per ordinare le parole, come descritto in gerarchia visiva, e se puoi resta su una sola famiglia di caratteri.

Colore del testo su sfondo bianco

Il nero puro su bianco puro ha il contrasto più alto che uno schermo possa mostrare, più di quanto serva per leggere, e può risultare crudo. Un quasi nero con un accenno della temperatura dello sfondo, come #1c1917 su un bianco caldo o #0f172a su uno freddo, supera comunque ogni soglia di accessibilità con margine. Per il testo corrente mantieni un rapporto di contrasto di almeno 4,5:1; contrasto dei colori e accessibilità spiega come verificarlo.

Come evitare che uno sfondo bianco sembri incompiuto

Il rischio del bianco è sembrare una tela vuota invece che scelta. Un solo dettaglio discreto basta a risolverlo. Sceglierne uno, non tutti.

• Una grana leggera a bassissima intensità, così il bianco si legge come una superficie. Vedi texture a grana.
• Una luce morbida d’angolo, un bianco caldo che sfuma in un crema appena più profondo in un angolo.
• Un filetto sottile o un bordo fine nel colore dell’inchiostro, largo pochi pixel.
• Un colore d’accento usato una volta sola, su un prezzo, una data o un pulsante.
• Un effetto carta per brand stampati o artigianali; texture di carta mostra come.

Uno sfondo bianco in CSS

Sul web, imposta il bianco sporco una sola volta come variabile così ogni sezione lo condivide, e dai alle immagini uno sfondo coerente perché le foto di prodotto su bianco puro non appaiano come riquadri sul colore carta.

:root {
  --paper: #faf7f2;
  --ink: #1c1917;
  --rule: #e7e1d8;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
}

/* Product photos shot on pure white: blend them into the paper */
.product img {
  mix-blend-mode: multiply;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

Se vuoi un aspetto bianco con un po’ più di carattere, i Mark chiari di Gradiently sono un buon punto di partenza: fondi morbidi e pallidi con vero materiale e luce, dove la zona più calma si sposta dietro le parole e l’inchiostro automatico mantiene ogni riga abbastanza scura da leggersi. Progettare con qualsiasi Mark non riservato è gratis; riserva quello che ti piace quando sei pronto a esportare.