A Design System egyre gyakrabban használt eszköz a digitális tervezés világában és ennek számos jó oka van. Ha nem tudod mi az a Design System vagy azt, hogy mikor érdemes használni őket, akkor ebben a cikkben megtalálod a válaszokat.

Mi is az a Design System?

A Design System egy digitális termékhez kapcsolódó összes UI komponenst tartalmazza, melyek egy közös UX stratégia mentén lettek kidolgozva. UX stratégiának nevezzük azt a részletes tervet, amely meghatározza egy termék vízióját és fő céljait, valamint biztosítja, hogy az üzleti igények és a felhasználói szükségletek találkozzanak. Amikor egy Design Systemben új UI elemek (gombok, beviteli mezők, táblázatok, stb…) készülnek egy alkalmazáshoz, azok azonos elvek, színsémák és mintázatok alapján jönnek létre. Ennek köszönhetően az alkalmazás teljes designja konzisztens tud maradni, a fejlesztési idő rövidebb lesz, illetve a felhasználói élmény is javul.

A Design System magába foglalja például a tipográfiát, a színpalettát, a különböző elemek stílusát vagy az alkalmazás ikonkészletét. Joggal mondhatnánk, hogy mindezeket egy jól elkészített brandbook is tartalmazza, hiszen ez alapvetően azzal a céllal készül, hogy a brandhez tartozó színsémákat, betűtípusokat, mintázatokat meghatározza. Egy Design System azonban sokkal több, mint egy brandbook. Elsősorban azáltal, hogy a Design System a brandbookban meghatározott elvek és stílusok alapján kidolgozott UI elemeket tartalmazza, továbbá kitér arra is, hogy azok milyen kontextusban használhatóak és működtethetőek. Ellentétben egy brandbookkal, a Design Systemben elkészített elemekkel már közvetlenül egy fejlesztő is tud dolgozni és át tudja fordítani azokat a saját nyelvére, vagyis a programkódra.

Miért használjunk Design Systemet? – Konzisztencia

A Design Systemeknek két nagy előnye van. Az egyik, hogy a brand-tudatosságot erősítik, mert garantálni képesek, hogy a brand alatt megjelenő egyes UI elemek mindig ugyanúgy fognak kinézni. Ha egy hirdetésre nézünk, amin megjelenik a Telekom magenta színe, nem is feltétlen kell, hogy legyen a hirdetésen telefon, egyből a telekommunikációs vállalatra asszociálunk. A magenta központi eleme a Telekom brandjének, és mivel konzisztensen mindenhol ezt látjuk a Telekom név mellett, a magentát mára már a Telekommal azonosítjuk. Így működik ez egy alkalmazás esetében is, hiszen egy alkalmazás is csak egy felület, ahol brandünk a az ügyfeleinkkel találkozik. 

Ha valaki szeretne erről többet olvasni, sok pszichológiai témájú kutatás készült már a branding kognitív vonatkozásairól. A Design Systemek által biztosított konzisztencia segítségével tehát termékünk, márkánk erősebb és jobban megismerhető lesz.

A konzisztencia persze nem csak a márka miatt fontos. Alkalmazásunk használhatóságát nagymértékben javítja, ha az azonos funkciójú elemek azonos módon működnek, és ugyanúgy néznek ki. A fizikai térben egy kilincset mindenki felismer, mindenki tudja hogy kell használni, és hogy mire való. Nem kis részben azért, mert a legtöbb kilincs szinte ugyanúgy néz ki, működésük pedig szintén, típustól függően megegyezik. Hasonló a helyzet egy alkalmazás esetében, hiszen közelebbről megnézve, ha az egyik oldalon van menüpont, akkor az alkalmazásban ugrálva, egy másik felületen is ugyanott fogjuk keresni, sőt már-már elvárjuk tőle, hogy ugyanolyan szisztéma szerint működjön.

Miért használjunk Design Systemet? – Idő

Van azonban a Design Systemeknek egy másik nagy előnye is. Nevezetesen, hogy jelentősen le tudja rövidíteni a jövőbeli tervezési (és jó esetben a fejlesztési) munkák idejét. Ha ugyanis van egy könyvtárunk arról, hogy az alkalmazásban megtalálható egyes UI elemek pontosan miként működnek, milyen kontextusban kell őket használni, valamint milyen vizuális megjelenítést kaptak, akkor egy új funkció tervezésekor elég levenni a polcról a megfelelő UI elemet. Ilyen csupán apróbb módosításokkal, az adott körülmények által megkívánt elvárásokra kell szabni.

Egy termékmenedzseren múlik, hogy milyen messzire hajlandó elmenni egy Design System implementálása során. Ideális esetben komponensek mellett megtaláljuk azok kódra átfordított, már “kész” verzióját is. Ennek előnye ugyanúgy az, hogy ha új fejlesztési igény merül fel, akkor nem kell minden elemet nulláról lefejleszteni, elég a kész komponensek közül behúzni egyet a projektünkbe. Van olyan, aki ezt, tehát a design és kód együttesét hívja Design Systemnek és magára a designra pedig csak “design pattern”-ként hivatkozik.

​​Mikor ne használjunk Design Systemeket?

Egy Design System elkészítése és karbantartása időt vesz igénybe. Minél nagyobb az alkalmazás, minél több komponensből áll a Design System, annál több időt. Tekinthetünk erre úgy is, mint egy közép- és hosszútávon megtérülő befektetésre. Ha egy kis alkalmazásunk van csak, aminél nem jelent problémát, hogy konzisztens designt készítsünk Design System nélkül is, valószínű nincs értelme több napi, heti akár havi tervezési időt beletenni egy Design System elkészítésébe.

Hasonlóan, ha az alkalmazásunk ugyan komplex és sok komponenst tartalmaz, de nem tervezünk rajta sokáig dolgozni, gyakran egyszerűbb egy-egy képernyőt elkészíteni, mint egy komplett Design Systemet kidolgozni.

Hogyan készül Design System?

Design Systemeket jellemzően Figmában vagy Sketchben szoktunk létrehozni. Természetesen felépíthetjük az egészet mi magunk, de sokszor gyorsabb, valamint célravezetőbb, ha már egy meglévőből indulunk ki (pl. Material). Előbbi inkább akkor jellemző, ha alkalmazásunk olyan specifikus UI komponensekből épül fel, amit várhatóan nem fogunk megtalálni egy standard UI készletben. Az előre elkészített Design Systemeket megvásárolhatjuk online és könnyen testreszabhatóak, így segítségükkel lerövidíthető a Design Systemünk elkészítési ideje.

—–

Ha nincs még tapasztalatod Design System elkészítésében és segítségre van szükséged, akkor bátran keress minket! Segítünk, hogy a lehető legjobb döntéseket tudd meghozni vállalkozásod fejlesztésével kapcsolatban.

Érdekelnek további UX/UI tervezéssel kapcsolatos témák? Akkor maradj velünk a következő, hamarosan érkező blogbejegyzésekért!

Ha érdekelnek más blogbejegyzéseink:

• The Human Mind and Usability: Cognitive Biases
• The Human Mind and Usability: Problem Solving & Decision Making
• How we redesigned our operation successfully in two weeks and what we would suggest
• How to run a specification workshop series with 40 stakeholders?
• Marketing Automation Basics: How to Use it in Your Business
• How to use personal effectively
• Marketing Automation Trends in 2023

Sources:
https://meldrumconsulting.ch/category/innovation/
https://www.divami.com/blog/the-build-or-buy-consideration-in-ux-design
https://lumentanfolyamok.hu/webfejleszto-tanfolyamok/ux-design-figma-tanfolyam
https://www.secretstache.com/blog/ui-design-system/
https://www.toptal.com/designers/ux/design-system