Abstracte achtergronden: vormen, vlakken en flow

Een abstracte achtergrond bestaat uit kleur, vorm en textuur in plaats van een herkenbaar tafereel. Bijna alle horen bij een van drie families: geometrische achtergronden van harde randen, strepen en patronen; vloeiende achtergronden van zachte overgangen en stromende vlakken; en texturale achtergronden van korrel, ruis en materiaal. Kies de familie die past bij het gevoel dat je nodig hebt en houd een rustig gebied vrij waar woorden komen te staan.

Deze gids loopt elke familie langs met live voorbeelden en codes, laat zien wanneer je welke gebruikt en hoe je voorkomt dat een abstracte achtergrond de inhoud overheerst. Voor de soorten kleurverlopen die onder veel van deze achtergronden liggen, zie soorten kleurverlopen.

Drie soorten abstracte achtergrond

Geometrische abstracte achtergronden

Geometrische achtergronden gebruiken scherpe randen: splitsingen, strepen, ringen, waaiers en rasters. Ze voelen doelbewust en gestructureerd en passen vanzelf bij sterke typografische opmaak zoals de Zwitserse stijl. In CSS maken harde kleurstops (twee kleuren op dezelfde positie) de randen.

De kunst bij geometrische achtergronden is toon. Strepen of ruiten met sterk contrast trillen en maken tekst erbovenop bijna onleesbaar. Houd patroonkleuren dicht bij elkaar in helderheid, zoals bij de tonale strepen en ringen hierboven, en bewaar sterk contrast voor plekken zonder woorden. CSS-patronen heeft er nog veel meer.

Vloeiende abstracte achtergronden

Vloeiende achtergronden hebben helemaal geen randen: kleur verzamelt zich, drijft en plooit als licht op water of zijde. Denk aan mesh-gradients, aurora-gloed en stromende linten. Ze voelen rustiger en premiumer dan geometrische en zijn de makkelijkste abstracte achtergronden om tekst op te zetten, omdat een zacht vlak grote gelijkmatige gebieden heeft.

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

Vloeiende achtergronden bestaan in benoemde stijlen: mesh-gradients mengen meerdere kleurpunten over een vlak, en aurora-kleurverlopen laten lichtgevende plassen zweven op een donkere ondergrond. Beide zien er het best uit met een beetje korrel erbovenop.

Texturale abstracte achtergronden

Textuur verandert een vlakke kleur in een oppervlak dat je bijna kunt aanraken. Fijne korrel leest als film, een grovere structuur als papier, zachte vezels als stof, een matte blur als glas. Textuur kan de hele achtergrond zijn, zoals bij een papierkleurig vlak, of een laag over een kleurverloop, en zo worden de meeste premium ogende kleurverloopachtergronden gemaakt.

Houd textuur subtiel als er tekst op staat: genoeg om op armlengte te voelen, niet zoveel dat letters er vies uitzien. Achtergrondtextuur behandelt korrel, papier, stof en glas in detail, en korrelige kleurverlopen legt uit waarom een beetje ruis kleur duur laat lijken.

Een abstracte achtergrond maken van je merkkleuren

De beste abstracte achtergronden zien er abstract uit, maar horen bij iemand. Beginnen met je eigen kleuren en vormen in plaats van een stockpakket maakt dat mogelijk.

1. 1

   Neem twee of drie merkkleuren

   Voeg een dieper tint uit dezelfde familie toe voor diepte. Merkkleuren kiezen helpt als je ze nog niet hebt.

2. 2

   Kies een familie

   Geometrisch als je merk precies of energiek is, vloeiend als het rustig of premium is, texturaal als het ambachtelijk of warm is.

3. 3

   Leen een vorm van het merk

   Een curve uit het logo, de hoek van een letter, een cirkel uit een icoon. Als je die in de achtergrond herhaalt, verbindt dat de twee.

4. 4

   Plan de rustige zone

   Bepaal per formaat waar tekst komt en houd dat gebied gelijkmatig in helderheid.

5. 5

   Voeg textuur als laatste toe

   Een lichte korrel over alles, en controleer het dan op telefoonformaat met echte woorden erop.

Een abstracte achtergrond kiezen voor de klus

Stem de abstractie af op de inhoud. Een dia vol data vraagt om een rustig vloeiend of tonaal vlak. Een lanceringspost kan een gedurfde geometrische splitsing aan. Een menukaart of ambachtelijk product vraagt om textuur. En wat je ook kiest, test het op het echte formaat met de echte woorden erop, want abstracte achtergronden die er leeg prachtig uitzien, vechten vaak met tekst zodra die er staat.

De Marks van Gradiently zijn vloeiende en texturale abstracties in één: kleuren, tot drie gestapelde materialen, licht, korrel en beweging, live weergegeven achter je ontwerp, met het rustigste gebied achter de woorden geschoven. Je kunt ze bekijken op de Markt of er een maken in de Forge.