Je realistické, aby designér „mluvil“ vývojovým jazykem, a co je nejdůležitější – proč?

Jmenuji se Seryozha Popov. Vyvíjím více než deset let, řídím front-end produkci „League A.“ a talent management na HTML Academy. Vidím dva vzájemně propojené problémy: návrháři nerozumí technické stránce a vývojáři nerozumí principům designu, a to jim brání. Proto jsem zahájil intenzivní základy vývoje pro designéry, aby mohli sami sestavovat stránky, vytvářet interaktivní prvky nebo alespoň rozumět logice programování. Upozornění na spoilera: nemusíte být technický, vstupní prahová hodnota je nulová a můžete ji dodržet za měsíc.

Návrhář a vývojář – jin a jang

Pokud existuje jasná hranice mezi těmito dvěma procesy – návrháři i vývojáři řeší pouze své vlastní problémy – nastává nedorozumění. Návrhář například dělá mechanické chyby: sloučí do jedné vrstvy veškerou grafiku, kterou bude vývojář samostatně potřebovat, nebo použije režimy prolnutí, které na webu nefungují dobře.

Existují také koncepční chyby. Když designér navrhuje něco, co je nemožné nebo obtížné udělat. Mohou to být složité animace nebo spousta grafiky, díky nimž se stránka bude načítat pomalu.

Vývojáři v TK často čtou: „Při rolování letí tento prvek vpravo, tento nalevo.“ Dělají to tak, jak je to napsáno, a pak to začíná „tady je to nutné trochu rychleji, tady – pomaleji, tady – plynuleji“. Čím více je zřejmá interaktivita (kalkulačky, složité posuvníky), tím vyšší je pravděpodobnost záměny. Například návrhář vytvořil dva bloky vedle sebe – jeden obsahuje odkazy, druhý obsahuje obrázky. A potřebujete, aby si při stisknutí vyměnili místa. Moje reakce: „Co?! Nikdy jsem si nemyslel, že to tak může být. “

Důvodem pro takové situace je nedorozumění toho, jak je vývoj postaven, jaká jsou pravidla, omezení, technologie. Například na začátku vývojáři odhadují projekt na 100–120 hodin a ve fázi návrhu dostanou 200 hodin. Zoufale se snaží zapadnout do zástrčky a samozřejmě nemají čas, například na optimalizaci webu. Výsledkem je, že projekt je vykreslen skvěle, ale není moc dobře sestavený.

Návrhář má zhruba představu o tom, jak vše funguje ve vývoji, a právě v tomto příkladu je problém. Například plně nerozumí, co je kreativita vývoje, nerozumí jeho cyklům, průměrné době trvání implementace funkce. A proto nemůže adekvátně a nestranně kontaktovat „jinou planetu“, aby mohl mluvit o vydáních, synchronizovat, nastavit přenos rozvržení, pohovořit s vývojáři a vytvořit pro ně designový systém (nejen pro sebe nebo pro klienta). Proto se termíny prodlužují – proces se zhroutí. To je špatné a neprofesionální.

Max Avdeev zakladatel designového studia MAX

Zároveň má každý jeden cíl – přinést na trh kvalitní produkt. K tomu je důležité jednat jako celek, to znamená vzájemně si rozumět. Například vývojář se musí podílet na přípravě technické specifikace a na výkresu prototypu a designu. Bude schopen eliminovat nerealizovatelná řešení, což ušetří čas a úsilí. Návrhář také lépe sleduje projekt. Pokud se z produktu úplně vypne, vývojář udělá vše podle svého uvážení.

Nemluvím o myšlence, že designéři se musí stát vývojáři. Ne. Je však důležité porozumět zásadám a umět dělat jednoduché věci rukama.

Podle mého názoru, aby byl produkt holistický a cool, musí všichni účastníci neustále komunikovat a diskutovat o svých řešeních. Výsledek práce tedy předčí prostý součet jejich odbornosti a promění se ve skutečnou synergii. Uživateli je jedno, jakou krásu designér vytvořil v rozvržení, pokud vidí ve výrobě nižší kvalitu.

Dobrá komunikace s vývojem je pro mě jedním z hygienických základů kvalitního designu produktu. Je důležité, aby návrháři byli otevřeni zpětné vazbě. Moje zkušenosti ukazují, že vývojové otázky jsou častěji jen pokusem o lepší pochopení logiky a zásad, podle nichž návrháři rozhodují, a nikoli přímou kritikou, jak se na první pohled může zdát.

Aby si designér a vývojář navzájem lépe rozuměli, musí být schopni mluvit stejným jazykem. Mnoho návrhářů na trhu již tuto příležitost vidělo a před pár lety se začali učit programování. Také jsem si všiml tohoto trendu a v roce 2016 jsem šel studovat na Moskevskou kódovací školu. Mimochodem, vývojáři se také stali častými hosty kurzů základů designu a vizuálního vnímání rozhraní. Po kurzu jsme s MCS vytvořili společný projekt – vysvětlující základy designu pro manažery a vývojáře, kteří chtějí lépe porozumět tématu a navázat komunikaci s designéry z jejich týmů.

Alexandra Ermolenko

vedoucí týmu designových služeb skupiny Mail.ru

Můžete se naučit kód

Pokusím se rozptýlit hlavní obavy, které vidím mezi návrháři, když řeknou „kód“.

Strach # 1 . To vyžaduje technické myšlení. Všichni programátoři od tří let sestavovali mikroprocesory.

Realita … Vývojáři nejsou tak dlouho komplikovaní, jak se zdá. V HTML Academy často k našim front-endovým vývojářům nepřicházejí technici, ale lidé z jiných oborů, kteří pak dostanou práci v dávkách. Pokud potřebujete porozumět algoritmům, je důležité přeskočit nad určitou úroveň technický sklad, ale to platí pro odborníky, kteří jsou v front-endu více než pět let.

Strach č. 2. Musíte zvládnout komplexní sadu nástrojů front-end: systém pro správu verzí, textové editory, stavitele, automatizaci atd.

Realita … Když lidé řeknou „návrhář se potřebuje naučit kód,“ nejde o nasazení projektů, práci s konzolou nebo strukturou souborů nebo nastavení serveru. Například intenzivně používáme Webflow – nástroj pro tvorbu webových stránek bez kódu. Zbavuje se všech nástrojů frontendu díky šablonám. Návrhář může vytvářet drátové rámy stránek, publikovat projekty pomocí jednoho tlačítka, připojovat služby třetích stran a další. A když zná kód, může jej integrovat do připravených stránek a přizpůsobit si web: vytvářet posuvníky, galerie, animace, akordeon, online platby.

I přes postupné stírání hranic odborných znalostí mezi všemi členy produktového týmu se domnívám, že role a odpovědnosti by měly být jasně přiřazeny. Dodatečné znalosti programování nebo designu by měly členům týmu pomáhat v klíčových úkolech, nikoli je odvádět. Proto nevěřím, že dobrý produktový designér musí být schopen programovat na profesionální úrovni.

Odborníka určuje nejen jeho kompetence, ale také to, jak se zajímá o to, co dělá, a jak je připraven převzít odpovědnost za celkový výsledek. S takovou pozicí budou aplikovány potřebné znalosti.

Alexandra Ermolenko vedoucí týmu designových služeb skupiny Mail.ru

Učím tři jazyky, na nichž je vývoj webových stránek založen:

• HTML je značkovací jazyk.

• CSS je šablona stylů.

• JavaScript je programovací jazyk. Existuje vrstva JS, která interaguje s rozhraními a je snadno srozumitelná.

Není nutné zacházet do složitosti každého z nich. Chcete-li zvládnout základní interakci jazyků, porozumět jejich schopnostem a sestavit jednotlivé komponenty sami, stačí měsíc nebo jeden a půl. Například máte úkol vytvořit galerii nebo posuvník, ale Webflow ji ve výchozím nastavení nemá. Místo kladení nebo zavolání vývojáře můžete napsat svůj vlastní kód a vložit jej do platformy.

Dobře, naučíte se kódovat. K čemu?

Výhody se mohou lišit.

• Kariérní růst. Vím o příkladu, kdy designéři poté, co zvládli kód, přešli do jiné společnosti na vedoucí pozici a postavili tam proces od nuly. Můžete také získat povýšení v rámci společnosti. Manažer vidí: designér chápe technickou stránku, považuje svou práci za součást velkého procesu a nenabízí nerealizovatelná řešení. Komunikace s vývojáři se zlepšuje, tým pracuje efektivněji a přináší společnosti více peněz.

• Poptávka na trhu. Návrhář, který dokáže sestavit jednoduché věci nebo provádět jednoduché úpravy kódu nezávisle, stává se univerzálním specialistou na tento druh úkolu. Navíc šetří čas a náklady pro zákazníka.

• Vytvářejte rozvržení, která mohou vývojáři implementovat. Není třeba ztrácet čas hádáním a diskusemi.

• Házení prototypů pomocí kódu. V některých společnostech návrháři a vývojáři spolupracují na vytváření návrhových systémů a jejich překladu do kódu. Když je úkolem sestavit novou sekci nebo widget, může sám návrhář kódovat prototyp, který vývojáři poté vyladí.

• Přizpůsobení webu, dokonce i na konstruktor. Všechny rámce bez kódu nevyhnutelně sestávají ze standardních prvků a základního stylu. Návrhář, který rozumí tomu, jak napsat frontend, může do šablony snadno přidat své vlastní kouzlo, vytvořit od nuly komponentu, která není v základní knihovně. To znamená uvolnit na trh produkty, které nevypadají jako designéři, ale jsou sestaveny bez zapojení vývojářů.

Když víte, co vývoj v zásadě může, pak se hranice rozšíří. Například tato animace může být provedena pomocí kódu a není vykreslena v After. A už můžete přijít se složitějšími technickými příběhy a jít na novou profesionální úroveň. Ruce jsou rozvázané, klienti se zbláznili a pomysleli si/řekli: „Jak na to přišel?!“ Opětovné použití (nečerpejte v projektu například žádný facebookový zdroj, ale propojujte řešení z krabice) atd ad infinitum. V kódu nejsou žádné hranice. A spojení lineárního a kreativního myšlení je vzácným nálezem.

A dál! Bezohlední vývojáři nemohou oklamat návrháře, který kód zná. Stačí říct: „Ale používejte klíčové snímky, proč jste, tady je odkaz na stackoverflow nebo codepen, vylepšil jsem to tam, podívejte se, všechno funguje, všechno je skutečné.“ Šach mat! Můžete si k tomu dát kávu 🙂

Max Avdeev zakladatel designového studia MAX

Nemysli si, že se snažím problém vyřešit jednostranně. Návrháři, kteří hrají v kódu, budou každý rok na trhu stále více žádaní. Vývojáři rozhraní se ale také musí naučit rozumět základním principům návrhu, přecházet do UX atd. Společně vytváříme produkty a uvádíme je na trh. Pojďme tedy utíkat, nebudeme se hádat.