Adobe XD pohledem grafika

V nových projektech agentury Lesensky.cz jsem i já chtěl tyto prvky využít, nicméně jsem s nimi narazil na limity Photoshopu, který jsem do té doby sám k webdesignu používal. Photoshop samozřejmě mnoho grafiků bere jako webdesign nástroj první volby, ale přece jen je to platforma určená především pro práci s fotkami. Základní animaci ve Photoshopu prostě neuděláte, vektory nezeditujete a celkově není workflow návrhu webu tak jednoduché.

Tím vůbec nechci říkat, že je Photoshop nejhorší řešení nebo že v něm nic nejde udělat, nicméně ve světě Photoshopu vás o některých webových prvcích nenapadne ani přemýšlet. Zkrátka, program sám mě začal limitovat při vzniku nápadů, poté i v jejich realizaci a prezentaci klientům, a proto jsem začal hledat nové možnosti webdesignu.

Sketch už jsem znal a pečlivě otestoval, ale nějak mě prostě nechytl. Moc se mi nelíbilo vizuální rozhraní a trochu jsem se v něm ztrácel. Víc jsem přemýšlel, jak s ním pracovat, místo toho, abych přemýšlel, co a jak v něm navrhovat. Moje další volba pak padla na Adobe XD.

První meta – Rande naslepo. Zn: Seriously!

Po první instalaci jsem se popravdě v programu ztrácel, přestože s Adobe programy si jinak dost rozumím. Nedal jsem se odradit a s pomocí online návodů a Youtube tutorialů se začal s na první pohled slibným programem zkusmo seznamovat.

Aby testování mělo nějaký smysl a neprotáhlo se syndromem virtuálních projektů do šuplíku, rozhodl jsem se, že v programu rovnou zkusím navrhnout naostro jednu z našich nových agenturních webových zakázek. Tak, abych program vyzkoušel v plné polní, pod taktovkou reálných deadlinů, bez možnosti návratu a odkladů. :)

Druhá meta – Představení programátorovi je jako první pozvání na oběd s rodiči

Ještě před skokem do hlubšího vztahu s XD jsem si pro jistotu udělal rešerši, jak si s ním rozumí programátoři. V Lesensky.cz totiž práce na webech nekončí odevzdáním grafiky programátorovi, který ji „nějak“ nasadí stylem „poradím si sám“. U nás vždy grafik a projektový manažer s programátorem ideálně konzultuje šablony i projektovou dokumentaci dopředu, aby v grafice navrhoval to, co se programátorovi bude dobře kódovat, a aby společně vyřešili případné zádrhely dopředu, ještě před ukázkou klientovi. Programátora si snažíme „hýčkat“, jak strukturovaností dokumentace, tak i dodaných grafických podkladů.

Proč dodávání podkladů s programátorem tak řešíme? Nejen proto, že s Honzou chceme spolupracovat dál a chceme, aby byl spokojený, ale také proto, že ze zkušenosti víme, že špatná projektovka nebo nevhodně odevzdaná data se dříve nebo později vymstí oběma stranám sérií oprav a úprav v grafice i při kódování. Což ve fázi před nasazením webu na server opravdu nechcete. Ve výsledku vás tak počáteční nesoulad v datech stojí nakonec hodně času, nervů i peněz.

Program mě při navrhování nového webu dál bavil a tak jsem si řekl, že je na čase ho uvést do našeho širšího webového týmu. A tak jsem Honzu Polzera oslovil, zda by s námi XD nedal šanci. Začali jsme ho testovat, a to na reálném projektu. První rande programátor-XD-grafik proběhlo sice ostýchavě, ale protáhlo se až do tří do rána, kdy jsme si oba nadšeně psali, co program umí a v čem je jiný než ty ostatní.

Třetí meta – Zásnuby a zářné zítřky

Pak už jsme do toho spadli až po uši. Postupně jsem zjistil, že to, co jsem XD vyčítal jako nelogické prvky nebo chybějící funkce, vlastně program měl, jen bylo třeba jej více poznat a trochu se přizpůsobit jeho mentalitě a vrtochům. Zhruba po měsíci randění s XD jsem Honzovi předal grafická data projektu a čekal, zda tenhle vztah projde zkouškou programátorským ohněm. Prošel, a tak na ničem jiném už teď web nenavrhujeme.

Čím mě program na první pohled oslovil

Práce s programem je velmi rychlá, ve srovnání s Photoshopem je to jak z jiné planety! XD je vektorový editor, takže veškerý export z Ai je jednoduchý, ikonky i vše ostatní se dá krásně editovat. Osobně narážím na pár problémů, které popisuje Honza, ale dá se najít řešení, popřípadě to už XD tým vyřešil. Pravidelné updaty a featury XD dělá jak na běžícím pásu. Je tu i spoustu užitečných pluginů.

Co mě na Adobe XD baví

• Rychlost a celková odezva programu
• Assety pro barvy, písma a symboly
• Celkově symboly – práce s nimi přes artboardy
• Chytrost (zarovnávání bloků, vzdálenosti, …)
• Vektor – krásně ostré i na Macu
• Funkce repeat grid
• Možnost tvorby klikacích prototypů (velmi užitečné pro prezentaci klientům!)
• Aplikace pro mobil – vidíte v reálném čase změny v návrhu pro mobilní stránky
• Programátor nepotřebuje mít zdrojový dokument
• Adobe XD team, support, pravidelný update
• Sdílení prototypů
• Sdílení pro development (programátor krásně vidí prvky na stránce, velikosti, barvy), což snižuje nadměrnou „vysvětlovací“ komunikaci

Co by chtělo doladit

• Funkce barevného překrytí jako u PS + možnosti nastavit režim (Normální, Násobit, …)
• Nejsou verzálky (víme ale, že v květnu už bude update, který by toto měl řešit)
• Pravítka (přijdou také s novým updatem)
• Půlpixely – stává se, že se to musí ručně upravit

Adobe XD je skvělý nástroj, který sice má své mouchy, ale ani to mě nepřinutí jej opustit. Tým XD aktivně řeší problémy a nedostatky a snaží se najít to nejlepší řešení! Minimálně je dobré si program vyzkoušet a dát mu šanci – za jedno rande s ním nic nedáte. Možná naopak získáte nepostradatelného parťáka do týmu.