Sfondi astratti: forme, campi di colore e flussi

Uno sfondo astratto è fatto di colore, forma e texture e non di una scena riconoscibile. Quasi tutti appartengono a una di tre famiglie: sfondi geometrici, costruiti con spigoli netti, strisce e motivi; sfondi fluidi, costruiti con sfumature morbide e campi che scorrono; sfondi materici, costruiti con grana, rumore e materiali. Scegli la famiglia che corrisponde alla sensazione che ti serve, poi lascia un’area calma dove andranno le parole.

Questa guida passa in rassegna ogni famiglia con esempi dal vivo e codici, ti dice quando usare quale e come evitare che uno sfondo astratto sovrasti il contenuto. Per i tipi di gradiente che stanno alla base di molti di essi, leggi i tipi di gradienti.

Tre tipi di sfondo astratto

Sfondi astratti geometrici

Gli sfondi geometrici usano spigoli nitidi: divisioni, strisce, anelli, spicchi e griglie. Sembrano voluti e strutturati, e si abbinano naturalmente a impaginati tipografici forti come lo stile svizzero. In CSS, i punti di colore netti (due colori nella stessa posizione) creano gli spigoli.

Il trucco degli sfondi geometrici è il tono. Strisce o scacchi ad alto contrasto vibrano e rendono quasi illeggibile il testo sopra. Tieni i colori del motivo vicini per luminosità, come le strisce e gli anelli tono su tono qui sopra, e riserva l’alto contrasto alle aree senza parole. In motivi CSS ne trovi molti altri.

Sfondi astratti fluidi

Gli sfondi fluidi non hanno alcuno spigolo: il colore si raccoglie, scivola e si piega come la luce sull’acqua o sulla seta. Ne fanno parte i gradienti mesh, gli aloni aurora e i nastri che scorrono. Sono più calmi ed eleganti di quelli geometrici e sono i più facili su cui mettere del testo, perché un campo morbido ha ampie aree uniformi.

.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}

Gli sfondi fluidi hanno stili con un nome: i gradienti mesh fondono più punti di colore su una superficie, e i gradienti aurora fanno galleggiare macchie luminose su una base scura. Entrambi stanno meglio con un po’ di grana sopra.

Sfondi astratti materici

La texture trasforma un colore piatto in una superficie che quasi si può toccare. Una grana fine ricorda la pellicola, una trama più marcata la carta, fibre morbide un tessuto, una sfocatura opaca il vetro. La texture può essere l’intero sfondo, come in un campo color carta, oppure un livello sopra un gradiente, ed è così che si fanno quasi tutti gli sfondi a gradiente dall’aria raffinata.

Tieni la texture sottile quando sopra c’è del testo: quanto basta per sentirla a distanza di braccio, non tanto da far sembrare sporche le lettere. Texture di sfondo tratta nel dettaglio grana, carta, tessuto e vetro, e gradienti granulosi spiega perché un po’ di rumore fa sembrare il colore prezioso.

Come creare uno sfondo astratto con i colori del tuo brand

I migliori sfondi astratti sembrano astratti ma appartengono a qualcuno. Partire dai tuoi colori e dalle tue forme, e non da un pacchetto di immagini stock, è ciò che lo rende possibile.

1. 1

   Parti da due o tre colori del brand

   Aggiungi un tono più profondo della stessa famiglia per dare profondità. Se non li hai ancora, ti aiuta come scegliere i colori del brand.

2. 2

   Scegli una famiglia

   Geometrico se il tuo brand è preciso o energico, fluido se è calmo o raffinato, materico se è artigianale o caldo.

3. 3

   Prendi in prestito una forma dal brand

   Una curva del logo, l’angolo di una lettera, un cerchio di un’icona. Ripeterla nello sfondo lega le due cose.

4. 4

   Pianifica la zona calma

   Decidi dove andrà il testo in ogni formato e mantieni quell’area uniforme per luminosità.

5. 5

   Aggiungi la texture per ultima

   Una grana leggera su tutto, poi controlla a dimensione telefono con parole vere sopra.

Scegliere lo sfondo astratto giusto per il lavoro

Adatta l’astrazione al contenuto. Una slide piena di dati chiede un campo fluido o tono su tono, quieto. Un post di lancio può reggere una divisione geometrica decisa. Un menu o un prodotto artigianale vuole la texture. E qualunque cosa scegli, provala alla dimensione reale con le parole vere sopra, perché gli sfondi astratti bellissimi da vuoti spesso litigano con il testo quando arriva.

I Mark di Gradiently sono astrazioni fluide e materiche insieme: colori, fino a tre materiali sovrapposti, luce, grana e movimento, disegnati dal vivo dietro il tuo design con la loro area più calma spostata dietro le parole. Puoi sfogliarli nel Mercato o crearne uno nella Forge.