Munkák · Weboldal · Arculat · Ez az oldal
SLENAY
Ez az oldal önmagában is esettanulmány: arculat, felület, mozgás, lokalizáció, SEO és mérnöki munka — mindet a SLENAY végezte.
- 2nyelv egyetlen kódbázisból
- 6logóirány, mielőtt egyet kiválasztottunk
- 0animációs könyvtár vagy UI-készlet
- 1jelzőszín, csak az emelkedő szárhoz használva
A feladat
Technológiai céget indítani egy olyan weboldallal, amely maga a bizonyíték: prémium design, gyors, akadálymentes, kétnyelvű — és úgy építve, hogy a látogatókból ajánlatkérés legyen.
Arculat
A jel egy vastag, geometrikus szómárka egyetlen tudatos eltéréssel: az Y jobb szára a nagybetűmagasság fölé emelkedik — a növekedés a névbe építve. Az Y önmagában a szimbólum. Egy színnel is megáll, és favicon méretben is. Hat irányt vizsgáltunk, mielőtt ezt választottuk.
- Egyedi geometrikus betűformák, tiszta vektorként rajzolva
- Szómárka, szimbólum és appikon egyetlen rendszerből
- Sötét és világos háttéren is, egy színben is
- Egyetlen jelzőszín, az emelkedő szár számára fenntartva
Élmény
Sötét, visszafogott, tipográfiai. A mozgás lassú és megfontolt, és teljesen eltűnik azoknak, akik csökkentett mozgást kérnek. Az ajánlatkérés rövid, vezetett beszélgetés, nem űrlap.
- Design tokenek a betűtípushoz, színhez, térközhöz és mozgáshoz
- Görgetésvezérelt animáció CSS-ben
- Ötlépéses ajánlatkérés beágyazott validációval
- A mobil nézet külön tervezve az asztalitól
Design tokenek
- ink-1#0b0b0d
- ink-2#111114
- paper#f2f1ec
- signal#ff5a1f
Mérnöki munka
Next.js, React és szigorú TypeScript. A szolgáltatások, projektek és szövegek típusos adatokban és üzenetfájlokban élnek, így új projekt, szolgáltatás vagy nyelv az oldalkód érintése nélkül adható hozzá.
- Statikusan generált oldalak
- Típusos tartalomréteg
- A keretrendszeren kívül két futásidejű függőség
- CSS cascade layerek és design tokenek
Lokalizáció és SEO
Magyar és angol nyelv egyetlen kódbázisból, lokalizált URL-ekkel, nyelvi alternatívákkal, oldalankénti metaadatokkal, strukturált adatokkal és generált oldaltérképpel.
- Lokalizált URL minden oldalhoz
- hreflang alternatívák és kanonikus URL-ek
- Organization, WebSite, Service, Breadcrumb és FAQ séma
- Nyelvenként generált Open Graph kép
- Szolgáltatások
/hu/szolgaltatasok/en/services - Munkák
/hu/munkak/en/work - Folyamat
/hu/folyamat/en/process - Rólunk
/hu/rolunk/en/about - GYIK
/hu/gyik/en/faq - Ajánlatkérés
/hu/ajanlatkeres/en/quote
Teljesítmény és akadálymentesség
Szemantikus HTML, teljes billentyűzetes navigáció, látható fókuszállapotok, csökkentett mozgás támogatása, minimális JavaScript és nulla elmozdulás.
- Szerveren renderelt HTML, minimális kliensoldali JavaScript
- Saját tárhelyről szolgált betűtípusok
- Akadálymentes űrlapok, címkék és hibaüzenetek
- Tiszteletben tartja a prefers-reduced-motion beállítást