ALIVE
Design Studio
Egy személyes stúdió weboldal, ami tisztaságra, szándékos mozgásra és olyan design rendszerre épül, ami azt tükrözi, ahogy én valóban gondolkodom a designról.
A kihívás
Megtalálni az arany középutat a vizuális és a strukturális között.
Sok portfólió oldal egyik irányba húz — vagy vizuálisan ütős, de nehéz benne navigálni, vagy strukturálisan szilárd, de lapos. Én az arany középutat akartam: egy oldalt, ami nyugodt és átgondolt érzést kelt, épp annyi személyiséggel, hogy egyértelműen az enyém legyen.
Multidiszciplináris dizájnerként arra is szükségem volt, hogy az oldal egyértelműen kommunikálja a tudásom szélességét anélkül, hogy szétszórtnak tűnne — egy összefüggő rendszer, ami a különböző típusú munkák között is egyben tartja az egészet.
Tervezési célok
Mit tűztem ki magam elé.
Célok
- A munkák tiszta, könnyen átlátható formátumban való bemutatása
- Összefüggő vizuális és érzelmi identitás kifejezése
- A mozgás használata a jelentés erősítésére, nem a hely kitöltésére
- Rugalmas alap építése, ami a praxisommal együtt nő
Megkötések
- Személyes projekt hatókör — nincs külső felhasználói tesztelés
- Mobile-first gondolkodás végig
- Fókuszált funkciókészlet a felesleges komplexitás elkerülésére
Tervezési folyamat
Kulcsfontosságú tervezési döntések.
01
Visszafogottság a díszítés helyett
A díszítő komplexitást szándékosan kivágtam. A nyugodt és könnyen követhető érzés értékesebbnek tűnt, mint a vizuálisan lenyűgöző.
02
Szándékos vizuális súly
A nagy vizuális elemek vezetik a szemet anélkül, hogy túlterhelnének. A tipográfia tömör és jól strukturált marad a gyors olvasás érdekében.
03
Cél nélküli mozgás nincs
A mozgás csak ott jelenik meg, ahol a ritmust támogatja vagy visszajelzést ad — soha nem dekorációként vagy elvonásként.
04
Kiszámítható struktúra
Újrahasználható elrendezések, konzisztens térközök, tiszta hierarchia és kiszámítható interakciók — komponensek, amik megerősítik a bizalmat.
Vizuális fejlesztés
Felfedezésen át épített rendszer.
A rendszer két váltakozó felületre épül — egy mély sötét háttérre és egy lágy világosra — ami természetes ritmust hoz létre a szakaszok között. A tompított teal végig accentként szolgál, lehorgonyozva a palettát anélkül, hogy elnyomná.
Színek
Tipográfia
Playfair Display — Editorial súly
Inter — Tisztaság & olvashatóság
Mozgás és interakció
Annyira jelen van, hogy érezzük: él.
A mozgás csendes, támogató szerepet játszik. Görgetés alapú fade-up animációk, egyedi mix-blend-mode kurzor, lágy hover állapotok és glassmorphism navbar — mind vanilla JavaScriptben építve. Az animációk Procreate Dreams-ben készültek, beleértve egy hurkolt ALIVE szimbólumot is. Annyira jelen van, hogy érezzük: él, de annyira visszafogott, hogy ne vonja el a figyelmet.
Az építés
Minden sor kézzel írva.
Teljes egészében VS Code-ban építve, vanilla HTML, CSS és JavaScript használatával — keretrendszerek nélkül. Verziókövetés Gittel, GitHubon hosztolva. Minden sor kézzel írása mind a gondolkodásban, mind a kivitelezésben tisztaságot kényszerített ki.
Stack
HTML · CSS · Vanilla JavaScript
Munkafolyamat
VS Code · Git · GitHub
Design
Figma · Procreate Dreams
Az eredmény
Egy nyugodt, strukturált tér.
A végleges oldal a tervezési értékeimet tükrözi: tisztaság, visszafogottság és szándékos interakció. A rendszer elég rugalmas ahhoz, hogy a praxisom fejlődésével mozgás, 3D és interaktív média irányába is bővíthető legyen.
Reflexió
Mit tanultam.
Ez a projekt megerősítette, mennyire fontos egyensúlyt találni a struktúra és a személyes kifejezés között — és hogy a megkötések, ha elfogadjuk őket, jobb eredményeket szülnek.
Ami jól sikerült
- A tiszta hierarchia első látogatástól kezdve intuitívvá tette a navigációt
- A finom mozgás gazdagságot adott anélkül, hogy elvonta volna a figyelmet
- A visszafogott rendszer természetes teret hagyott a jövőbeli növekedésnek
Amit finomítanék
- Valódi felhasználói visszajelzések gyűjtése a tervezési döntések validálására
- Adaptív mozgás felfedezése, ami a felhasználói viselkedésre reagál
- Az akadálymentességi szempontok mélyebb beépítése