Ondine
Egy landing page, ami először érzést kér.
Filmes koncepcióoldal egy fiktív óceánvédő nonprofitnak — szeretetre építve, nem félelemre.
01 — Miért készítettem
Egy érzéssel indult, nem briefből.
A párommal arról álmodunk, hogy egyszer majd vitorlázni fogunk. De minden alkalommal, amikor erről beszélgetünk, ugyanaz a szomorú gondolat tér vissza: a tenger tele van szeméttel. Az, amibe szeretnénk beleszeretni, az, amit lassan tönkreteszünk.
Aztán egy nap Amszterdamban láttam egy anyát és a lányát SUP-on a csatornán, ahogy kézzel emelték ki a szemetet a vízből. Olyan apró dolog. Olyan jó dolog. Nem kampány, nem támogatás, nem reflektorfény — csak két ember, aki úgy döntött, hogy a víz megéri a délutánjukat.
Ez velem maradt. Olyan valamit akartam tervezni, ami pontosan ezt az érzést megragadja: nem bűntudatot, nem félelmet, hanem csendes szeretetet a tenger iránt — és azt az egyszerű hitet, hogy ennek a védelme olyasmi, amit hétköznapi emberek valóban meg tudnak tenni.
Így megalkottam az Ondine-t, egy fiktív óceánvédő nonprofitot, és megterveztem azt a landing page-t, amit szerettem volna, ha több környezetvédő szervezetnek lenne. Olyat, ami megérezteti veled az óceánt, mielőtt bármit is kérne tőled.
02 — A probléma
A legtöbb környezetvédő oldal arra kényszerít, hogy bezárd az oldalt.
A tervezés előtt alaposan megnéztem, hogyan kommunikálnak általában a természetvédelmi és nonprofit oldalak. A többségük ugyanazt csinálja: riasztással indít. Hatalmas, ijesztő statisztikák. Piros figyelmeztető színek. Sürgős visszaszámlálók. "Cselekedj most, mielőtt késő lenne."
A szándék jó — de a pszichológia visszafelé sül el.
Amikor az emberek elárasztva érzik magukat ijesztő információkkal, az agy nem a cselekvés felé mozdul. Az önvédelem felé. A túlnyomó fenyegetéssel szemben az idegrendszer inkább elkerülésbe és érzelmi leállásba húzódik. A pszichológusok ezt "az aggódás véges medencéjének" hívják — csak ennyi félelmet bírunk el, mielőtt elzárkóznánk, hogy megvédjük magunkat.
Egyszerűen: az emberek ijesztgetésével nem segítenek nekik. Hanem bezárják az oldalt. Én ennek az ellenkezőjét akartam megtervezni.
03 — Az alapgondolat
Először tedd lehetővé, hogy beleszeressenek. Aztán mutasd meg a tétet. Aztán mutasd meg, hogy megoldható. Aztán kérd meg őket — gyengéden.
Az Ondine minden részlete egyetlen érzelmi ívre épül, pontosan ebben a sorrendben. Nem dekoratív — azon alapul, ahogyan az emberek valójában eldöntik, hogy törődnek-e valamivel és cselekednek-e érte.
— i.
Csodálat
Megnyitja az embereket. A csodálatról szóló kutatások szerint összekapcsoltságot ad valami nagyobbal, és nyitottabbá tesz a közösségi cselekvésre. Az oldal az óceán szépségével nyit, nem a pusztulásával.
— ii.
Jelentés
Okot ad az érzésnek. Amint valaki érez valamit, készen áll megérteni, miért is fontos.
— iii.
Valóság
Csak akkor jön elő — gyengéden —, ha az érzelmi kapcsolat már megvan. Így motivációként érkezik, nem kétségbeesésként.
— iv.
Remény
Azonnal a nehéz igazság után, mert az emberek csak olyan problémákra reagálnak, amiket megoldhatónak hisznek. Az oldal tisztán kimondja: ez visszafordítható.
— v.
Cselekvés
Utoljára jön, amikor az ember érzelmileg már készen áll — és kedvesen kínálják fel, nyomás nélkül.
04 — Hogyan szolgálja a dizájn az érzést
Minden döntés ugyanazt a nyugalmat hordozza.
Egy oldal a tenger iránti csendes szeretetről nem mozoghat, hangzhat vagy nézhet ki úgy, mint egy fintech hirdetés. Minden tervezési döntésnek — paletta, mozgás, szöveg, struktúra — találkoznia kellett azzal az érzéssel, amivel a látogatót szeretném elengedni.
- "Az óceán nem egy szemetesláda. Egy élő dolog — és valakinek meg kell védenie."
- "Második dagályt adunk az állatoknak."
- "A védelemnek ára van. Egy apró ár."
- "Válaszd azt, ami jólesik. Nincs rossz összeg, és nem lesz utánkövetés, amit nem kértél."
— i.
Görgetéskor lemerülsz.
Az egész oldal egy búvárkodásra épül. A háttér fixen marad, miközben a tartalom mozog rajta, és az óceán fokozatosan mélyül — a napsütötte felszíntől a sötét, izzó mélységig. Nem nézed az óceánt. Benne vagy.
— ii.
Nyugodt mozgás, szándékosan.
Minden animáció lassú. Az átmenetek gyengéden halványulnak. A gyors, agresszív mozgás éberséget vált ki; a lassú, kiszámítható mozgás biztonságot jelez. Mivel az üzenet nyugodt törődés, ahogy az oldal mozog, annak találkoznia kellett azzal, ahogy érezni akarja a látogatót. A médium hordozza az üzenetet.
— iii.
Egy szín, ami azt jelenti: él.
A paletta mélykék óceán. Ez ellen a sok kék ellen pontosan egyetlen accent áll: egy lágy, izzó teal, mint a biolumineszcencia. Csak a legfontosabb pillanatokban használtam — a navigációs jelzőn és az adományozó gombon. A visszafogottság adja az accent erejét.
— iv.
Szavak, amik tisztelik az olvasót.
A szöveg csendes és őszinte. Nincs bűntudat, nincs hype, nincs vállalati nyelvezet. Az internet nagy része nyomást és manipulációt használ. Az Ondine bizonyítja, hogy méltósággal is lehet segítséget kérni — és bízni az emberekben, hogy válaszolni fognak.
05 — A valóság, gyengéden bemutatva
Egy palack. Egy sor. Egy csendes igazság.
Egy szakasz kimondja a nehéz igazságot. De a megrázó képek — elpusztult állatok, hulladékhalmok — helyett egyetlen palackot mutat, ahogy egyedül sodródik a mélyben, és egy őszinte sort arról, mennyi műanyag kerül a tengerbe.
Ez szándékos. Egy tiszta, konkrét kép mélyebben hatol, mint tíz elsöprő. Az agy sokkal jobban dolgoz fel egy fókuszált dolgot, mint a borzalom áradatát — és az áradat csak újra elindítja a leállási reakciót. Így ez a szakasz csendes, majdnem szép, és valahogy szomorúbb is attól. Aztán azonnal a remény felé fordul: visszafordítható.
"Az óceán olyan keveset kér. A legtöbbször csak azt, hogy hagyjuk abba a tönkretételét."— Dr. Mara Vinke, tengerökológus
06 — Amit terveztem és építettem
Működő frontend demó. Nem csak egy kép.
A nulláról terveztem és kódoltam — nincsenek frameworkök, nincs template. Csak HTML, CSS, JavaScript és döntések.
Terveztem
- A teljes érzelmi ívet és oldalstruktúrát
- A vizuális identitást — paletta, tipográfia, a biolumineszcens accent rendszer
- Az összes szakasz layoutját, desktopon és mobilon
- A copywritingot és a hangnemet
- A filmes víz alatti képanyagot (AI-val generálva, art-directed konzisztens hangulatra)
Építettem
- A rögzített hátterű, görgethető tartalmas "lemerülés" hatást
- Sima crossfade átmenetek az óceáni jelenetek között
- A nyugodt, lassú animációs rendszert
- Egy görgetési előrehaladás-jelzőt
- Teljesen reszponzív layoutot telefonra és desktopra
- Egy interaktív adományozó szekciót választható összegekkel
07 — Mit csinálnék ezután
Ha az Ondine valódi lenne.
Egy landing page egy kapcsolat kezdete, nem az egésze. Ha ez egy valódi szervezet lenne, a következő lépések ezek lennének: