Webshark Blog

Még ha nem is tudsz róla, designrendszerek mindenütt megtalálhatók a digitális környezetedben. Láthatod az okostelefonodon futó operációs rendszerben, a laptopodon, vagy egyes weboldalakon, melyeket meglátogatsz. De mi is tulajdonképpen egy designrendszer? Miért használjuk őket? (Frissítés, 2021.06.14. – Több ponton is bővítettük a szöveget, így például új fejezetként belekerült, hogy milyen elemekből áll össze egy designrendszer.)

Egy designrendszer nem egy olyan dolog, amit csak a nagy márkák vagy a designügynökségek használnak. Ha csak egy kisebb céged van, akkor is sokat javíthat a munkád, a designod és a termékeid minőségén. De hogyan tudsz integrálni egy desingrendszert a projektjeidbe?

Mi az a designrendszer?

A designrendszer fogalma többféle módon is meghatározható, attól függően, hogy mire és hogyan használjuk. Általában egy keretrendszer, melyet szabványos irányelvek létrehozására használhatsz egy adott projekt vagy termék esetében.

Egy designrendszer olyan szabályok gyűjteménye, mely újrafelhasználható komponensek és sablonok segítségével teszi hatékonyabban kezelhetővé egy weboldal vagy alkalmazás desingját, mivel csökkenti a feleslegesen elvégzett munkát, és létrehoz egy vizuális következetességet a különféle platformokon.

Egy designrendszer azonban nem csak egyszerű stílusmutató, felhasználói felület készlet vagy komponenskönyvtár. Ezeknek inkább egy kombinációja, és még ennél is több.

Vegyük például az Apple App Store-ját. Az Apple szabályokat és iránymutatásokat vezetett be, amelyek meghatározzák, hogyan hozhatnak létre appokat a fejlesztők. Ez a designrendszer felölel mindent attól kezdve, hogy miként tervezd meg a felületét az appodnak, egészen addig, hogyan jelenhet meg az App Store oldalán. Ezáltal tud az Apple következetes alkalmazás-élményt kínálni az App Store-ban.

Ez azonban csak az egyik olyan designrendszer, amit az Apple használ. Valójában a tervezés és a fejlesztés során Te is különféle típusú designrendszereket használhatsz az egyes szakaszokban.

Miért használunk designrendszereket?

A designrendszerek elsődleges célja olyan irányelvek és alkotóelemek létrehozása, melyek újrahasznosítható további tervek, termékek, élmények létrehozására alkalmas, fenntartva a következetességet. Hosszú távon pedig a költségek csökkentéséhez is hozzájárul, hiszen időt is megspórol, mivel nem kell azonos alkotóelemeket létrehozni újra és újra.

• A design és a fejlesztési munka nagyobb léptékben is létrehozható, másolható. A legfontosabb előnye az, hogy gyorsan másolható a design az előre legyártott UI-komponensek és elemek segítségével. A csapatok újra felhasználhatják ugyanazokat az elemeket, így nem kell mindig feltalálniuk a kereket, ráadásul következetes lesz a megjelenés is.
• Lehetővé teszi a nagyobb, összetettebb problémákra figyelést azáltal, hogy csökkenti a csapatra nehezedő terheket. Hiszen az egyes UI elemek már készen vannak és újrahasználhatók, ezért nem kell ezekre újra meg újra erőforrásokat áldozni. Így jut idő a komplexebb problémákra is. Ez különösen akkor fontos, amikor már nagyobb léptékben használjuk a designt.
• Egységes nyelvet alakít ki a csapatok számára. Ami rendkívül hasznos, ha a csapatok és csapattagok földrajzilag eltérő helyeken végzik a munkájukat. Ilyenkor a kommunikáció hatékonyabbá tételével csökkenti az időpazarlást. Például nem kell azon vitatkozni, hogyan működjön és jelenjen meg egy egyszerű lenyíló menü, mivel ez már rögzítve van a designrendszerben.
• Vizuális következetességet hoz létre a termékek, csatornák között. Ez akkor lehet nagyon fontos, ha különböző, egymással egyébként nem kommunikáló csapatok is használják a designt. Ha nincs az egész szervezet számára használható designrendszer, akkor a megjelenés töredezetté, következetlenné válhat. Ráadásul egy-egy redesign esetében mindenhol megjelenik a változás a designrendszer révén.

A designrendszerek fő előnyei

Az előbbiek alapján lássuk akkor a fő előnyöket.

Következetesebb vizuális design

Attól függően, hogy milyen terméket készítesz, egy designrendszer különféle elemekből épül fel. A fő elemei közé tartozik a színek rendszere, a tipográfiai rendszer, a kód-komponsek, a márkaidentitás, a felhasználási irányelvek, stb. Amikor ezeket az elemeket összerakod, akkor létrejön a designrendszer.

Egy alkalmazás esetében például olyan oldalakat, folyamatokat, felhasználói felületeket kell létrehozni, melyek nem csak ugyanabban a stílusban jelennek meg, hanem ugyanazt a felhasználói élményt is kínálják. Egy designrendszer ezt a célt segít elérni.

Jobb felhasználói élmény

Találkoztál már azzal a jelenséggel, hogy egy mobilapp használata után kipróbáltad annak asztali gépes verzióját, és valami egészen más, zavarba ejtő felhasználói élménnyel voltál kénytelen szembesülni? Ha igen, akkor láttad, milyen az, amikor hiányzik a designrendszer.

Ha lennének előre elkészített irányelvek, vizuális elemek és kódkomponensek, akkor összhangban lenne a két alkalmazás. Egy designrendszer segítségével kialakítható a következetesség minden alkalmazás vagy termék esetében. Ez pedig javuló felhasználó élményt eredményez minden platformon.

Könnyebben skálázható termékek

A termékek folyamatosan fejlődnek, változnak. Ez különösen igaz a modern startupok által összehozott termékekre. A design és a felhasználói élmény rendszerint együtt változik ezzel. Egy designrendszer viszont segít a skálázásnál, és úgy módosíthatod a terméked, hogy közben megmarad a következetesség.

Erre jó példa a Spotifynál egy új funkció: a podcastok kiemelése. Az alkalmazás egy redesignon esett át ennek érdekében, ami azonban nem rontja a felhasználói élményt. Ez annak köszönhető, hogy a Spotify egy GLUE elnevezésű design rendszert használ, így ennek keretében tudták elhelyezni a funkciót.

Javítja a csapatod hatékonyságát

Amikor egy hétre előre elkészíted az ételeidet, akkor nincs szükséged arra, hogy minden nap főzz. Ugyanez az helyzet a designrendszereknél is. Amikor van egy kész színrendszered, kódkomponenseid és irányelveid, akkor a csapatnak elegendő a fejlesztésre összpontosítania. Ami aztán egy csomó időt és erőfeszítést megspórol a termékfejlesztésnél. Ezáltal válik hatékonyabbá a csapatod.

Kiszervezheted a fejlesztést a minőség fenntartása mellett

Manapság elég gyakori a fejlesztés egyes elemeinek kiszervezése. Ennek egyik legnehezebb része, hogy fenntartsák a minőséget és kommunikálják a követelményeket a külső csapat felé. A designrendszerek segítenek megosztani az elképzeléseket a külső csapatokkal és fenntartani a már kialakított termék-minőséget a fejlesztés minden fázisában.

Mikor ne használj designrendszert?

Vannak olyan esetek is, amikor nem érdemes belekezdeni egy designrendszer kivitelezésébe.

• Egy designrendszer létrehozása és fenntartása sok időt igényel, melyet egy dedikált csapatnak kellene végeznie. Annál is inkább, mert egy designrendszer kialakítása nem egy egyszeri tevékenység, hanem folyamatosan fejlesztendő, hiszen mindig érkeznek a visszajelzések a designnal kapcsolatban, melyre reagálni kell.
• Időt vesz igénybe, hogy az új embereknek megtanítsd a designrendszer használatát. Még abban az esetben is szükség van erre, ha egy meglévő designrendszer kerül felhasználásra. Enélkül fennáll a lehetősége a következetlen vagy hibás használatnak.
• Lehetnek olyan projektek, melyek állandóak, nem változnak, egyszeri alkotások, melyek nem igényelnek újrahasználható komponenseket. Hogy ez valóban így van, vagy csak ezt gondolják, az nem számít, mert utóbbi esetben nincs egységes koncepció, és törekvés sem a hatékonyság növelésére, így nincs szükség designrendszerre.

A designrendszerek típusai

A designrendszerben szereplő design szó nem csak a grafikus és webdesignra utal, hanem a különféle termékdesignokra és a felhasználói élmény megtervezésére is. Ennek megfelelően eltérő típusai léteznek a designrendszereknek. Három nagyobb csoportot különböztetünk meg, melyeket mostanában gyakran használnak:

• Termék designrendszerek: ezek úgy működnek, mint egy keretrendszer egy termék elkészítéséhez. Ilyen például a Salesforce Lighning Design System, ami alkotóelemek teljes készletét kínálja egy app létrehozásához.
• Márka designrendszerek: ezeket design-irányelvek létrehozásához használják a cégek. Magába foglal olyan alkategóriákat, mint az identitás-design, a vizuális design, a stílusmutató, stb.
• Felhasználói élmény designrendszerek: ha olyan felhasználói élményt szeretnél, ami eredményt hoz, akkor fontos lehet itt is designrendszereket használni. Olyan dolgok tartoznak bele, mint például egy csatorna létrehozása leadgenerálás céljából, hogy a weboldal látogatóiból ügyfelek legyenek.

Egy designrendszer elemei

Egy designrendszer alapvetően két részből áll:

• A design-tár
• A csapat, akik kezelik ezt

A design-tár többféle formában is megjelenhet, de többnyire egy stílus-iránymutatóból, egy komponens-könyvtárból és egy sablon-könyvárból áll.

A stílus-iránymutató

A stílusmutató különféle kivitelezési irányelvek alkalmazását tartalmazza, de szerepelnek benne vizuális hivatkozások, designelvek is, melyek segítségével létrehozhatók felhasználói felületek vagy más designt tartalmazó dolgok.

Leggyakrabban az olyan márka-elemeket tartalmazza, mint a színek, a tipográfia, a logók, a védjegyek, a nyomtatott megjelenés, ugyanakkor érvényes lehet a tartalomra is, a szövegekre, nyelvhasználatra, stílusra.

Komponens-könyvtár

Vagy más néven design-könyvtár, melyet a legtöbb ember magával a designrendszerrel azonosít, hiszen ez tartalmazza az előre elkészített, újrahasználható UI-elemeket, melyekből aztán a designerek és a fejlesztők dolgoznak. Létrehozása elég sok időt és erőforrást igényel. Nem csak példákat tartalmaz, hanem

• a komponens neve – egy egyedi név, hogy elkerüljük a kommunikációs problémákat a designerek és a fejlesztők között.
• Leírás – egy világos magyarázat arról, hogy miről is szól egy adott elem, hogyan használható
• Állapot – a javasolt alapértelmezése és a lehetséges megjelenésbeli változások
• Kódrészletek – az elem tényleges kódrészlete.
• Front-end és backend keretrendszerek a használathoz.

Sablonkönyvtár

Sokszor a komponenskönyvtár és sablonkönyvtár kifejezéseket szinonimaként használják, pedig a kettő között van némi különbség. A komponenskönyvtár az egyes UI-elemeket határozza meg, míg a sablonkönyvtár az UI-elemek bizonyos csoportosításának vagy elrendezésének gyűjteménye. Helyet kapnak benne a tartalmi struktúrák, elrendezések, és a sablonok.

A designrendszer-csapat

Egy designrendszer mindig csak annyira hatékony, amennyire egy csapat azt jól kezeli. Egy designrendszer folyamatos felügyeletet, karbantartást igényel, nem lehet elavult, vagy nem terhelhetik túl ismétlődő, felesleges részek.

A csapat mérete persze változó, hiszen a designrendszerek mérete is az, de legalább egy interakció-tervező, egy vizuális designer és egy fejlesztő tartozik bele. Egyikük kezeli az interakciós irányelveket, a másik a vizuális példákat készíti, míg a harmadik gondoskodik a kódrészletekről és azok alkalmazásáról.

Hogyan alkalmazható egy designrendszer?

Háromféle megoldás létezik designrendszerek használatára:

• egy meglévő rendszer átvétele
• egy meglévő rendszer áthangolása saját igényeinkre
• saját, egyedi designrendszer készítése

Mindegyiknek vannak előnyei és hátrányai, de az elmondható, hogy minél egyedibb egy designrendszer, annál több idő és pénz az elkészítése. Egy meglévő designrendszer átvétele viszonylag költséghatékonynak tekinthető, ugyanakkor egy egyedi rendszerre van szükség, ha olyan egyedi igények merülnek fel, melyet egy meglévő designrendszer nem tud kielégíteni.

Példák designrendszerekre

Ha még mindig nem teljesen világos, mi is az a designrendszer és mire használható, akkor érdemes elővenni néhány példát.

GLUE: a Spotify designrendszere

A Spotify saját designrendszere GLUE néven fut, és egy külön csapat foglalkozik ennek a designrendszernek a javításával és alkalmazásával az alkalmazásdesignnál.

Microsoft: Fluent Design System

A Microsoft Fluent designrendszere biztosítja azt, hogy a Microsoft alkalmazásainak felületei következetesen jelenjenek meg asztali gépeken, Androidon, iOS-en és a webalkalmazásokban.

Shopify: Polaris

A Shopify Polaris deignrendszere különböző kategóriákra van bontva: tartalom, design, komponensek, és élmények.

Google: Material Design

Talán a Material Design az, melynek segítségével a legjobban megfogható bárki számára, hogy miként is működik egy designrendszer. A Material Designról már nálunk is többször volt szó, és néhány éve azért hozta létre a Google, hogy jobb élményt biztosítson az alkalmazásoknál.

Hogyan hozd létre a saját designrendszered?

Talán az előbbiekből is látszik, hogy egy designrendszer létrehozása sok esetben megtérülő befektetés, ha neked is célod a következetes design révén elérhető jobb felhasználó élmény megteremtése a termékeidnél. Szerencsére léteznek olyan alkalmazások és keretrendszerek, melyek segítségével viszonylag egyszerűen létrehozható egy designrendszer. Íme, néhány:

• Invision Design System Manager
• Storybook
• Lightning Design System
• Bootstrap
• UXPin

Amit végül még érdemes megjegyezni, hogy egy designrendszer nem egy olyan dolog, amit létrehozol, aztán magára hagyod. Ezt is folyamatosan javítani kell, párhuzamosan a termékfejlesztéssel. Egy designrendszer befektetés, melynek segítségével fenntarthatod az irányítást és a minőséget.