Kiindulás: meghitt, de átlátható
Vámosi Patrik Veszprémből dolgozó esküvői fotós. Új weboldalt kért, amely több és jobb ajánlatkérést hoz, hitelesebben mutatja meg a munkáját, és portfólióként is megállja a helyét. Az oldal egyetlen fő cselekvése az ajánlatkérés.
A munka egy kérdőívvel indult. A válaszokból kiderült, hogy Patrik ügyfelei jellemzően stílusos, fiatal párok, akik két dologtól tartanak: hogy túl drága lesz, és hogy nem tudják, mit kapnak a pénzükért. Az oldaltól meghitt, belsőséges, romantikus és inkább klasszikus hangulatot kért, zöld és bézs színekkel. A legrosszabb visszajelzés, amit el tudott képzelni, egyetlen szó volt: „átláthatatlan”.
Mi közben valami emlékezetesebbet is akartunk, mint egy újabb fehér hátterű képrács. A feladat tehát az volt, hogy a látványos mozgás ne nyomja el a képeket, és ne tegye nehezebbé az eligazodást.
Egy dolgot érdemes nyíltan leírni: Patrik nemcsak az ügyfelünk, hanem az ALAK csapatában fotósként is dolgozik. Az oldala mégis ugyanúgy indult, mint bármelyik ügyfelünké: az ő kérdőíves válaszaiból és az ő anyagaiból.
A koncepció: boríték és fény
A kulcsot Patrik saját anyagaiban találtuk. Az árajánlatában visszatérő kellék egy krémszínű boríték, amelyből egy fotó csúszik elő. Patrik márkáját is mi terveztük, és ennek az alapjait is ebből az ajánlatból vettük: az olíva, moha, csont és papír színeket, a keskeny, talpas címbetűket és a kézírásos kiegészítéseket.
A boríték azt mondja el, amit Patrik munkájáról tudni kell: a képek nem tömegtermékek, hanem személyes küldemények, amelyeket egyszer kinyitnak, és évekig újra elővesznek. A fény pedig a fotós alapanyaga. Ezért a „wow” nem rárakott effekt lett, hanem a saját kellékének és témájának megmozdítása. A mozgás lassú és leülepedő, semmi nem pattan vissza.
Megoldások részletesen
Egy boríték, ami kinyílik
Az első látogatáskor egy boríték jelenik meg. A füle felhajlik, előcsúszik belőle egy fotó, és ez a kép kitágul, amíg ő nem lesz a kezdőlap. A nyitány munkamenetenként egyszer fut, egy kattintással vagy billentyűvel bármikor átugorható, és ha valaki a rendszerében csökkentett mozgást kér, ki is marad.
A nyitókép fölött egy saját fényréteg dolgozik. Alapállapotban a fekete-fehér fotó félhomályos emlék, és ahová a kurzor vagy egy lassan vándorló „nap” ér, ott kivilágosodik. Görgetésre a teljes képernyős fotó keretbe húzódik, és Patrik ajánlatának címlapjává áll össze: fölötte a cím, alatta a kézírásos „érzelmek”.
Előbb a képek, aztán minden más
Egy esküvői fotós oldalán a fotó a termék, ezért a szöveg végig a képeket szolgálja. A főoldal „A nagy nap menetrendje” szakasza a napot négy fényben meséli el, a készülődéstől a hajnali buliig. A háttér színe a napszakkal együtt vált, de csak két kép között, így a szöveg mindig olvasható marad.
A portfólió három albumra bomlik: esküvők, párok, részletek. Minden album egymásra dobott nagyítások kupacaként jelenik meg, amely görgetésre lassan szétnyílik, így első ránézésre látszik, hogy sok kép van mögötte. Minden képhez magyar nyelvű leírást írtunk, ami a képernyőolvasót használóknak és a keresőknek is segít.
Levelek a pároktól
A vélemények nem csillagos kártyák, hanem levelek. Amikor a szakasz a képernyőre ér, a boríték kinyílik és kiemelkedik belőle az első levél. Lapozáskor az aktuális visszacsúszik, a következő előjön. A levelekben a párok visszajelzései állnak, ahogy Patrik oldalán is olvashatók.
Árak egy görgetésre
Az „átláthatatlan” elkerülésére a legerősebb eszköz az volt, hogy az árak nyilvánosak. A főoldalon a négy csomag egy pakli kártyaként érkezik: ahogy a következő rácsúszik, az előző kicsit hátralép. Az óradíjas minitől a 460 000 forintos egész napos csomagig mindegyiknél ott áll, hány óra, legalább hány kép és mi van még benne, és mindegyikről egy kattintással indul az ajánlatkérés, már kiválasztott csomaggal. A külön tételek, például a jegyes fotózás és az útiköltség, a csomagok oldalán vannak, a kérdések oldal pedig a fizetésre és az átadásra is válaszol.
Az ajánlatkérés is levél
Az űrlap egy levél, amely így kezdődik: „Kedves Patrik!”. A párok kitöltik, kik ők, mikor és hol lesz az esküvő, és milyen a szertartás. A dátumból postabélyegző lesz, a nevekből aláírás, küldéskor pedig a lap a borítékba csúszik, az lezárul és elrepül. A dátumot saját naptárral lehet kiválasztani, amely az oldal betűit és színeit használja a böngésző beépített választója helyett. Elküldés után Patrik értesítést kap, a pár pedig visszaigazoló levelet.
Telefonon is meghitt
A párok nagy része telefonon nézi meg először a fotóst, ezért a mobil nem a nagy oldal összenyomott változata. A menü a fejlécből egy teljes képernyős listába nyílik, a fejlécben csak a név, a MyWed-jel és az ajánlatkérés gomb marad. A keretbe húzódó nyitókép keskenyebb oldalsávval és más arányokkal számol, a csomagkártyák egymás alá rendeződnek, az ár pedig a kártya aljára kerül, a gomb mellé. A levelek és az űrlap mezői egy oszlopba állnak, hogy hüvelykujjal is kényelmes legyen.
Sok fotó, gyors oldal
Egy fotós oldala képekből áll, ezért a sebességet a képeknél kell megnyerni. Minden fotót a látogató képernyőjéhez illő méretben, WebP formátumban kap meg a böngésző. A nyitókép elsőként töltődik, a többi csak akkor, amikor közel ér a képernyőhöz. Minden kép előre ismert arányú helyet foglal, így betöltés közben semmi nem ugrik el. A betűket az oldal maga szolgálja ki, külső betűszerver nélkül.
A mozgás a felhasználót szolgálja: a fényréteg csak akkor rajzol, amikor a nyitókép látszik, és ha a böngésző nem tudja futtatni, egyszerűen a fotó marad. Aki csökkentett mozgást kér, annak a nyitány, a sima görgetés és a görgetéses animációk kimaradnak.
- Next.js, saját komponensekkel, sablon nélkül
- GSAP a görgetéshez kötött mozgáshoz, Lenis a sima görgetéshez
- Saját WebGL-árnyaló a nyitókép fényéhez
- Resend az ajánlatkérő és a visszaigazoló levelekhez
- Vercel tárhely és sütimentes Vercel látogatottságmérés
- Szigorú tartalombiztonsági szabályok (CSP) és biztonsági fejlécek
- Szerkezeti adatok a keresőknek, megosztási kép a közösségi oldalakra
A keresőoptimalizálást (SEO) is mi végeztük, ahogy minden oldalunknál: a szerkezet, a szövegek és a képleírások a keresőknek is szólnak.
A weboldal készítésnél mindig ugyanígy dolgozunk: a technika azért van, hogy a tartalom jól látsszon, nem fordítva.
Ami most él
A vamosipatrik.hu élesben fut Patrik saját domainjén. Rajta van a főoldal a nyitánnyal és a nap menetével, a háromalbumos portfólió, a csomagok és árak, a rólam oldal, a gyakori kérdések és a levélként működő ajánlatkérés. Az ügyfélgaléria oldala Patrik meglévő galériaszolgáltatásából, a PicFlow-ból tölti be a nyilvánosan listázott galériákat, a jelszót pedig a PicFlow kéri, így a párok képei ott maradnak, ahol eddig is voltak. Patrik kérésére a fotókon a jobb klikk és a képek kihúzása tiltva van.
Hogy egy ilyen oldal mennyibe kerül, az a mérettől és a funkcióktól függ. A Mennyibe kerül egy weboldal? oldalon leírtuk, mitől drágább vagy olcsóbb.