A korong forogni kezdett, egyre gyorsabban, halványabb szürkés gömbhéjjá alakult.

Kiterjeszkedett…

És szétáradt, kivirágzott előtte a folyékony neon-origami mutatvány: feltárulása saját, távolság nélküli otthonának s hazájának, a végtelenségbe tartó átlátszó, térbeli sakktáblának.

Belső szeme előtt felmerült a Keleti Part Nukleáris Hatóságának skarlátszín, lépcsőzetes gúlája, mely a Mitsubishi Bank of America zöld kockáin túl parázslott, s magasan és nagyon messze meglátta a katonai rendszerek spirálkarjait, melyeket soha el nem érhet…

És valahol, egy fehérre festett padlástérben, csak nevetett, távoli ujjai a decket cirógatták, s arcára a felszabadultság könnyei festettek csíkokat.

William Gibson: Neurománc (1984)

Bár  a cyberpunk, mint sci-fi irányzat, már a 80-as évek óta velünk van, hosszú éveken át csak különböző szubkultúrák stílusaként volt jelen, hogy néha időlegesen fel-felbukkanjon olyan filmekkel, mint a Szárnyas fejvadász vagy a Mátrix. Az biztos, hogy a tavalyi évben a közel egy évtizede várt, hollywoodi blockbusterekkel vetekedő költségvetésű és bevételű videójáték, a Cyberpunk 2077 (ami maga is már egy 80-as évekből eredő asztali szerepjátékon alapult) dobta be újra a mainstream köztudatba ezt az esztétikát. A kiberpunk itt van, és divatosabb, mint valaha.

Mi jellemzi a cyberpunk stílust a designban?

A Cyberpunk és a vizuális kultúra című tanulmánykötet három pontban foglalja össze a cyberpunk esztétikát:

Szín: élénk neonfények, jellemzően vörös vagy kék

Terek: sötét, föld alatti, ám valós helyszínek

Alakok: jellemzően geometrikus formák.

Bár ez a jellemzés erősen egyszerűsít, mégis jó kiindulási alapot jelent a designer számára. Mit érdemes hozzátenni?

A cyberpunk, annak ellenére, hogy a legmodernebb közeli jövőt jeleníti meg, 80-as, 90-es évek beli gyökerei miatt mára már egyben retró is – jól állnak neki az olyan elemek, mint a vektoros drótvázak vagy a 90-es évekbeli UI-kat idéző elemek.

Ugyanakkor a mai futurizmushoz is bátran nyúlhatunk, pl. a videójátékokban annyira népszerű holografikus jellegű, átlátszó hátterű, átlókkal, derékszögekkel feldobott keretűablakok is nagyon jól mutatnak ebben a stílusban.

Színek

Neon. Ez egyrészt a színeket magukat jelenti, másrészt a városi neonfények hangulatát visszaadó neonfény-effektust is. A sötét háttér szintén elengedhetetlen, a kiberpunkokra nem süt a nap. A fent írt piros és kék mellett a leggyakoribb színek a “cyberpunk pinknek” is becézett neonrózsaszín de gyakori még a lila, az arany-sárga-narancs spektrum vagy a zöld is. Érdemes a fő színekhez komplementer színeket választani.

Neonfény effektust CSS-ből is könnyen elő lehet állítani, a W3 Schools is mutat egy egyszerű, text-shadowra alapuló, kis animációval feldobott módszert, de lehet többféle trükkel is próbálkozni

A grafikai elemeket saját ízlésed szerint kell összeválogatni, a fentiekből már alapos ihletet meríthettél. A cyberpunkra jellemző vizuális motívumok:

Divat 

A cyberpunk jelszava a “high tech, low life”, és az öltözködési stílus is ezt jeleníti meg. Összeollózott, szedett-vedett ruhadarabok, csúcstechnikájú kiegészítőkkel jellemzik. Fontos vizuális elem a napszemüveg vagy a szemet eltakaró high-tech kütyük. Fontos még az attitűd: a cyberpunk lázadó stílus, vagány, punkos. Valójában egy megfelelő alapmotívumokat tartalmazó stock fotót egy kis ügyes filterezéssel hipp-hopp kiberpunkossá varázsolhatsz.

Minták, motívumok 

Mivel a stílus természetszerűen eklektikus, az alábbi grafikai motívumok mind előfordulhatnak: felhőkarcolók az éjszakában, futurisztikus járművek, tükrös napszemüveg, ember és gép fúziója, nyomtatott áramkörök, esetleg törzsi motívumokkal keverve, multikulturalizmus, főleg ázsiai motivumok, írásjegyek negjelenése.

Érdemes még különböző kész UI kiteket is felhasználni, jó párat találhatunk a mátrixban… akarom mondani a weben.

Az Augmented UI egy CSS alapú kit, szuper ötleteket tartalmaz.

Ha Figmával dolgozol, ez a gyűjtemény is hasznos lehet.

Sokat dobhatnak az oldalad hangulatán a jól megválasztott futurisztikus fontok is, mint amiket ebben a két betűtípus gyűjteményben is találhatsz.

A jövő már itt van, csak nem túl egyenlően osztották szét az emberek között.

William Gibson