Abstrakte bakgrunner: former, flater og flyt

En abstrakt bakgrunn er laget av farge, form og tekstur i stedet for en gjenkjennelig scene. Nesten alle hører til én av tre familier: geometriske bakgrunner bygget av harde kanter, striper og mønstre, flytende bakgrunner bygget av myke overganger og strømmende flater, og teksturerte bakgrunner bygget av korn, støy og materiale. Velg familien som passer til følelsen du trenger, og hold et rolig område der ordene skal ligge.

Denne guiden går gjennom hver familie med levende eksempler og koder, når du bør bruke hvilken, og hvordan du hindrer at en abstrakt bakgrunn overdøver innholdet. Om gradienttypene som ligger under mange av dem, se typer gradienter.

Tre typer abstrakte bakgrunner

Geometriske abstrakte bakgrunner

Geometriske bakgrunner bruker skarpe kanter: delinger, striper, ringer, kileformer og rutenett. De virker bevisste og strukturerte, og passer naturlig sammen med sterke typografiske oppsett som sveitsisk stil. I CSS er det harde fargestopp (to farger på samme posisjon) som skaper kantene.

Trikset med geometriske bakgrunner er tonen. Striper eller ruter med høy kontrast vibrerer og gjør teksten oppå nesten uleselig. Hold mønsterfargene nær hverandre i lyshet, som de tonale stripene og ringene over, og spar høy kontrast til områder uten ord. CSS-mønstre har mange flere.

Flytende abstrakte bakgrunner

Flytende bakgrunner har ingen kanter i det hele tatt: fargen samler seg, driver og folder seg som lys på vann eller silke. De omfatter mesh-gradienter, nordlysglød og strømmende bånd. De føles roligere og mer eksklusive enn geometriske, og de er de enkleste abstrakte bakgrunnene å legge tekst på, fordi en myk flate har store, jevne områder.

.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%);
}

Flytende bakgrunner finnes i navngitte stiler: mesh-gradienter blander flere fargepunkter utover en flate, og nordlysgradienter lar lysende felt sveve over et mørkt underlag. Begge ser best ut med litt korn oppå.

Teksturerte abstrakte bakgrunner

Tekstur gjør flat farge til en overflate du nesten kan ta på. Fint korn ser ut som film, grovere struktur som papir, myke fibre som stoff, en frostet uskarphet som glass. Teksturen kan være hele bakgrunnen, som en papirfarget flate, eller et lag over en gradient, og slik lages de fleste bakgrunner med eksklusiv følelse.

Hold teksturen subtil når tekst ligger oppå: nok til at den kjennes på armlengdes avstand, men ikke så mye at bokstavene ser skitne ut. Bakgrunnstekstur tar for seg korn, papir, stoff og glass i detalj, og kornete gradienter forklarer hvorfor litt støy får farger til å se dyre ut.

Slik lager du en abstrakt bakgrunn av merkevarefargene

De beste abstrakte bakgrunnene ser abstrakte ut, men tilhører noen. Å ta utgangspunkt i dine egne farger og former, i stedet for en ferdigpakke, er det som gjør at det skjer.

1. 1

   Ta to eller tre merkevarefarger

   Legg til en dypere tone fra samme familie for dybde. Slik velger du merkevarefarger hjelper deg hvis du ikke har dem ennå.

2. 2

   Velg en familie

   Geometrisk hvis merkevaren din er presis eller energisk, flytende hvis den er rolig eller eksklusiv, teksturert hvis den er håndlaget eller varm.

3. 3

   Lån en form fra merkevaren

   En kurve fra logoen, vinkelen på en bokstav, en sirkel fra et ikon. Når du gjentar den i bakgrunnen, knyttes de to sammen.

4. 4

   Planlegg den stille sonen

   Bestem hvor teksten skal ligge i hvert format, og hold området jevnt i lyshet.

5. 5

   Legg til tekstur sist

   Et lett korn over alt, og sjekk det så i mobilstørrelse med ekte ord oppå.

Velg en abstrakt bakgrunn etter oppgaven

Tilpass abstraksjonen til innholdet. Et datatungt lysbilde vil ha en stille flytende eller tonal flate. Et lanseringsinnlegg tåler en dristig geometrisk deling. En meny eller et håndverksprodukt vil ha tekstur. Og uansett hva du velger, test det i riktig størrelse med de riktige ordene oppå, for abstrakte bakgrunner som ser vakre ut tomme, kjemper ofte mot teksten når den kommer.

Marks fra Gradiently er flytende og teksturerte abstraksjoner i ett: farger, opptil tre lagdelte materialer, lys, korn og bevegelse, gjengitt levende bak designet ditt, med det roligste området flyttet bak ordene. Du kan bla i dem i Markedet eller lage en i Forge.