V éře generativního designu a návrhových systémů je již obtížné překvapit zaměstnavatele v rozhovoru se znalostmi HTML a schopností vysázet stránky na Tildě. Weboví designéři musí jít nad rámec své profese a naučit se psát kód, aby mohli mluvit s vývojáři stejným jazykem a vytvářet vysoce kvalitní moderní produkt.
Zeptali jsme se kolegů z různých společností, jaké dovednosti jsou potřebné, abychom drželi krok s vývojem na trhu. O své zkušenosti se podělili odborníci z DD Planet, SberService, Byndyusoft, RussianSoft, Polarr a Usetech.
Dnes, pokud děláte něco po dlouhou dobu, děláte to špatně. V devíti případech z deseti existuje způsob, jak to zjednodušit nebo automatizovat.
Egor Denisov, Senior UX UI Designer ve společnosti Usetech:
„Touha po zjednodušení se odráží ve všech aspektech našeho života – od programování (Python versus Java) až po AI na tržištích.
Když vezmeme v úvahu tento trend z pohledu designu, nejlepší design je, když zcela chybí nebo je neviditelný. Věk jasných a honosných obrázků se šíleným množstvím animací skončil. V posledních letech byli návrháři zodpovědní za generování kódu, automatizaci, optimalizaci a kompetence – to vše probíhá souběžně s vývojem designu. A samozřejmě nezapomeňte na metodiku BEM od společnosti Yandex , která letos dosáhne 15 let. “
Generativní design a AI
Design se neoddělitelně vyvíjí s technologickým pokrokem, takže do grafiky a designu infiltruje umělá inteligence, strojové učení a generativní přístup. Specialisté získávají nové příležitosti pro kreativitu.
Andrey Shapiro, umělecký ředitel společnosti Byndyusoft:
„Objevují se návrhářské zesilovače, nástroje pro společnou tvorbu: Prizma, Artisto a atd. Jejich hlavním úkolem je automatické generování stylově jednotné grafiky, následné zpracování obrázků, uspořádání prvků do harmonické kompozice v důsledku randomizace nebo některých fyzikálních zákonů.
Kromě značkových řešení se vyvíjí také zájem psát vaše vlastní.
Já sám používám v rozložení několik vlastních generátorů vzorů, kreativních rozmetadel částic nebo prvků. Hlavní prostředí pro generování grafiky: Processing, DrawBot, NodeBox. Z těch specifických a blízkých 3D sféře: TouchDesigner, Houdini. “
Alexander Obanin, umělecký ředitel digitálního integrátora DD Planet:
„Možnosti umělé inteligence jsou obrovské, generativní přístup se aktivně rozvíjí .“, zejména ve velkých společnostech a velkých projektech. Rozhraní vstupní stránky lze přestavět v závislosti na preferencích uživatele, který ji otevřel. Například pro studenty použijeme světlé barvy v ikonách aplikací, pro starší publikum použijeme světlé barvy. Můžete upravit schémata písma: pro starší lidi vytvořte velký tisk. Na základě portrétu uživatele můžeme automaticky generovat dynamické nabídky, obrázky pro sekce a sbírky a také testovat, které možnosti se hodí lépe.
Návrhář vytváří interakce mezi strojem a algoritmy a stává se více spolupachatelem kreativity než ukazatelem. Můžete vytvořit mnoho automatických systémů – jeden systém má bannery, druhý dokáže najít shody a nesrovnalosti s cílovým publikem. “
Interaktivní: animace, 3D, video
Vývoj technologií umožňuje oživit i ty nepředstavitelné nápady a mnoho ruských společností takovou rozmanitost aktivně využívá, sleduje nové produkty a testuje jejich schopnosti. Dnes jsou trendy v designu a vývoji animace, interaktivita a responzivní design.
Roman Polishchuk, umělecký ředitel společnosti RussianSoft:
„Otevřete prezentaci jakéhokoli produktu na webu Apple. Při posouvání stránky uvidíte modely moderních gadgetů, jasné a dynamické obrázky, které můžete někdy dokonce otočit a „dotknout se“. V roce 2012 začala většina moderních prohlížečů v té době podporovat značkovací jazyk HTML5 a statické fotografie byly nahrazeny vzrušující a nepředvídatelnou interaktivní show . Od té doby můžete vložit video do iFrames, 3D prvků a zavedený v roce 2011 CSS3 poskytuje nejširší možnosti pro animaci.
V posledních letech vzniklo mnoho knihoven a rámců pro JS a CSS, ale všechny pouze usnadňují práci se základními principy, které byly zavedeny před osmi lety. “
Zvuk
< p> Cílem designu je pokrýt všechny orgány našich smyslů: po přechodu od statických k volumetrickým, prakticky vnímatelným vizuálním formám a interaktivním rozhraním přišel do módy zvukový obsah. Důležitým trendem v moderním designu je proto zaměření na zvuk.
Alexander Obanin, umělecký ředitel digitálního integrátora DD Planet:
„Tady mohu vybrat dvě oblasti, které aktivně rostou a získávají na popularitě: hlasová rozhraní a podcasty .“ Umožňují člověku multitasking, můžete jít autem a poslouchat podcast se zprávami, připravit se na práci a kontrolovat počasí na cestách. Díky jejich vývoji se objevují nové oblasti designu a dokonce i nové profese, například návrhář hlasového rozhraní.
Technologie umožňují vytváření virtuálních osobností – blogerům, kteří budou číst texty, mluvit o zajímavých událostech. Část vaší osobnosti může být již nahrazena digitální: od masek na fotografiích a videích až po generování videoobsahu za vaší účasti. To vše jsou nové příležitosti pro vytváření atraktivních a nekonvenčních webů. “
Je v nejlepším zájmu designéra, aby mohl psát kód?
Ne všichni návrháři chtějí ztrácet čas a ovládat cizí území – moderní služby, které automatizují vytváření obsahu a webů, již mohou programátory z velké části nahradit. Na trhu je stále více takových „asistentů“ a úkoly, které umí provádět, jsou stále obtížnější.
Na druhou stranu existují specialisté na design, kteří se na projektech podílejí rovnocenně s vývojáři, sami píší programy pro úkoly společnosti, přicházejí s jedinečnými algoritmy a domnívají se, že bez nich už to nejde.
Against
Yulia Goleva, hlavní návrhářka ve společnosti SberService:
„Programování je aktuální a žádaná profese jako nikdy předtím, ale na druhé straně v oblasti designu směřuje vše k tomu, aby tvůrci obsahu tuto potřebu co nejvíce eliminovali. Máme schopnost vytvářet jak fungující prototypy s animací, tak připravené webové stránky, vstupní stránky a dokonce i online obchody bez psaní jediného řádku kódu.
Byly doby, kdy jsem se začal učit Java Script, HTML a CSS. Nejprve chci poznamenat, že programování zdaleka není pro lidi tvůrčích profesí, je to pečlivý a velmi logický proces, který neodpouští ani ty nejmenší chyby. Nemohu si pomoct, ale poukázat na to, že v mnoha ohledech je docela zábavné, pokud jste člověk, který rád řeší hádanky. Zadruhé, osobně mi z toho přišla vhod, možná znalost HTML, ale i tak ne v aplikovaném smyslu jsem nikdy nenapsal kód rukama.
Myslím si, že za účelem zlepšení na jejich profesionální úrovni by designér měl věnovat pozornost studiu nových programů. Zvládněte alespoň jednoho tvůrce webových stránek, naučte se animovat vaše rozhraní a prototypy. Nyní se už nemusíte učit programovací jazyky. “
Pro
Andrey Shapiro, uměleckou ředitelku společnosti Byndyusoft:
„Lidé se často ptají, zda designér musí být schopen programovat. Je důležité zde porozumět, pokud se chcete více rozvíjet v estetické části, v grafickém designu nebo v designu a inženýrství. Pokud druhý, pokud jste o UX/UI, pak aniž byste porozuměli technologickým schopnostem, zaprvé budete připraveni o chladné prostředky řešení problémů a zadruhé nebudete schopni odolat argumentům vývojáře, že je něco nemožné nebo obtížně proveditelné. UX je nejčastěji v pozice ochrany lidských zájmů pomocí produktu a vývoj může chránit pozici integrity systému, nákladů na podporu, osobní pohodlí vývojáře (psát kód, protože je to pro mě jednodušší, ne pro uživatele). Někdy je nevyhnutelný konflikt mezi nimi a bez kompetencí v technologiích a dovednostech psaní programů bude designér trochu bezzubý. “
Roman Polishchuk, umělecký ředitel společnosti RussianSoft:
„Kreativní část týmu se často snaží izolovat od technických aspektů, s odkazem na skutečnost, že to není jejich kompetence.“ Ve skutečnosti musí návrhář pochopit složitost front-end vývoje, aby alespoň pocítil hranice, které nelze překročit, a použít moderní řešení, která jeho projekt ozvláštní. Musí se dívat za obrazovku a rozumět tomu, co se s jeho designem děje v každé z následujících fází.
Dobrý designér dnes není jen kreativní a chytrý člověk, který dokáže nakreslit ikonu levým prstem na noze a ohromit uživatele internetu svou schopností vybírat barvy. Jedná se o technicky zdatného člověka, který ví, co dělá, pro koho to dělá a jak se naplní plody jeho fantazie.
Designér je prostě povinen rozumět moderním technologiím, aby maximálně využil potenciál své myšlenky. Jinak buď půjde projekt do výroby již zastaralý, bez použití moderních čipů, nebo designér uslyší od vývojáře dostatek podrobností o tom, co by měl s jeho uspořádáním udělat, a to, o co žádá, ještě nebylo vynalezeno. „>
Jak to používat při práci
Při své každodenní práci designéři používají neuvěřitelně mnoho nástrojů: programovací jazyky, hotové skripty, pluginy atd. Specialisté jsou technici -savvy, porozumět kódu a dokonce ukázat, jak vytvořit design, který podle vývojářů není možné implementovat.
Generátory pro interní podnikové úkoly
Alexander Obanin, umělecký ředitel digitálního integrátora DD Planet:
„V DD Planet designéři provádějí spoustu rutinních úkolů, takže bylo potřeba vytvořit generátory obrázků pro sociální sítě, prezentace a vizitky.
Pro práci s obrázky pro sociální sítě jsme vytvořili generátor ve formě stránky HTML . Specialisté SMM mohou samostatně upravovat text v něm nebo měnit pozadí při zachování jednotnosti stylů a písem.
Prezentace jsou navrženy v generátoru vytvořeném pomocí rámce JavaScriptu PptxGenJS. K sestavení hotového souboru PowerPoint používá JSON.
Pro automatizaci vytváření vizitek jsem vybral dvě knihovny:
- PDF Kit for PDF . Může běžet v Node.js nebo jen v prohlížeči, což bylo dobré.
- EasyQRCodeJS pro QR kódy.
Andrey Shapiro, umělecký ředitel společnosti Byndyusoft:
„Třetina designérů procvičuje programování v designovém obchodě Byndyusoft.“ Hlavní programovací jazyky: R, Python, JavaScript . Oblasti použití: zpracování a vizualizace dat pro vytváření prototypů budoucích aplikací, generování vzorů a opakovaná rozvržení.
Z hotových skriptů znovu použijeme generátory vytvořené v projektu, když potřebujeme vytvořit nový tisíc milionů obrázků, například avatary. Žádné skripty se nepíšou od absolutní nuly, používají prostředí, knihovny pro manipulaci s grafickými prvky grafů (ggplot2, D3.js) a fyzikálních strojů (Box2D) .
U aplikace Sketch, jedné z populárních aplikací pro návrh rozhraní, Napsal jsem a aktivně používám sadu Účinnost pluginů k automatizaci práce s prvky textu a rozvržení. Klávesové zkratky „pověsí“ typografa, měkký dělení slov, ovládání mezer, začátku, řádkování a velikosti písma. Vše pro rychlé ovládání textu z klávesnice. K dispozici je také rozmetadlo prvků pro rozvržení. Pohodlné, když potřebujete rychle vytvořit krásný rozptyl.
Na NodeBox byl vytvořen zcela generativní interaktivní prototyp, který našel způsob, jak zobrazit příspěvky na blogu. Bylo důležité otestovat zobrazení existujícího obsahu v co nejširším rozsahu variací formy v krátké době. Po převzetí dat prototyp zobrazil finální verzi a dal návrháři sadu posuvníků, návrhář je trhl, stránka se okamžitě transformovala, návrhář posoudil, zda je to „lepo“ nebo směšné, a dál trhal posuvníky. Takto se hledal optimální design. “
Rozložení
Katerina Drobina, Senior UX UI Designer ve společnosti Usetech:
„Čas od času, abych vytvořil rozhraní, musím porozumět kódu, například mým aktuálním úkolem je vytvořit rozhraní konstruktoru pro vytvoření datového modelu, v kódu tento model vypadá takto:
{& quot; název & quot;: & quot; Estate & quot ;, & quot; typ & quot;: & quot; záznam & quot;, & quot; doc & quot;: & quot; , „pole“: [{„název“: „uuid“, „typ“: „řetězec“}, „název“ „:„ agent_uuid “,„ typ “:„ řetězec “}, {„ název “:„ akce “,„ typ “ „: [„ null “,„ řetězec “],„ výchozí “: null}, {„ název “:„ typ “, & „typ“: [„null“, „řetězec“], „výchozí“: null}, {„název“: „renovace „“, „typ“: [„null“, „řetězec“], „výchozí“: null}, {„název“: „square“, „type“: [„null“, „int“], „default“: null}, {„name“: „price“, „type“: [„null“, „; int „“], „výchozí“: null}, {„název“: „adresa“, „typ“: „adresa“; }], „indexy“: [„uuid“, „agent_uuid“; ], „vztahy“: [{„„ název “:„ agent “,„ na “:„ Agent “,„ počet “ ;: „one“, „from_fields“: „agent_uuid“, „to_fields“: „uuid“; }]},
Nejčastěji v mé práci interaguji s kódem, když vydávám úpravy front-endového rozložení. Často je mnohem jednodušší dostat se do kódu (inspektor v prohlížeči) a rychle ukázat kolegovi v telefonu, co se mu nelíbí a co udělal špatně. To je mnohem produktivnější než úprava „rozvržení neprováděného podle rozvržení“. Je mnohem rychlejší říci, že zde je dalších 10 pixelů, které kazí obraz. “
Tvorba animací
Egor Denisov, Senior UX UI Designer ve společnosti Usetech:
„Ve své práci používám četné skripty . Například používám vizualizační nápady pomocí kódu na webu Codepen a v případě potřeby je upravím podle svých potřeb. Používám knihovnu pro prvky uživatelského rozhraní se zdroji Kód mé uživatelské rozhraní . V blízké budoucnosti plánuji naučit se Třepetání pro vývoj nativních aplikací a Uzly .
Od roku 2017 používám Lottie (bodymovin) z Airbnb – export animace ve formátu JSON … Lightweight JSON can be used on Android, iOS and React Native. Animace již není třeba kreslit krok za krokem, stačí použít plugin a získat plnohodnotný produkt. Existuje pro to Anima, Duch, Princip. Mimochodem, takových užitečných pluginů každý rok přibývá. Před několika lety jsem plánoval začít psát pluginy sám – neměl jsem čas, ale je to k tomu nejlepšímu. Nyní lze téměř jakýkoli plugin najít na internetu i na Figmě. “
Klady pro kariéru
Snažit se o matematické myšlení a ve své práci uvažovat systematičtěji, rozumět vývojářům, být jim „vlastní“, šetřit čas celému týmu – to vše jsou výhody, které znalost návrhářů otevírá. Růst v očích kolegů a šéfů lze také považovat za příjemný bonus.
Rozvoj myšlení
Egor Denisov, hlavní designér UX UI ve společnosti Usetech:
„Nevím, jak kódovat, ale průběžně sleduji vysílání a prezentace nových řešení a nástrojů, analyzuji nejmodernější produkty konkurence a dívám se na design a balení společnosti produkty z různých úhlů a z různých úhlů. “
Katerina Drobina, Senior UX UI designer ve společnosti Usetech:
„ Programování mi hodně pomohlo přemýšlet mimochodem systematicky, nejen v práci, ale i po celý život.
Ano, neumím programovat, ale dokážu přijít na složitou logiku, systémy, interakce. Mohu vytvořit složitý scénář. “
Porozumění vývojářům
Daniil Vershinin, hlavní vývojář softwaru, Polarr:
„Stojí za zmínku, že takové programovací experimenty obvykle nezvyšují plat designéra, ale zlepšují kvalitu porozumění mezi programátorem a designérem, což teoreticky může ušetřit čas a následně i mzdové náklady za provádění jejich činností.“
Katerina Drobina, Senior UX UI Designer ve společnosti Usetech:
„Znalost základů programování pomáhá komunikovat s kolegy ve stejném jazyce a být jedním cizinců. Obecně se mi nelíbí, když mezi designéry a programátory dojde k nedorozumění nebo, hrůze, válce. Moje znalosti, moje zapojení do problémů front-end kolegů pomáhá budovat přátelskou komunikaci.
Dokážu poslouchat a rozumět důvodům, proč programátoři nemohou tuto myšlenku implementovat, a společně s nimi přijít s řešením, které určitě bude fungovat, a nejen vypadat skvěle na maketách.
Pokud jde o kariéru, ukázalo se, že je to jedna z nejmocnějších dovedností – být na stejné vlnové délce s vývojovým oddělením . Buďte přátelé, kolegové, tým. Rychle jsem vstoupil do týmu, porozuměl úzce zaměřeným vtipům, ponořil se do jejich problémů a pomohl je vyřešit. “
Schopnost vysvětlit a nasměrovat správným směrem
Roman Polishchuk, umělecký ředitel v RussianSoft:
„Toto je odpověď na otázku, co mě před pěti lety vedlo k tomu, abych se vydal na kurz rozvržení.“ Kopy od návrhářů rozvržení a opětovné schválení rozvržení. Vidíte, nemůžeme to udělat. A obviňujete se, nechápete, zda je skutečně nereálné si uvědomit, co požadujete, nebo je návrhář rozvržení zvyklý dělat jednoduché úkoly. A víte, jaké kurzy rozložení mi byly dány? Nyní mohu s jistotou říci: „Můžeš. Chcete, abych vám ukázal jak? „. A je to skvělá zábava!
A také se stane, že od klienta přijde komentář týkající se rozvržení, jako je to ve schváleném rozložení, a nic jiného. Zaoblené oči testera a návrháře rozvržení jasně ukazují, že potřebují pomoc. „
Otevřete rozložení, otevřete rozložení a zkontrolujte jej prostřednictvím konzoly vývojáře. Píšu: „Make here padding-bottom 30px, line-height 15, animation-delay 5s“. Hotovo!
Zlepšení kvality produktu
Alexander Obanin, umělecký ředitel digitálního integrátora DD Planet:
„Zaprvé, znalost schopností kódu pomáhá přijímat složitá rozhodnutí, která zohledňují více parametrů. Můžete vylepšit personalizaci, přesněji přizpůsobit každý prvek rozhraní, dokonce motivovat uživatele k tomu, aby ten či onen úkon provedl jemněji .
Zadruhé, když prozkoumáváte nové příležitosti, přicházíte s nečekanými řešeními a způsoby použití technologie. Rozvíjí mozek a umožňuje vám být kreativní při technickém procesu vytváření webových stránek. “
A co plat?
Andrey Shapiro, umělecký ředitel společnosti Byndyusoft:
„Pokud jde o příležitost ovlivnit váš plat, nevidím takovou přímou souvislost. Jako jste přišli, řekli jste, že víte, jak navrhnout to a to, dokonce i program, a okamžitě vám bude nabídnut vyšší plat. Ne, takto to nefunguje. Ale obvykle lidé se širší kompetencí obecně komunikují lépe a řeší problémy efektivněji … A pokud „táhnete“, pravidelně se elegantně vyrovnáváte s obtížemi, jste flexibilní v myšlení, což se odráží ve výsledku, pak budete samozřejmě stále více oceňováni. “
Jak začněte programovat
Nakonec jsme pro vás shromáždili užitečné tipy a zdroje od praktických specialistů, kteří vám pomohou rozšířit obzory a začít programovat.
Andrey Shapiro, umělecký ředitel Byndyusoft:
„Zdroje jsou neuvěřitelné, ale většina z nich je v angličtině.“ Doporučil bych začít s bezplatnými kurzy na stejné Coursera , pokud mluvíte anglicky, nebo s kurzy na Stepik.org , jedná se o kurzy ruštiny.
< p> Proč s bezplatnými. Nyní je téma informačních technologií velmi přehřáté a k této melodii vzniklo mnoho kurzů ruského jazyka, kde vám bude slíbeno úžasné učení za peníze. Takové kurzy najdete na samostatném webu, krásném „balení“ a příslibech záruk. Vyhnul bych se takovým lidem.
Učí nás pouze skutečná praxe řešení problémů. Mnoho, mnoho hodin cvičení.
A nedoporučuji učit se abstraktně oddělit programování izolovaně od všeho. Je lepší si stanovit jasné úkoly nebo miniprojekty a vzít si vše, co k jejich realizaci chybí. Pak bude existovat jak motivace, tak asimilace. Například nejprve vezměte něčí hotový skript, podívejte se, jak to funguje, podívejte se dovnitř, vydělejte se, vydechněte, vraťte se k tomu znovu, zkuste něco změnit, narazte na nedorozumění některé části – a teprve poté začněte hledat je třeba se učit, motivováno konkrétní potřebou. “
Roman Polishchuk, umělecký ředitel RussianSoft:
„ Nezkoušejte úplně pokrýt programování to nedokážou ani ti nejzarytější matematičtí pitomci. Studujte pouze to, co přímo závisí na implementaci vašich nápadů, zejména front-end vývoj. Naštěstí má YouTube k tomuto tématu obrovské množství materiálů, což bude dobrý začátek. Pokud již pracujete v týmu, často kontrolujte oddělení programátorů.
Komunikujte, zajímejte se o to, jaké metody se používají k implementaci vašich nápadů, pokud se v procesu vyskytnou potíže.
Pokud pracujete na dálku, požádejte vývojáře, aby na obrazovce zaznamenal všechny fáze implementace vašeho návrhu.
Nebude pro něj těžké stisknout tlačítko záznamu a bude pro vás nesmírně užitečné podívat se na kouzlo, které se děje s vašimi rozloženími poté, co jste úspěšně odevzdali své dílo. “
Alexander Obanin, umělecký ředitel digitálního integrátora DD Planet:
„Existuje mnoho užitečných zdrojů, z nichž mohu doporučit The Coding Train, Matthew Epler, Tim Rodenbröker. Užitečné nástroje pro sebe najdete na stránkách:
- Zpracování – knihovna pro práci s obrázky v Javě.
- P5.js je knihovna JS pro kreativní kódování inspirovaná zpracováním.
- ML5.js je knihovna pro strojové učení: vytvořte model a poté jej použijte v JS.
- TensorFlow je učení strojového učení v knihovně v JS.
Pro inspiraci vám doporučuji podívat se na dílo argentinského umělce Manola idea – používá Processing, umělce z New Yorku Joshua Davise a ocení 3D líčení od ines.alpha. „>
Katerina Drobina, Senior UX UI Designer ve společnosti Usetech:
„Zdá se mi, že nyní existuje tolik kurzů, že by existovala jen touha.“ Služba „ Yandex.Practice“ a také Skillbox a Geekbrains mají vynikající kurzy. Ale to vůbec neznamená, že tam musíte hned běžet a absolvovat všechny kurzy.
Na internetu existuje obrovské množství různých informací o bezplatném veřejném přístupu. Nejprve bych doporučil prostudovat si základy rozložení, zkusit vytvořit malou stránku, zjistit, co je adaptivní , ne jen sedět ve Figmě ve vakuu a kreslit správné zaoblené rohy tlačítek.
Skvělým způsobem, jak být designérem a zároveň programátorem, je vytvořit na Tildě kompletní web. Ano, toto je nástroj pro tvorbu webových stránek, ale věřte mi, je tak silný, že když tam vytvoříte moderní web s designem na vysoké úrovni, narazíte také na omezení, o kterých jste dříve nemysleli, a můžete svůj vzory na mobilním zařízení. Takové úkoly vás nutí myslet trochu širší a v našem oboru musíte vždy vědět o souvisejících oblastech. “
