Znáte ten pocit při předání návrhu designu či knihovnu komponent vývojářům a oni pak za vámi od rána do večera chodí nebo vám volají? A vy se nezastavíte nad vysvětlováním, co se má jak udělat? Příčina není ukryta jen ve složitém UI či grafickém návrhu.
Těmi dalšími mohou být např.
V rámci Etnetera Design týmu jsem se proto pustili do zásadních kroků k tomu, abychom tyto problémy na projektech co nejvíce minimalizovali a ušetřili tak práci a čas jak designérům, tak vývojářům.
Čas od času se na internetu objeví nový nástroj na tvorbu grafiky nebo dokumentace. V Etnetera pracujeme už několik let s Figmou. Proč zrovna tento nástroj a ne třeba Sketch?
Naši designéři mají s Figmou několikaleté zkušenosti a práce s ní je tak z jejich strany bezproblémová. Na straně vývojářů tomu už ale tak nemusí být vždy.
V Etnetera jsme se proto zaměřili na interní školení, která mají pomoci vývojářům a designérům k lepší vzájemné spolupráci a pochopení. V rámci prvního ze série workshopů Figma Insight jsme v týmu představili jak stávající funkce Figmy, které vývojáři mohou využít pro usnadnění své práce a udržení kvalitního kódu, tak novinky jako:
V příštím workshopu se už budeme věnovat zpracovávání praktické úlohy ve Figmě a kódu současně.
První Figma Insight workshop nebyl jen prezentací teorie, ale rozběhl i zapálené diskuse.
Právě prostor pro výměnu názorů a diskuze samotná jsou pro vzájemné pochopení mezi světy vývojářů a designérů klíčové.
Díky vzájemným diskuzím je pak možné zpracovat např. kvalitní dokumentaci a sadu pravidel pro práci s layoutem responzivního webu, pravidla použití tlačítek nebo definovat, jaké odsazení se má používat mezi konkrétními prvky.
“Opravdu nestačí navrhnout tlačítko v jeho základním provedení … a kde jsou stavy hover, focus, selected, disabled, popřípadě loading … a to ideálně seskupených do jednoho setu”
Častým problémem, který vyvolává zbytečné “vášně” mezi týmy designérů a vývojářů je právě chybějící dokumentace nebo její nedostatečná kvalita. Kdo ji má udělat? Vývojář nebo designér? Pravda je taková, že oba.
Na středních a větších projektech je potřeba budovat silné zázemí v UI a její dokumentaci, a to ideálně již v rané fázi projektu, kdy je k dispozici první Design koncept.
Budování dokumentace je v rané fázi časově náročnější, ale v relativně krátkém horizontu se tato prvotní investice vrátí díky:
Věřte mi - již během prvních pár týdnů tvorby UI a implementační fáze se investovaný čas do dokumentace UI Kitu či Design Systému vrátí nejen vám, ale i vašim zákazníkům. Ti tak získají kvalitní a dlouhodobě udržitelný produkt.
A vůbec, zapomeňte na PNG či PSD podklady.
“Propojení design týmu a Front-end vývojářů v rané fázi přípravy grafiky výrazně posiluje týmovou soudržnost. Vzájemné porozumění a respekt mezi členy týmu je klíčové pro dosažení úspěšného projektu.”
Prezentace vyvolala vášnivou diskuzi o správném návrhu a správě Design Systémů a formě podkladů. V dalších workshopech se již zaměříme na konkrétní zásadní témata, a to zejména názvosloví a standardizaci prvků napříč platformami iOS/Apple/Web. Podíváme se ale na zoubek také typografii a barvám.
Nedávná prezentace byla pouhým začátkem delší cesty k vzájemné synergii mezi týmy vývojářů a designerů. Jme však přesvědčeni, že právě ta přinese do našich projektů novou úroveň kreativity, efektivity a klientem oceněné kvality.
Prezentaci z prvního workshopu si můžete projít zde (jak jinak než Figma prototypem 😁).