Designový systém je sada komponent, pravidel a nástrojů, bez nichž je prakticky nemožné vyvíjet velké a složité produkty. Tyto přístupy umožňují návrhářům navrhnout rozhraní bez vytváření základních komponent od nuly, zmatek ve stylech zmizí a pro vývojáře je snazší přijímat hotová rozvržení do práce.
Hlavní věc je, proč potřebujete systematizovat design ve velkém produktu – aby si od vydání do vydání všechny designové prvky zachovaly stejný vzhled a význam. Řešení se stává konzistentním a tým nemusí spouštět nové rozhraní vykreslováním tlačítek. V systému pro dospělé jsou všechny základní prvky již připraveny a vy se můžete okamžitě zabývat obchodními úkoly.
Tým musí mít jeden zdroj znalostí o všech komponentách návrhu a správné pochopení toho, jak fungují. Jinak budou mít sousední sekce jinou logiku pro práci s dokumenty, tlačítka „Další“ se začnou přesouvat z rohu do rohu. To je nejen neuklizené, ale také velmi škodlivé pro použitelnost – uživatel bude muset znovu a znovu učit, jak pracovat s rozhraním.
Bez konstrukčního systému bude pro tým obtížné dosáhnout stálých dodávek vydání – příliš mnoho bude muset být znovu vytvořeno, vylepšeno a odsouhlaseno. Design bude překážkou pro celý tým a bude mít významný dopad na Time-to-Market.
Jinými slovy, profesionální produktový tým dříve než později vytvoří svůj návrhový systém. Úspěchy mnoha velkých společností lze také vidět na veřejnosti.
Čím designový systém začíná
Prvním krokem k vědomé správě návrhu je sada UI, knihovna s klíčovými prvky návrhu. Je tu vše od nejmenších ikon po celé skupiny objektů, které jsou v rozhraní použity společně (například masivní tvary, karta klienta nebo obrazovka fotoaparátu pro fotografování dokumentů).
Tato knihovna formuluje jednotná pravidla pro návrháře, vývojáře a všechny ostatní účastníky prací na produktu. Kromě samotných komponent obsahuje sada uživatelského rozhraní také pravidla pro jejich použití – jak se tlačítka chovají v různých scénářích, jak rozevírací nabídky interagují s ovládacím panelem, jak zobrazovat oznámení, zprávy, potvrzení akcí a jaký text by měl být v nich.
Pokud nemáte sadu UI, pak s každou novou iterací projektu a s každým novým návrhářem se objeví nové prvky – stejné ve smyslu, jiné v logice. Sada UI snižuje nepřehlednost komponent u velkých projektů a pomáhá návrhářům dodržovat pravidla, která sami formulují.
Zde je například část sady uživatelského rozhraní pro jeden z našich produktů. Zde jsou shromážděny barvy s přiřazenými proměnnými, které usnadňují jejich použití v kódu, seznamy písem, odsazení, tlačítka, ikony se všemi typy vznášení.
Interakce s vývojovým týmem
Samotná sada uživatelského rozhraní ušetří návrhářům mnoho zbytečných úkolů. Existuje jediný zdroj pravdy pro správné opětovné použití součástí. Aby však systém fungoval, potřebuje tým mechanismus, který návrh předá vývojářům. Nejen technicky, ale i slovy – designéři musí vysvětlit, proč jsou určité prvky potřeba, jaká logika se za nimi skrývá a k jakým účelům slouží z pohledu uživatele. Není to jednosměrná cesta-kompetentní vývojáři front-endu mohou často přijít také se skvělými řešeními.
V True Engineering se tvorba návrhu provádí ve třech hlavních krocích:
- Designéři kreslí předběžná rozvržení, řetězové obrazovky podle skriptu.
- Rozvržení jsou prodiskutována s analytiky, editory UX, zástupci zákazníků a dalšími zúčastněnými stranami.
- Když jsou zohledněny všechny komentáře a komentáře , rozložení se odesílají do vývoje.
Během posledních let jsme vyvinuli sadu nástrojů, které používáme na každém kroku. Prototypy jsou kresleny v Sketch, je vhodné diskutovat o obrazovkách a scénářích s analytiky v Miro a vývojáři jsou zvyklí používat Zeplin. Každá z těchto služeb odvádí vynikající práci se svými úkoly, ale vyvstává zjevný problém – materiály je třeba aktualizovat souběžně ve třech prostorech.
Ne všechny zdroje jsou však vhodné pro spolupráci. A v poslední době máme stále častěji potřebu dostat se do souboru pro několik lidí současně a společně tam něco změnit. Stále více našich produktů dosahuje takové fáze vývoje, kdy se na práci podílejí specialisté z několika zákaznických oddělení a v rámci True Engineering se na tomto procesu může podílet několik designérů, specialistů na UX a editorů. Současně v každém okamžiku potřebujeme relevantní data a není čas ani chuť přenášet rozvržení mezi platformami.
Proto v poslední době přecházíme na Figma – platformu, která kombinuje téměř vše, co ke spolupráci na rozvržení potřebujeme. Zde můžete intenzivně pracovat na materiálech, současně provádět mnoho úprav, odesílat rozložení zákazníkovi a přijímat od něj komentáře. A podporovat celé návrhové systémy.
Závěr
V našem portfoliu máme produkty s dlouhou historií, takže než přejdeme na novou platformu, musíme zjistit, jak tam všechny nahromaděné materiály přenést. Jinak zmizí hlavní výhoda designového systému – jediný zdroj dat a centralizovaná aktualizace prvků. Nyní tedy „balíme kufry“ a okamžitě spouštíme všechny nové projekty ve Figmě.
