# Mire és kiknek való a Design System? Hogyan épülnek fel? És mik azok egyáltalán? > A Design System egy újrafelhasználható elemekből és szabályokból álló rendszer, ami segít neked és a csapatodnak következetesen dolgozni. Akkor van rá igazán szükséged, ha több emberrel tervezel egyszerre, vagy komplex projekteken dolgoztok. Időt spórol, és biztosítja, hogy a végeredmény mindig egységes maradjon. Forrás: https://brandguide.hu/mire-es-kiknek-valo-a-design-system/ · Megjelent: 2022-07-15 · Frissítve: 2026-10-19 Bár a kreatív alkotásról a legtöbb embernek a káosz jut eszébe, valójában a hatékony alkotás alapja a rendszer. Egy következetes, jó Design System egyrészt rengeteg időt spórol a tervezés során, másrészt lehetővé teszi, hogy a meglévő eszközkészletből valami újat alkothassunk. De mi is a Design System pontosan? Kinek és miért jó? Ennek járunk utána ebben a cikkben. ## Mi a Design System vagy tervező rendszer? Igyekeztem pontos definíciót keresni a Design System kifejezés tisztázására. Íme: ![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2021/09/tipp.webp) Jogi szempontból mindenképpen kérdéses, hogy egy-egy ilyen eredménnyel mihez is kezdhetsz. Így bármelyik AI tool-t is használod, nézz utána a jogi oldalának, ha továbbvinnéd. A tervezőrendszerek tehát újrafelhasználható elemek és irányelvek folyamatosan fejlődő készletei. Ezek biztosítják a közös nyelvet a tervezőknek (esetünkben például grafikusoknak, designereknek) és mérnököknek. Így segítve a következetes tervezési folyamatokat. Azaz egy jó tervezőrendszer két eleme: - az elemtár - és a szabályozóutasítás-készlet. Ezek lényegében egy komplett brand működtetését is megalapozzák. ## Miért hasznosak a tervezői rendszerek? A folyamatok követéséhez jó, ha lejegyzett rendszerekről beszélünk. De nem minden Design System kerül rögzítésre. Kezdő tervezők és magányos harcosok gyakran a fejükben tárolják ezeket a struktúrákat. (Ezt hívjuk Inhead Design Systemnek.) ![Design System kialakítása](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/07/system-s-1-1024x469.webp) Miért van szükség design systemekre? A kiindulási pont az az állapot, amikor egy designer dolgozik a projekten, a tervezőrendszer pedig az ő fejében van. Viszont onnantól, hogy több designer (vagy más kivitelező) is csatlakozik a projekthez, szükségessé válik egy olyan elemkészlet és rendező elv, ami segíti a következetes tervezési folyamatokat – különösen akkor, ha a csapatnak fizikai távolságokkal is meg kell küzdenie. A legnagyobb szükség akkor van a Design Systemre, amikor komplex tervezési problémákat kell megoldanunk, nagy számú felhasználók számára, nagy számú tervezők segítségével. Egy ilyen rendszer rengeteg időt spórol nekünk, hiszen lehetővé teszi az önálló, mégis következetes, az irányelveket követő munkavégzést. ### A Design Systemek rövid történelme A tervezőrendszerek szükségességét a digitális terméktervezés hozta felszínre az utóbbi években. Az ezt előhívó igény azonban sokkal régebbi ennél. Vitruvius „[10 könyv az építészetről](https://www.libri.hu/konyv/vitruvius.tiz-konyv-az-epiteszetrol.html)” című alkotása is épp ezt az igényt szolgálja ki. ![Vitruvius 10 könyv az építészetről](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/07/system-s-2-1024x469.webp) Vitruvius 10 könyv az építészetről Talán ismerősebben cseng Christofer Alexander neve, aki újrahasználható megoldásokat (patterneket) határozott meg a különféle design problémák megoldásának egyszerűsítésére. Elsőként ismerd meg, mikor és hol tudod használni az AI tool-okat, és hogyan tudnak hozzájárulni a mindennapi munkádhoz! Később a ‘70-es, ‘80-as évek arculati kézikönyvei is azért születtek meg, hogy érthető és követhető rendszerekbe foglalják a brandek arculati elemeinek következetes használatát. Elemtárak és utasításkészlet segítségével. ![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2021/09/tipp.webp) ![NASA arculati kézikönyve kapcsos mappába kötve.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/07/system-s-3-1024x469.webp) NASA arculati kézikönyve kapcsos mappába kötve. És most, hogy mindezt tudjuk, lássuk, hogyan épül fel egy tervezőrendszer. ## A Design System hierarchiája A tervezői rendszerek több összetevőből állnak, például logo, színpaletta, tipográfia és képek és ezek használati útmutatói. Több olyan dokumentáció létezik, amely ezek közül néhányat vagy mindet tartalmazza. A teljesség igénye nélkül – részletesség szerint növekvő sorrendben: - Styleguide - UI Kit - Brandguide - Arculati kézikönyv - Design System UI - Design Language ![Design System hierarchia grafikonon.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/07/system-s-4-1024x469.webp) Design System hierarchia grafikonon. Feltűnhet, hogy a lista elemei önmagukban is tartalmaznak az arculat szempontjából fontos elemeket. Viszont más-más mértékben és pontossággal. Míg a Styleguide még elnagyoltabb, akár kevesebb konkrétumot felvonultató összegző, addig a Design Language már egy kiterjedt rendszer, amiben az arculat, a branding, a digitális és klasszikus megjelenési formák rendszere és annak szabályszerűségei is szerepelnek. De merüljünk egy kicsit mélyebbre… ## A design rendszerek atomjai Brad Frost nevéhez fűződik az elgondolás, miszerint a világunkhoz hasonlóan, a tervezői rendszerek is atomokból állnak. (Ez az Atomic Design System alapja.) Ezeket az atomokat pedig rendszereznünk kell. Rend nélkül ugyanis nagyon nehéz az építkezés. ![Rendezetlen, rendszerezett és összeszerelt Lego elemek.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/07/system-s-5-1024x469.webp) Rendezetlen, rendszerezett és összeszerelt Lego elemek. Gyakorlatilag a munka ⅓-át megspórolhatjuk, ha rendszerezett elemekből dolgozunk. Ha pedig ezekhez az elemekhez összeszerelési útmutatónk is van, még hatékonyabbak lehetünk. Sőt, a megfelelő elemtárral és utasítási rendszerekkel ugyanabból a készletből akár más végeredményt is kihozhatunk. ### Az Atomic Design System 5 lépésben 1. **Atomjaira** bontjuk a később használható elemeket. (Atomok lehetnek színek, formák, betűtípusok stb.) 2. Az atomokból **molekulákat** készíthetünk, amelyek kapcsolódnak egymáshoz. (Például egy login képernyő több design atom kapcsolódásából tevődik össze.) 3. Majd **organizmusok** jönnek létre, ha összekapcsoljuk a molekulákat. 4. Az organizmusokból **template**\-eket alkothatunk. 5. A template-ek pedig kiadják az **oldalt** vagy tartalmi egységet, aminek elkészítése volt a cél. ![Az Atomic Design System 5 eleme – atomoktól a tartalomig.](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/07/system-s-6-1024x469.webp) Az Atomic Design System 5 eleme – atomoktól a tartalomig. Ez a fajta gondolkodás feladattípustól és eszköztől függetlenül is segíti a designer munkáját. Sőt, az olyan szoftverekben, mint a [Figma](https://www.figma.com/), egyre több a design rendszerek kialakítását segítő lehetőség. ## 4 kiemelkedő és 1 feltörekvő Design System példa A [UI design fejlődése](/hova-tart-a-ui-design/) kapcsán is elemeztünk már néhány tervezői rendszert. Az alábbiakban 5 példát mutatok, amelyekből inspirálódhatsz. [![](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/02/Typo-onyv-banner@3x-1024x417.webp)](/shop/tipografia-a-vizualis-kommunikacio-alapja/) ### 1\. Apple – Human Interface Guidelines Az [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/) (HIG) egy átfogó útmutató az Apple platformjaira tervezők és fejlesztők számára. Célja a felhasználói élmény javításának széleskörű elérhetősége. Találunk benne tipográfiára, színekre és egyéb építőelemekre vonatkozó javaslatokat. ### 2\. Google – Material 3 A [Material Design](https://material.io/design) a Google saját Design Systeme olyan részletes (ellentétben a nagy riváliséval), hogy gyakorlatilag ingyenes UI tanfolyamként is megállja a helyét. Ez lényegében egy a Google által létrehozott, Android-orientált tervezési nyelv. Fő célja, hogy természetes hatásokkal támogassa a digitális tartalomfogyasztás és eszközhasználat élményét. ### 3\. IBM – Carbon Design Kicsit kilóg a sorból, de nem meglepő, hogy egy számítástechnikai cégnek van saját tervezői rendszere. A [Carbon Design System](https://carbondesignsystem.com/) jól összefoglalja, hogy a különböző felületeken miként kommunikál a brand. ### 4\. Audi – Corporate Identity Ma már az autókban is egyre hangsúlyosabbak a user interface-ek. Ebből adódóan egy autógyártónak is szüksége van Design Systemre. Designerként tanulságos lehet az [Audi design útmutatóját](https://www.audi.com/ci/en/intro/brand-appearance.html) is megvizsgálni. ### 5\. Zwoelf – Zwistem Jelenleg is fejlesztjük saját márkánk a Zwoelf egyedi Design Systemét, Zwistem néven. (Egyelőre UI Kit fázisban vagyunk.) A cél, hogy színek, gombok, bevételi mezők és hasonló elemek rendszerezésével olyan kiteket és útmutatókat készítsünk, amelyek segítségével gyorsan összerakhatunk prototípusokat – sőt, a későbbiekben önálló tervezőrendszerként is értékesíteni szeretnénk. ![Zwistem Design System elemei](https://egcycyfegdznryebenvt.supabase.co/storage/v1/object/public/media/wp/2022/07/system-s-7-1024x469.webp) Zwistem Design System elemei ## Összefoglalva a fentieket… Fontos, hogy bár mindig vannak vírusként terjedő divatos kifejezések, a nap végén csak az számít, hogy ezek mögött van-e valamilyen gondolatiság. (És a Design Systemek értelme épp ez.) Komplexebb tervezési folyamatok során kötelező úgy dokumentálnunk a munkánkat, hogy az mindenki számára érthető és elérhető legyen. Ennek két alapfeltétele van: - az elemkészlet - és az alkalmazási szabályok összessége. Ha ezek megvannak, sokkal könnyebb dolgunk lesz az adott keretrendszerben új felületek és designok létrehozásával. Ráadásul a szabályokat is csak úgy tudjuk hatékonyan felrúgni, ha ismerjük azokat. (Tudatosság nélkül a kreativitás keveset ér.) És még valami… A Design System nem egy kőbe vésett szabályzat. Sokkal inkább egy organikus keretrendszer, ami folyamatosan fejlődik és változik. Ha egyetértesz a fent olvasottakkal, oszd meg a cikket, hogy mások is profitáljanak belőle. Ha vitatkoznál, kérdeznél, esetleg más designerekkel beszélgetnél hasonló témákról, várunk a [Facebook-csoportunkban](https://www.facebook.com/groups/brandguide/permalink/1816795905186083). A témában ajánlom előadásomat is amelyet a 2. YELLOW Meetupon tartottam 👇 [Videó](https://www.youtube.com/embed/sHzU1t-ZmoM?feature=oembed) ## Mit vigyél haza - Egy jó Design System két alapeleme az elemtár és a szabályozóutasítás-készlet. - Minél több tervező dolgozik egy projekten, annál inkább szükséged van rendszerre. - Rendszerezett elemekből dolgozva akár a munka egyharmadát megspórolhatod. - A Design System nem kőbe vésett szabályzat, hanem folyamatosan fejlődő keretrendszer. - Az Atomic Design System öt lépésben épül fel: atomoktól a kész oldalig. ## Gyakori kérdések ### Mi a különbség a Design System és egy sima arculati kézikönyv között? A Design System hierarchiájában az arculati kézikönyv is szerepel, de a Design System ennél részletesebb: tartalmazza a digitális és klasszikus megjelenési formák teljes rendszerét és szabályait is. ### Mikor van szükségem Design Systemre a vállalkozásomban? Akkor van rá igazán szükséged, ha több tervező vagy kivitelező dolgozik egy projekten, és következetes munkavégzést kell biztosítanod, különösen ha a csapat földrajzilag is szétszórt. ### Mi az az Atomic Design System? Brad Frost elgondolása szerint a tervezői rendszerek atomokból állnak, amelyekből molekulák, majd organizmusok, template-ek és végül a kész oldal épül fel. ### Melyik híres márkáknak van saját Design Systeme? A cikk példaként az Apple Human Interface Guidelines-t, a Google Material 3-at, az IBM Carbon Design-t és az Audi Corporate Identity-jét említi.