Esettanulmány · Design és motion rendszer
Egy rendszer, két teljesen eltérő tech stacken.
WCAG-kontraszthibák, fókuszkezelés és motion-nyelv egységesítése a Cadensa alkalmazásban és a landing oldalán, anélkül hogy bármelyik meglévő kódját újraírtuk volna.
A rendszerkérdés
Hogyan legyen egységes a márka két, technológiailag teljesen különböző felületen?
A Cadensa alkalmazás MUI-t használ, a landing oldal Tailwind/shadcn-t. A kérdés nem az volt, melyik a jobb, hanem hogy ugyanaz a döntési réteg hogyan fordítható le mindkettőre, anélkül hogy bármelyiket újra kellene írni.
Amit lefedtünk
Nem új UI library, hanem közös döntési réteg a meglévő kód felett.
Kulcsdöntések
Ugyanaz az elv, két különböző fordítás.
- 01
Mérés, nem feltételezés
A tényleges kontrasztot mértük mindkét felületen, és két, korábban dokumentálatlan hibát is találtunk így.
- 02
Stack-hű fordítás
MUI-n natív MUI-eszközökkel, Tailwind-oldalon framer-motionnal: ugyanaz a viselkedés, más nyelven.
- 03
Márka a kontraszt felett, nem helyette
Ahol a márkaszín önmagában nem felelt meg, a szöveg színét változtattuk, nem a márkát.
- 04
A legkisebb kockázatú felületen élesben
Az új motion-mintát ott vezettük be élesben, ahol még semmi nem használta. A Dialog-újraírás így egyetlen fogyasztóval sem járt kockázattal.
Következő bizonyíték
A harmadik felület és a mérhető tervezési időmegtakarítás van hátra.
Következő lépés
Hasonló többfelületes design-rendszert építenél?
Az Interface & Motion System pontosan ezt bizonyítja: egy döntési réteg, ami több tech stacken is konzisztens marad.