Poznejte 3 UI nástroje na tvorbu designu

Čím dál víc firem se začíná dívat na aplikace (i software) očima koncových zákazníků. Aby si designéři usnadnili práci, vznikla v posledních letech spousta zajímavých editorů, které pomáhají přiblížit finální výsledek grafické práce. Pojďme se podívat na 3 z nich, se kterými v PROFICIU rádi pracujeme.

1. Sketch

Sketch se řadí mezi starší programy. Doba jde rychle dopředu, a tak už v některých funkcích zaostává. Rozhodně ale v jeho společnosti strávilo mnoho designérů notnou dávku času. Jeho rozhraní se velmi podobá zjednodušené formě Adobe Illustratoru. 

V čem vám skvěle poslouží? 

Hravě v něm zvládnete jednoduchou úpravu vektorových souborůprototypování aplikací v libovolném formátu. Při větších projektech tu rozhodně uvítáte perfektní práci s komponenty a tvorbu jejich knihoven. 

Má ale také své limity

V PROFICIU se kromě ilustrací zaměřujeme hodně i na animace. S těmi vám Sketch moc nepomůže. Zcela v něm chybí tzv. hover animace“, pomocí kterých můžete klientovi představit animaci nejrůznějších tlačítek, odkazů a dalších interaktivních prvků.

Sketch rozjedete jen na Macu a donedávna navíc neměl ani vlastní cloudové řešení a v podstatě parazitoval na InVisionu pomocí jejich pluginu. Pokud se snažíte, můžete ve Sketchi odvézt 100% práci. Po vyzkoušení se nám zdá práce s ním ale zbytečně zdlouhavá a neefektivní. 

Sketch a jeho perfektní práce s komponenty, cokoliv můžete nahradit čímkoliv

2. Adobe XD

První verze XD byla představena na konferenci Adobe MAX v roce 2015 a troufáme si tvrdit, že se jedná o nejrychleji se rozvíjející program z portfolia Adobe. Několikrát prošel velmi výraznými změnami – z hledání oblíbených funkcí by se pak dala klidně udělat bojovka. Pokud ale pracujete pravidelně s Illustratorem nebo Photoshopem, nic vás až tak nepřekvapí.

Jaké jsou jeho hlavní výhody?

Pro ty, co jsou zvyklí pracovat s programy Adobe, bude jejich vzájemná kompatibilita pomyslnými body navíc. Za zmínku ale stojí i skvěle zpracované cloudové řešení. Nejen, že poměrně jednoduše doručíme klientovi prototyp projektu, můžeme také poslat velmi podrobnou definici všech komponentů společně s exportem potřebných podkladů. Vývojáři šli dokonce tak daleko, že v tomto exportu najdeme i tabulku CSS stylů.

Nic není dokonalé

I když se nám s Adobe XD pracuje poměrně dobře, jedná se o výrazně složitější program než Sketch. Je tedy třeba obrnit se trpělivostí, zkoušet a učit se. Zaujala nás například funkce kooperace s týmem, kdy může na jednom projektu pracovat více lidí v reálném čase. Po chvíli jsme ale zjistili, že je poměrně špatně optimalizovaná, a tak se prakticky nedá využít.

Rozhraní Adobe XD a jeho práce se symboly

3. InVision Studio

Již fungující cloud InVision představil také ambiciózní projekt Studio“. Momentálně se nachází v beta verzi a tomu odpovídá i jeho technický stav. Už na první pohled jde ale vidět, že to vývojáři myslí opravdu vážně a pomalu se na trhu rodí další velký hráč.

V čem bude jeho konkurenční výhoda?

Hlavní plus vidíme v ukládání projektů. Cloud InVision je na trhu už několik let a umožňuje při tvorbě prototypů prakticky to samé jako Sketch. Samotné Studio jde ještě o několik kroků dál a přináší spoustu zajímavých a originální řešení. Jedním z nich je například časová osa při tvorbě animací.

Timeline byste asi u takových programů nečekali

Zadarmo ani kuře nehrabe

U každého ze zmíněných programů najdete několik možností, jak jej používat. Adobe XD je součástí předplatného Creative cloud. Pokud by vás zajímal samotný program, bude vás to stát 12 € měsíčně. Existuje i verze zdarma – ta je však omezená pouze na 1 prototyp s unikátním odkazem.

Jestli vás zaujal Sketch, můžete si zvolit ze 2 možností. Buď zaplatíte 99 $ a program bude navždy váš, nebo si ho předplatíte za 69 $ ročně a získáte tak všechny dostupné aktualizace na dané období. InVision Studio je zdarma – utratíte pouze za cloud. Cena se odvíjí od množství projektů. Jeden máte zdarma, za 3 dáte 15 $ měsíčně a neomezené předplatné vás vyjde na 25 $ za měsíc.  

Vítězem v nabídce možností pro animace se stává… 

Jak už bylo řečeno, ve Sketchi toho moc nevymyslíte. Pokud vám stačí klasické překlikávání, asi budete spokojení. My ale animace používáme ve větším měřítku, takže nám tento program bohužel nestačí. Adobe XD přidalo po poslední aktualizaci tzv. states“ pro jednotlivé komponenty. Díky tomu můžete snadno vytvořit dynamický a interaktivní obsah, aniž byste museli používat více objektů.

Pomyslnou medaili od nás ale získává InVision a jejich Studio, které navíc přidalo časovou osu. Animace tak můžete daleko lépe upravovat, což jsme ocenili hlavně u tvorby přechodů a mobilních aplikací. 

A jak je to s exportem? 

Jako každý grafický program umí i tyto klasický export do formátů .jpg, .png, .svg a další. Nejlépe je na tom podle nás Sketch, kde můžete pohodlně exportovat prakticky cokoliv.

V Adobe XD jde zase vytvořit odkaz s kompletním náhledem prototypu pro klienta a přidat i soubor pro vývojáře, odkud si bez problému stáhne ikonky, obrázky a další. To stejně jde i u programu InVision. Finální náhled zde není sice tak interaktivní, dá se v něm ale vracet ke starším verzím a ostatní spolupracovníci vám do něj mohou vkládat poznámky.

Za zmínku určitě stojí i plugin Craft, pomocí kterého dostanete do cloudu InVision projekt ze Sketche a nabízí toho mnohem víc. 

Zaměřte se na to, co děláte nejčastěji

Každému při práci vyhovuje něco jiného. Všechny 3 programy mají něco do sebe a u všech jistě přijdete na úžasné vychytávky, ale i nedostatky. Pracujete-li na jednodušších ilustracích, oceníte určitě přehledný Sketch. Pro menší webové projekty skvěle poslouží Adobe XD. Pro velké projekty, na kterých spolupracuje více oborů (UX, grafik, vývojář), je za nás nejvhodnější kombinace Sketche a InVision cloudu. Do budoucna se určitě těšíme na další posun InVision Studia.

A co vy? Podělte se s námi o vaše nejoblíbenější UI programy a jejich výhody. 


Radek Micheller

Já nic, já grafik.