Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2020-09-030 komment

Mi az a designrendszer? És miért érdemes használni?

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?

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 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.

Designrendszer

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 designok, termékek, élmények létrehozására fenntartva a következetességet. Hosszú távon a költségek csökkentéséhez is hozzájárul, ahogy időt is megspórol, mivel nem kell azonos alkotóelemek létrehozását megtenni, mint termékfejlesztési folyamatban.

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.

A designrendszerek fő előnyei

Designrendszerek segítségével következetes felhasználói élmény alakítható ki, létrehozhatók márkatermékek, skálázható appok, és még sok egyéb.

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.

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.

(A bejegyzés ezen szöveg alapján készült.)

Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.