Nejlepší aplikací pro tvorbu UI designu se stává...

Hned na úvod vás zklamu. Podle mě neexistuje jedna nejlepší aplikace. 
Článků, které mají ohledně té „nej“ jasno, je plný internet. V některých se dozvíte, že nejlepší je Sketch, v jiných vychvalují Adobe XD. Můj pohled je takový, že každému vyhovuje něco jiného.

Pepa, který pracuje sám na sebe, si může vybrat Adobe XD, protože hledá aplikaci, která bude skvěle fungovat v rámci balíku Creative Cloud.

V malém vývojářském studiu můžou zvolit Figmu, protože jim stačí koupit licenci pro 2 designéry a ušetří tak hromadu peněz.

A Václav, který byl vždycky trochu střelec, se může rozhodnou zúročit své zkušenosti ve Wordu.

Proto vám nebudu nutit svou oblíbenou aplikaci. Radši vám poradím, jak najít tu, která sedne vám.

Jak najít aplikaci, která mi (nebo nám) sedne

Buďte zvídaví a objevujte. Stáhněte si aplikace, které jste ještě nevyzkoušeli, a zkuste v nich nějakou dobu pracovat. Zapisujte si výhody a nevýhody, a potom vyhodnoťte, která se vám používala nejlépe.

Začněte svoje hledání třeba na Google

Nebojte se objevovat a zkoušet, i když už jste svoji vysněnou aplikaci našli. Nikdy nevíte, kdy se objeví něco lepšího.

Dělejte to, co byste dělali (nebo byste měli dělat) v jakémkoli jiném případě. Buďte zvídaví a objevujte.

A co na to ostatní?

Myslete na to, že v týmu nejste sami. S aplikací přijdou do styku i vaši kolegové vývojáři a manažeři, možná dokonce i klienti. Berte ohled na jejich potřeby.

• Vývojář potřebuje jednoduše zjistit parametry, jako jsou rozměry a barvy.
• Manažer a klient můžou chtít vědět, na jaké části designu se zrovna pracuje.

Cílem je, aby se všem pracovalo dobře a efektivně. Proto je přizvěte k výběrovému procesu a ptejte se jich, co si myslí.

Nezapomeňte si připravit argumenty, proč a jak jednotlivým členům týmu nová aplikace pomůže. Všechno si díky tomu sami ujasníte a ostatní mnohem lépe přesvědčíte.

Cílem je, aby se všem pracovalo dobře a efektivně.

Jak jsme hledali ideální aplikaci v Dactylu

V Dactyl Group vedu kreativní tým a úzce spolupracuji s vývojáři. Proto je mým úkolem i vylepšování našich procesů.

Zkouším a testuju všechno, co se mi dostane pod ruku. Kromě trojice velikánů (Adobe XD, Sketch a Figma) jsem vyzkoušel i InVision Studio a Framer. A po nich i Marvel, Avocode nebo Origami.

A jak se nám která aplikace osvědčila?

Začínáme Photoshopem

Neznám nikoho, kdy by svou cestu UI designerá nezačal prací ve Photoshopu. Jinak to nebylo ani u mě. 

Ve Photoshopu se musíte obejít bez některých vychytávek, ale UI v něm navrhnete.

Photoshop byl první nástroj, ve kterém se v Dactylu dělaly weby a aplikace. Vzpomínám si na časté pády, soubory o velikosti stovek megabajtů a zasekaný počítač. Všechno trvalo a o předávání návrhu vývojářům radši ani nebudu mluvit. Photoshop pro nás prostě nebyl to pravé.

Po Photoshopu přišel Sketch

Zvědavost mě přivedla ke Sketchi. A po prvních hodinách hraní jsem byl nadšený. Možnost vytvářet artboardy, podpora stylů a neskutečná rychlost. Tohle pro mě byly tři hlavní důvody, proč přejít z Photoshopu na Sketch. Přiznám se, že v té době jsem se ostatních ještě neptal na jejich názor. To přišlo až při další velké změně.

Rozdíl oproti Photoshopu je jiné uspořádání prvků a na první pohled méně možností.

Naštěstí se změnou byli spokojení úplně všichni. Designéři mohli pracovat efektivněji. A pro vývojáře jsme Sketch propojili se Zeplinem, díky kterému získali rychlý přístup ke všemu, co potřebovali.

Po nějaké době jsme ale začali narážet na nedostatky Zeplinu a objevili InVision. Ten umožňoval vytvářet interaktivní prototypy a zobrazit strukturu a vrstvy návrhu. 

Bohužel ani InVision nám nevydržel moc dlouho. Kvůli stále se zvyšující komplexitě projektů nás začala limitovat rychlost. A to v takové míře, že jsme se opět začali poohlížet po náhradě.

Figma: Jeden nástroj vládne všem

Ve Sketchi jsme pracovali dlouhé 3 roky. A pak jsem objevil Figmu.
Nejdřív jsem si ji sám pořádně vyzkoušel. Potěšila mě řada funkcí, u kterých jsem doufal, že je Sketch taky jednou dostane. Navíc se mi velmi zalíbilo propojení designerského a vývojářského pohledu, možnost přidávat komentáře a taky to, že celá aplikace funguje v prohlížeči.

Rozhodl jsem se tedy aplikaci představit dalším členům týmu a ukázat jim, že stojí za to.

Nebojím se říct, že všechny 3 aplikace vypadají na první pohled dost podobně. Figma akorát nemá dark mode. :(

Následovalo testování na reálném projektu, díky kterému jsme zjistili některá omezení, ale celkově byl výsledek uspokojivý. Proto jsme se rozhodli změnu udělat.

Ladíme Figmu podle svých potřeb

Se současným řešením jsme spokojení, ale vidíme spoustu možností vylepšení. Díky veřejné Figma API jsme začali tato vylepšení realizovat.

Náš první doplněk nám dovoluje na pár kliknutí vyexportovat styly, textové řetězce pro překlady a ikony pro iOS, Android a web. Díky tomu a díky jednotným komponentám dokážou vývojáři velmi jednoduše nastylovat aplikace a weby a rychle reflektovat změny v grafickém návrhu.

Do budoucna plánujeme přidat podporu importu zpět do Figmy. 
Našim cílem je přesunout správu stylů z Figmy do vlastní aplikace. Díky tomu získáme větší flexibilitu a budeme moct jednoduše aplikovat nadefinovaný styl na komponenty našeho design systému. A to nejenom ve Figmě, ale hlavně přímo v aplikacích a webech.

O našem design systému se brzy dozvíte víc.

Jaký nástroj používáte vy a jaká byla vaše cesta? Dejte mi vědět na našem Facebooku nebo LinkedInu.