Mi az a design system, és miért kell egy céges weboldalnak is?

Ha egy weboldalon a harmadik aloldalon már másképp néz ki a gomb, mint a főoldalon, a címsorok mérete oldalanként változik, és minden kék egy kicsit más árnyalat, annak szinte mindig ugyanaz az oka: nincs mögötte design system. Ez nem csak a Google vagy az Airbnb méretű cégek ügye. Egy tízoldalas céges weboldalnak is jár egy kicsi, jól átgondolt rendszer.

Mi az a design system?

A design system azoknak a szabályoknak és építőelemeknek a gyűjteménye, amelyekből az oldal felépül. Három rétege van:

• Tokenek: a legkisebb döntések, névvel ellátva. Például az elsődleges szín, a háttérszín, a címsorok mérete, a térközök (8, 16, 24, 48 pixel), a sarkok lekerekítése.
• Komponensek: a tokenekből összerakott, újrahasznosítható elemek: gomb, kártya, űrlapmező, árkártya, GYIK-blokk.
• Szabályok: mikor melyiket használjuk. Melyik gomb az elsődleges, hány elsődleges gomb lehet egy szekcióban, mekkora a minimális kontraszt.

Ha ez megvan, egy új aloldal nem tervezés, hanem összerakás: a meglévő elemekből épül, és automatikusan illeszkedik a többihez.

Miért éri meg egy kisebb oldalnál is?

Egységes megjelenés

A látogató nem tudja megfogalmazni, de érzi, ha egy oldal „összeszedett”. Az egységes színek, betűméretek és térközök bizalmat keltenek, a következetlenség pedig amatőr benyomást kelt, még akkor is, ha a szöveg kiváló.

Gyorsabb és olcsóbb bővítés

Fél év múlva kell egy új szolgáltatásoldal vagy egy kampányoldal. Design system nélkül ez újratervezés, vele néhány óra. Ugyanez igaz a változtatásra: ha az elsődleges színt egy helyen, tokenként tároljuk, egyetlen módosítással az egész oldalon kicserélődik.

Akadálymentesség beépítve

Ha a színpárokat egyszer ellenőrizzük a WCAG kontrasztkövetelményeire (szövegnél legalább 4,5:1), és a gombok fókuszállapotát egyszer megtervezzük, akkor minden oldalon jó lesz. Nem kell oldalanként újra figyelni rá. Erről bővebben a WCAG 2.1 AA-ról szóló cikkemben írtam.

A szerkesztő nem tudja elrontani

Egy page builderben bárki bármilyen színt és betűméretet beállíthat, és két év alatt az oldal szétesik. Egy design systemre épülő témában a szerkesztő előre definiált blokkokból és változatokból választ, így a megjelenés akkor is egységes marad, ha öt különböző ember tölti fel a tartalmat.

Mi legyen egy kis céges design systemben?

Nem kell 300 komponensből álló Figma-könyvtár. Egy céges weboldalhoz ennyi általában elég:

• színpaletta: elsődleges, kiemelő, háttér, szöveg, szegély, plusz a visszajelzések (siker, hiba) színei;
• tipográfia: egy vagy két betűtípus, 6–8 méretlépcsővel a nagy címtől a lábjegyzetig;
• térközskála és rácsrendszer, töréspontokkal mobilra és asztali nézetre;
• gombok 3–4 változatban, állapotokkal (hover, fókusz, letiltott);
• kártyák, űrlapmezők, listák, címkék;
• a szekciók háttérváltozatai (világos, szürke, sötét).

Hogyan csinálom én?

Minden projektnél a tokenek a kódban, egy helyen vannak (Tailwind CSS-változókként), és az oldalon van egy rejtett „Design System” aloldal, ahol minden szín, betűméret, gomb és komponens élőben látható. Ez a rendszer egyetlen igazságforrása: ha valami ott jól néz ki, mindenhol jól fog.

A dizájn alapból mesterséges intelligencia segítségével készül, de ha teljesen egyedi megjelenést szeretnél, a dizájnerpartneremmel Figmában tervezzük meg, design systemmel együtt. Ha pedig még az alapok (logó, színek, betűk) is hiányoznak, egy mini arculattal kezdjük.