Mi az a design system, és miért fontos?
A design system egy közös készlet a márkád építőelemeiből: színek, betűstílusok, ikonok, gombok, kártyák, űrlapok — és mindezek használati szabályai. Olyan, mint egy zenekarnak a kottatár: bárki lép színpadra, ugyanazt a dallamot játssza. Az eredmény: következetes arculat, kevesebb egyeztetés, gyorsabb kivitelezés.
Mikor érdemes bevezetni?
Három jel, hogy itt az idő: (1) minden aloldal kicsit máshogy néz ki; (2) a fejlesztés „lassú és drága”, mert mindent újra kell kitalálni; (3) a marketing új kampányaihoz nehéz illeszteni a honlapot. Ha ezek közül kettőt pipálsz, a design system azonnali megtérülést hoz.
Alapelemek: tokenek és komponensek
Először az „atomokat” rögzítsd, aztán jöhetnek a „molekulák”. A tokenek a döntések: milyen a kék, mekkora a címsor, mekkora a kártya sarka. A komponensek ezekből állnak össze.
- Tokenek: színpaletta (alap, sötét/világos, állapotok), tipográfia (H1–H6, bekezdés, link), térközök (xs–xl), árnyékok, lekerekítések.
- Komponensek: gombok (alap/sekunder/ghost), kártyák, űrlapmezők + hibakezelés, értesítések, navigáció, CTA‑sávok.
Hogyan néz ki ez a gyakorlatban?
Képzeld el, hogy új landinget készítesz. Ahelyett, hogy „érzésből” raknád össze, előveszed a stíluskalauzt: Primer gomb = 16px, félkövér, közepes kerekítés, 12px belső margó; Hover állapot: 8% sötétítés. Nincs vita, nincs csúszás — csak építés. A következő landing már félig készen van, mert a minták újrahasznosulnak.
Gyakori hibák (és gyors javításuk)
- „Minden oldal más”: vezess be kötelező alap‑stílusokat (H1, bekezdés, link, lista), és egy 3‑szintű gomb‑rendszert.
- „Túl sok szín”: limitáld 1 primer + 1 szekunder + 2 állapotszínre; a többi árnyalatot csak illusztrációhoz használd.
- „Szórt ikonok”: válassz 1 ikonkészletet, és ragaszkodj hozzá; a méret és vonalvastagság legyen egységes.
- „Form‑káosz”: minden űrlapmezőnek legyen azonos állapota (fókusz, hiba, kitöltött), egységes hibaüzenettel.
A lényeg: előbb döntsd el a tokeneket (színek, betűk, térközök), aztán építs komponenseket (gombok, kártyák, űrlapok). Ha fordítva csinálod, minden projektelem külön „mini‑márkát” hoz létre, és sosem lesz teljes az egységesség.
Bevezetési workflow (3 hét, valós ütem)
Nem kell hónapokra leállni. Így lehet gyorsan, kézzelfoghatóan haladni:
- hét — Alapok: tokenek rögzítése (színek, tipó, térközök), alap gombok és kártyák.
- hét — Kulcsoldalak: hero, szolgáltatás‑szekció, CTA‑sáv, űrlap állapotok; mobil‑ellenőrzés.
- hét — Dokumentálás: rövid stíluskalauz képernyőképekkel, példákkal; szerkesztőknek „mit hogy” leírás.
WordPress/Joomla: mit állíts be?
CMS‑ben a design system nem PDF, hanem élő szabályrendszer. A cél, hogy a szerkesztők ne tudjanak félremenni.
- WordPress: Webhelybeállításokban betűk és színek; gomb‑variánsok (primer/szekunder/ghost) globális stílussal; előre kész „blokk‑minták”.
- Joomla: sablon‑változók (színek, tipó), modul‑stílusok egységesítése; ismétlődő szekciók modul‑ként.
- Kódhigiénia: inline‑stílus tiltólista; komponens‑osztályok dokumentálva.
Mérés és karbantartás
Design systemet nem „készre” adunk, hanem karbantartunk. Negyedévente nézd át a főoldalt és a top landingeidet: tényleg a meghatározott gombok jelennek meg? az űrlap hibái egységesek? A szerkesztők visszajelzései alapján finomítsd a mintákat.
- GA4: CTA‑kattintás, űrlap‑hibaarány, mobil vs. desktop konverzió.
- Governance: 1 „design system gazda”, aki jóváhagy minden új komponens‑kérést.
Bevezetési ellenőrzőlista
- Tokenek rögzítve (színek, tipó, térközök, árnyék, lekerekítés).
- Gomb‑rendszer: primer/szekunder/ghost + állapotok.
- Kártya‑ és űrlap‑minták dokumentálva.
- WP/Joomla globális stílusok és blokk‑/modul‑minták kész.
- Rövid stíluskalauz szerkesztőknek (képernyőképekkel).
- Negyedéves review + mérési dashboard (GA4).
