01
Nem kell találkoznunk
A célcsoport kerüli a telefonálást és a személyes találkozót, ezért az oldal ezt mondja ki elsőként, három lépésben. A heróban magától lejátszódó chat-beszélgetés, élénk magenta–lila–lime arculat.
Saját projekt · Weboldal
Neked Könyvelünk
Bemutatkozó és ajánlatkérő weboldal egy könyvelő csapatnak
- oldal
- 5
- mező az űrlapon
- 3
- captcha: spamcsapda helyette
- 0
01Röviden
Könyvelés fiataloknak, „chaten”. Az oldal célcsoportja a fiatal vállalkozók, akik kerülik a telefonálást és a személyes találkozót, ezért minden ennek rendelődik alá: laza, beszélgetős szöveg, élénk magenta–lila–lime arculat, sok mikroanimáció, és egy olyan űrlap, amitől nem kell szorongani.
Öt oldal, valódi e-mailt küldő kapcsolati űrlap, teljesen reszponzív.
02Kiemelt pillanatok
02
Az űrlap, amitől nem kell szorongani
Csak 3 mező. A fejléc a beírt névvel köszön („Szia, Anna!”), a jó mezők pipát kapnak, hibánál a mező megrázkódik, és a félbehagyott piszkozat legközelebb visszatöltődik.
03
Értesítő, ami Outlookban is szép
Egyedi HTML e-mail, ami sötét módban sem színeződik át, „Válasz Annának” gombbal: a válasz egyből az érdeklődőhöz megy.
03Képernyők
Mobil · 2 képernyő
04Mit tud
01
Design és élmény
- Bricolage Grotesque, DM Sans és Caveat betűhármas, gradiens szövegek, „matricák”, filc-csíkos kiemelés, hullámos aláhúzás.
- A heróban animált telefon, benne magától lejátszódó chat-beszélgetés.
- GSAP animációk: maszkolt címsor-belépő, 3D-ben felpörgő címek, felpörgő számlálók, gyorsuló futószalag; egérkövető fényfolt, dőlő kártyák, mágneses gombok, konfetti.
- Lenis sima görgetés, animált oldalváltás saját függönnyel, csökkentett mozgás támogatása, billentyűzetes menükezelés.
02
A kapcsolati űrlap, a projekt szíve
- Szándékosan csak 3 mező és témaválasztó chipek, kitöltöttség-jelzővel.
- Élő, személyes visszajelzés: a fejléc a beírt névvel köszön („Szia, Anna!”), a jó mezők pipát kapnak, hibánál a mező megrázkódik, barátságos hibaszöveggel.
- Piszkozat mentése: ha a látogató félbehagyja, legközelebb visszatölti.
- Sikernél konfetti; hibánál nem hazudik sikert, hanem felkínálja az e-mail címet.
- Spamcsapda captcha helyett, szerveroldali validáció és mezőhossz-korlát.
- Egyedi HTML értesítő e-mail (Outlook-kompatibilis, sötét módban sem színeződik át), „Válasz Annának” gombbal.
03
SEO és technika
- Statikus generálás Astróval; egyetlen serverless függvény van, az űrlapé.
- Oldalanként saját cím, leírás és kanonikus URL, sitemap, egyedi 1200×630-as megosztókép.
- Strukturált adatok: könyvelőiroda szolgáltatáskatalógussal, a GYIK FAQPage-ként, ugyanabból a listából, ami az oldalon látszik.
- Biztonsági fejlécek, hosszú távú cache, frankfurti régió; e-mail küldés külön aldomainről, így a meglévő levelezés érintetlen maradt.