80s-esthetiek: neon, chroom en zonsondergangsverlopen

De 80s-esthetiek is neon op zwart, chromen letters, zonsondergangsverlopen in banden gesneden en een gloeiend raster dat naar de horizon loopt, met een zachtere kant van Miami-pasteltinten en Memphis-patronen. De meeste hedendaagse versies komen via synthwave, een stijl die vanaf de jaren 2000 films, arcadegames en synthesizermuziek uit de jaren tachtig deed herleven. Hieronder staan de belangrijkste ingrediënten, paletten met codes, de CSS voor een zonsondergang en raster, en hoe je het gebruikt zonder dat het een verkleedpartij wordt.

De ingrediënten van de 80s-esthetiek

80s-esthetiek en synthwave

Synthwave, soms outrun genoemd naar Sega's arcade-racespel uit 1986, is een muziekgenre dat vanaf het midden van de jaren 2000 online groeide en sterk leunt op filmmuziek uit de jaren tachtig. De bijbehorende artwork bepaalde het beeld dat veel mensen nu voor zich zien: een donkerpaarse lucht, een gestreepte zon, een magenta raster en chromen letters. De film Drive uit 2011 en de soundtrack ervan brachten de stijl naar het grote publiek.

Dus als een briefing 80s zegt, vraag dan welke 80s. De synthwave-nachtversie, de Miami-pastelversie voor overdag en de Memphis-patroonversie zijn drie verschillende looks. Synthwave-kleuren en vaporwave-kleuren gaan dieper in op de twee internetrevivals, en Memphis-design behandelt de patroonkant.

80s-kleurenpaletten

Het chroomverloop is degene om te bestuderen. Gepolijst metaal weerspiegelt een lichte lucht boven een donkere ondergrond, dus de kleur loopt van licht naar dieper richting het midden, springt bij een scherpe horizonlijn naar donker en wordt naar onderen weer lichter. Die harde lijn zorgt ervoor dat het als metaal leest en niet als grijs. Chroom-teksteffecten laat zien hoe je het op letters toepast, en zonsondergangsverlopen heeft zachtere versies van de lucht.

Een 80s-zonsondergang en raster bouwen in CSS

.scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0221 0%, #2b0a4a 55%, #0b0221 55%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(40vw, 320px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 45%, #ff2975 80%);
  /* slice the lower half into bands */
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 58% 61%, #000 61% 70%, transparent 70% 74%, #000 74% 83%, transparent 83% 88%, #000 88%);
}

.floor {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 55%;
  bottom: -20%;
  background-image:
    linear-gradient(#ff2fd0 2px, transparent 2px),
    linear-gradient(90deg, #ff2fd0 2px, transparent 2px);
  background-size: 60px 60px;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: top center;
}

Om het te animeren verschuif je de background-position van de vloer in een lus naar beneden, en het raster lijkt op je af te razen. Houd daarbij rekening met de instelling voor verminderde beweging; CSS-geanimeerde kleurverlopen behandelt het patroon.

80s-lettertypes en letterwerk

Typografie deed veel van het werk in de grafiek van dat decennium. Filmtitels en productlogo's gebruikten zware cursieve letters voor snelheid, chromen of diepe hoofdletters voor drama en losse penseelschriften voor alles wat op het strand speelde. Eén woord op deze manier behandeld kan een heel ontwerp dragen.

• Zware cursieve schreefloze letters suggereren beweging, perfect voor alles wat sportief of snel is.
• Chromen hoofdletters werken voor hooguit een of twee woorden; langere regels verliezen de weerspiegeling.
• Penseelschriften passen bij het Miami-palet, klein gezet naast een gedurfde sans.
• Pixel- en rasterlettertypes knikken naar arcades, maar lezen slecht onder een grote maat, dus bewaar ze voor titels.

Voor lettertypefamilies om uit te proberen staat in retrolettertypes een lijst per decennium.

De 80s-esthetiek gebruiken zonder cliché

Ontwerp je in Gradiently, dan geven de lettertekenbehandelingen Extrusie en Spoor een kop de diepte en snelheid van een 80s-titelkaart, en een donkere Mark met violet en magenta licht maakt de nachtelijke hemel erbij, met zijn rustigste gebied achter de woorden zodat de letters scherp blijven.

De look past bij muziekavonden, gamekanalen, retroproductlanceringen, jubilea en alles wat een knipoog van nostalgie wil. Wil je het decennium erna, lees dan 90s-esthetiek.