Lépésről lépésre útmutató a tervezési rendszer létrehozásához

Intro

A bárhol és bárhonnan elérhető korszakban a mindenütt jelenlevőség normává vált. Ugyanakkor az is közismert, hogy a következetesség a hitelesség. A felhasználók ma már tudatosabbak. A gyors és zökkenőmentes élmény alapvető elvárás, függetlenül a felülettől.

Ezenkívül az idő olyan érték, amelyet nem szabad elvesztegetni. Mindezeknek elégnek kell lenniük ahhoz, hogy Önt arra késztessék, hogy többet tegyen weboldalával vagy felületével. Az azonban, hogy a tervezésben 50 különböző komponenssel hiba nélkül próbáljon konzisztens lenni, nagy feladat.

A "Design System"dobpergése azért van itt, hogy megkönnyítse az életét.

Mi az a tervezési rendszer?

A tervezési rendszer olyan egyértelműen dokumentált, újrafelhasználható komponensek kiterjedt archívuma, amelyeket a termékcsapat digitális élmények létrehozásához felhasználhat. Más szóval, tekintse a tervezési rendszereket a vállalat egyetlen igazságforrásának a tervezés tekintetében.

A tervezési rendszer több, mint a stíluskalauzok vagy mintakönyvtárak, folyamatosan fejlődik. A különböző entitásokhoz, köztük a UX-dizájnhoz kapcsolódó irányelvek ökoszisztémája bármely projekt építőelemeinek keretrendszereként használható annak érdekében, hogy az összes komponens konzisztens legyen és illeszkedjen a márkaépítéshez.

A tervezési rendszer hasznos az induló vállalkozások, a növekvő vállalkozások és a nagyvállalatok számára egyaránt, de a termék fejlődése során nélkülözhetetlen, nem tárgyalható eszközzé válik. Pozitívan befolyásolhatja az üzleti célokat, a munkafolyamatokat, a csapatmunkát, a felhasználói élményt és az általános márkaélményt is.

alt_text

Milyen előnyei vannak a tervezési rendszernek?

A rendszertervezés megvalósításának néhány előnye a következő

Növeli a hatékonyságot, miközben csökkenti az időt - Bármely tervezési rendszer elsődleges előnye a tervezési és fejlesztési munka gyors létrehozása és újbóli létrehozása. A csapatok előre elkészített elemek használatával csökkenthetik a kerék állandó újbóli feltalálásának szükségességét, és csökkenthetik a következetlenség kockázatát.
Javítja a vizuális konzisztenciát az oldalakon és csatornákon - Az egész szervezetre kiterjedő tervezési rendszer hiánya következetlen vizuális megjelenéshez, töredezett felhasználói élményhez vagy a márkaépítéstől való elszigetelődéshez vezethet. Egy egységes szabványkészlet emellett segít a nagyobb léptékű újratervezések vagy vizuális átnevezések kezelésében is.
Elősegíti az egységes nyelvezetet - A közös tervezési nyelv csökkenti a tervezési vagy fejlesztési idő elvesztegetésének lehetőségét a funkcionális csapatokon belüli és a funkcionalitáson átívelő csapatok közötti félreértések miatt.
Lehetővé teszi, hogy jobban összpontosítson az összetettebb problémákra - A csapatok jobban meg tudják oldani az olyan összetett problémákat, mint az információk priorizálása, az utazások kezelése stb., ha egyszerű UI-összetevőket hoznak létre és egyértelműek.
Referencia- és oktatási eszközként szolgál a közreműködők számára - A tervezési rendszer zökkenőmentessé teszi a beilleszkedési folyamatot személyi változások esetén. Segít továbbá megkönnyíteni az új egyéni közreműködők számára a UI UX tervezés vagy tartalomkészítés megkezdését.
Hozzájárul egy erős és időtálló márka kialakításához - A designrendszer célja, hogy az általa szállított termékek mögött egy bizonyos identitást és dizájnt kommunikáljon. Segít hatásos márkákat létrehozni, és segíti az embereket abban, hogy emlékezzenek a márkaélményre. Ezáltal az emberek jobban kötődnek egy márkához, és jobban megbíznak benne.

Tízlépéses útmutató a tervezési rendszer kiépítéséhez

Kidolgoztunk egy tízlépcsős folyamatot, amely segít a vállalatának egy tervezési rendszer létrehozásában.

1. Alaposan elemezze a meglévő tervezési folyamatot.

Bármely folyamat megtervezésének és elindításának első lépése, hogy megértsük, hol tartunk jelenleg. Szervezete jelenlegi tervezési folyamatának áttekintése és elemzése segíthet jobban megérteni a márkájához legjobban illeszkedő rendszertervezést. Tegye fel magának a következő kérdéseket:

Mi a szervezetének jelenlegi tervezési megközelítése?
Milyen meglévő eszközöket használ az Ön szervezete?

Győződjön meg róla, hogy értékeli a termékcsapat tervezési érettségi szintjét. Ez segíteni fogja Önt abban, hogy nagyjából hozzáférjen az új rendszer bevezetéséhez szükséges időhöz a szervezetében.

2. Határozza meg a márka ábécéjét

Determine your Brand's Alphabet

A márka ábécéje elvezetne a márkaidentitáshoz, azaz a márka- és termékértékekhez, valamint a márka nyelvezetéhez. A márka nyelve formákból, betűtípusokból, színekből, animációkból, hangból és hangszínből áll.

A tervezők a márka ábécéje által meghatározott vizuális nyelvet alkalmazzák. A márkairányelvek áttekintése és az érdekelt felekkel való beszélgetés segíthet a márka identitásának és nyelvezetének megértésében.

3. A jelenlegi termék AI auditjának elvégzése

A jelenlegi termék UI auditjának elvégzése segít a terméktervezés egyik legnagyobb kihívásának, a dizájn duplikációnak a kezelésében. Az audit két célt szolgál -

Hívja fel a figyelmet a terméken belül a jelentős következetlenségeket mutató területekre.
Ismerje fel a termék leggyakrabban használt és legfontosabb elemeit.

Az UI-ellenőrzés többlépcsős folyamat. A fő felhasználói felület tulajdonságainak és a komponensekben való felhasználásuknak az azonosítása és elemzése alapvető fontosságú. A rendelkezésre álló eszközöket felhasználhatja a stíluslapokban található egyedi színek és betűtípusok számának megtekintéséhez. Ezután tovább bonthat minden webhelytervet egyedi elemekre.

4. A rendszer tervezési elveinek meghatározása

A kiváló felhasználói élmény megteremtéséhez elengedhetetlen, hogy megértsük a tervezési döntések mögött meghúzódó okokat. Ezen túlmenően a világos célok megkönnyítik a tervezési elvek meghatározását és a csapatokkal való koordinációt.

Szeretne egy tervezési rendszerfolyamatot? Kezdje ezekkel a kérdésekkel:

Mit hoz létre
Miért csinálod ezt
Hogyan fogod felépíteni

A tervezési elveknek tükrözniük kell a márka értékeit és jövőképét.

5. Komponenskönyvtár létrehozása

A mintakönyvtárként is ismert mintának tartalmaznia kell a felhasználói felület összes funkcionális és dekoratív elemét. Értékelje az elemeket a projekt, a felhasználói igények és az üzleti célok szerint, és tartsa meg azokat, amelyekre szüksége van.

Build a Component Library

6. Szabályok megállapítása

A tervezőrendszerek nem azért készülnek, hogy a tervezőket egy adott tervezési irányra korlátozzák. Éppen ellenkezőleg, csak arra hivatottak, hogy a tervezőknek és a fejlesztőknek olyan alapvető keretet biztosítsanak, amely kiterjeszti a kreatív irányt és teret enged az innovációnak.

Ezek két megközelítése a Design System szabályainak, ahogyan Alla Kholmatova könyvében is szerepel:

Szigorú szabályok - A tervezők és fejlesztők szigorú folyamatot követnek az új minták vagy komponensek bevezetéséhez.
Laza szabályok - Ezek a szabályok lehetővé teszik a tervezők és fejlesztők számára, hogy szigorú megkötések betartása nélkül alkossanak, ha úgy gondolják, hogy ez jobb tervezést eredményez.

Mint az élet sok más területén, itt is fontos megtalálni a megfelelő egyensúlyt e szabályok között, hogy a termék következetes legyen, ugyanakkor kreatív is.

7. Válassza ki a kormányzási modellt

A dinamikus, folyamatosan fejlődő tervezési rendszerek a változtatások jóváhagyásának és végrehajtásának egyszerű folyamatát igénylik. Az irányításnak három modellje létezik:

Magányos modell - Egy egyén vagy egy csoport közvetlenül "uralja" a tervezési rendszer folyamatát.
Központosított modell - Egy csapat felelős és irányítja a rendszer fejlődését.
Szövetségi modell - Több csoportból több ember vezeti a rendszertervezési folyamatot.

Bár mindegyik modellnek megvannak a maga előnyei és hátrányai, a magányos modell különösen ahhoz vezethet, hogy az egyetlen felelős személy sok feladat végrehajtásának szűk keresztmetszetévé válik. A legjobb megoldás a különböző modellek kombinációjának használata az Ön igényeihez igazodva.

8. Komponensstruktúra meghatározása

A funkcionális komponensek megkettőzése jelentős kihívást jelent a tervezési rendszerekben. Ez rugalmatlan rendszert eredményez, és a tervezőknek (és a fejlesztőknek) minden új forgatókönyv esetén új elemeket kell létrehozniuk.

A sikeres rendszertervek nagymértékben újrafelhasználhatóak, és lehetővé teszik a felhasználók számára, hogy termékeik alapjaként használják őket. Ezért olyan elemek kifejlesztése ajánlott, amelyek különböző tartalmakban újrafelhasználhatók.

Az újrafelhasználható és skálázható komponensek kritériumai:

Moduláris - független komponensek és cserélhető elemek.
Összeállítható - A meglévő komponensek összeolvasztása újak létrehozásához
Testreszabható - Testreszabható komponensek, amelyek számos kontextusban működnek.

9. Biztosítsa, hogy minden csapat egységes nyelvet használjon

A tervezési rendszer célja többek között a zökkenőmentes csapatmunka elősegítése. Ezért a rendszer integrálása a csapatok munkafolyamataiba létfontosságú. Növeli a termelékenységet, miközben értéket nyújt a csapattagok számára.

Ha jobban megérti, hogy a különböző emberek hogyan használják a tervezési rendszert a kezdeti integrációs folyamat során, az segíthet a rendszer megfelelő módosításában.

10. Változások rendszeres továbbítása

A tervezési rendszer folyamata a szervezettel együtt fejlődik, és nem lehet statikus. Ezért a rendszer szervezetbe történő bevezetése után elengedhetetlen, hogy minden változást kommunikáljon, és folyamatosan tájékoztassa a szervezetet.

Egy tömör és jól karbantartott changelog segíthet a felhasználóknak megérteni a különböző frissítéseket és azt, hogy azok hogyan hatnak a munkájukra.

Három példa az induláshoz

Atlassian tervezési rendszer

Atlassian Design System (https://atlassian.design/)

Az Atlassian Design System, egy híres ausztrál vállalati szoftvercég célja, hogy világszerte zökkenőmentes együttműködést biztosítson az agilis, szétszórtan működő csapatok között.

A Trello és a Jira, az Atlassian két széles körben használt együttműködési eszköze teljes mértékben tükrözi a vállalat tervezési filozófiáját. Ez a filozófia a digitális élmény kihasználásáról szól, hogy növelje a csapatok és az egyes csapattagok termelékenységét és általános potenciálját.

Mindezek után az Atlassian Design System agilis technikákat és a projekt minden egyes szakaszának hatékony nyomon követését kínálja a terméktervezéstől a szállításig. Ez végső soron jótékony eredményeket hoz a termékek létrehozásában és szállításában. Tervezési rendszerük főként a következőket tartalmazza:

Tervezési iránymutatások
Márkaszabványok
Termék
Illusztráció
Prototípusok készítése
Marketing
Személyiség

IBM tervezési rendszer

IBM Design System (https://carbondesignsystem.com/migrating/guide/design)

Az IBM kiváló példa egy olyan nagy IT-vállalatra, amely globálisan működik, és saját tervezési rendszert követ.

Képességeik közé tartozik minden, az üzleti tanácsadástól és finanszírozástól kezdve a szoftverkészítésen, IT hostingon/menedzsmenten át a szoftver és hardver összekapcsolására szolgáló megoldásokig.

Az IBM alapelve, hogy a tudomány, az értelem és az intellektus segítségével folyamatosan a fejlődés motorja legyen az emberi társadalom vagy egy márka.

Az IBM szerint a jó dizájn nem csupán szükségszerűség, hanem a felhasználók iránti elkötelezettség is. Íme, néhány a Carbon Design System kiemelkedő funkciói közül, amelyek az Adobe, Axure és Sketch rendszerekkel dolgozó fejlesztők és tervezők számára rengeteg eszközt és forrást biztosítanak:

Adatvizualizáció
Minták
Alkatrészek
Irányelvek
Tutorials

Uber Design System

Uber Design System (https://baseweb.design/)

Mindannyian használtunk már legalább egyszer Ubert. Az amerikai technológiai vállalat a mozgásra épít, beleértve az ételkiszállítást, a fuvarmegosztást, a peer-to-peer fuvarmegosztást és a robogókkal és elektromos kerékpárokkal történő mikro-mobilitást.

Az Ubernek hatékony rendszertervezésre van szüksége ahhoz, hogy az ilyen típusú szolgáltatás hibátlanul működjön minden almárkán, belső márkán, terméken és projekten keresztül.

Az Uber Design System elsődleges jellemzői a következők:

Márkaépítészet
Összetétel
Hangszín
Mozgás
Illusztráció
Fényképezés
Ikonográfia
Színes
Logó
Tipográfia

Tudnivalók az első tervezési rendszer létrehozása előtt

1. A korai, világos kommunikáció az új legjobb barátod

Bonyolult lehet a belső fogyasztók azonnali bevonása. Sőt, a visszajelzéseik akadályozhatják a folyamatot, ha nem egyértelműek, ha túl korán érkeznek az alfa- vagy béta-kiadási ciklusban, vagy ha nem hasznosak.

Mondja el ügyfeleinek, a tervezési rendszer felhasználóinak, hogy mire van szüksége, hogy építő jellegű visszajelzést kapjon. Ha egy korai, kiadás előtti ciklusban van, legyen őszinte és világos, hogy pontosan milyen inputot szeretne. Ez jelzi, hogy a termék legjelentősebb hibáit keresi, és nem a nagy pontosságú kritikákat.

Figyelj a túlgondolkodásra, az elméd elsorvasztására, de ne habozz túlkommunikálni.

2. Nem csak a lépéseidet kell követned.

A fontossági sorrend meghatározásából gyakran hiányzik a tervezési rendszerek használatának nyomon követése. Feltétlenül meg kell érteni, hogy hol, ki, milyen gyakran és milyen gyakorisággal használja a rendszert, valamint a frissítések gyakoriságát.

Ha naponta statisztikai adatokat gyűjtünk arról, hogy mely csapatok pontosan a könyvtár mely verzióit használják, az lehetővé teszi az elfogadás, a frissítés és a visszafejlesztés arányának megértését.

Ha azonosítja a ritkán frissítő csapatokat, megismerheti a frissítést gátló problémákat, és ezt követően orvosolhatja azokat.

3. A visszacsatolási mechanizmusok olyan alulértékeltek, mint Rhaeghal a GOT-ból.

Annak érdekében, hogy a rendszer ne csak értékes legyen a felhasználók számára, hanem olyasvalami is, aminek a részének érzik magukat, és amihez aktívan hozzájárultak, kulcsfontosságú lesz, hogy az emberek számára egyszerű, de egyértelmű módot biztosítson a visszajelzésre (Slack, e-mail stb.) és a rendszerhez való hozzájárulásra.

Mindig adjon utasításokat arra vonatkozóan, hogy hogyan és hol adjon visszajelzést a lehető legtöbb területen, és soha ne feltételezzen semmit, különösen azt ne, hogy a felhasználó a legkézenfekvőbbnek vélt helyen fogja megtalálni.

A tervezési rendszer a szervezetének szükséges északi csillag

A Design System is the North Star Your Organization Needs

Egy sikeres, jól kidolgozott tervezési rendszer a vállalat gerincének részévé válik, ami következetes és megerősített élményeket eredményez. Emellett a tervezők és a fejlesztők lehetőséget kapnak arra, hogy jobban kommunikálják a termék célját, ahelyett, hogy az alapvető építőelemek összerakásánál ragadnának.

Bármely általános szakember lehet az Ön partnere a tervezés megvalósításában, de csak egy tervezési szakember azonosítja az aktuális problémákat, kihívásokat és törekvéseket, hogy kifejezetten az Ön számára tervezési rendszert alakítson ki. Most nincs itt az ideje várni. A tervezési rendszer kialakításának eme átfogó útmutatójával már csak egy kezdeményezés választja el Önt a gyártási folyamat teljes átalakításától.