Солнце. Море. Песок. Наконец то первый отпуск за полтора года. Этой зимой я что-то сильно перегорел. Совершенно неожиданно. В поисках долгожданного развития придумал себе сложности: из обычных статичных макетов перешёл в интерактивное прототипирование. Так и проковырялся в этом Axure всю зиму и полвесны, а потом перегорел и закипел! «Есть же новый навык, новый рычаг, а приложить его некуда...». С такими мыслями я понимал — пора в отпуск. Чем скорее тем лучше. Иначе в моем кабинете потребуется новая мебель, новые мониторы и пучок новых манипуляторов «мышь»… Вместо разбитых, очевидно!

Каюсь, я немного приукрасил. Технику и мебель крушить я не собирался. Я лишь внезапно испытал давно забытое чувство фрустрации. Дизайнерской фрустрации! Представьте себе человека в маленькой организации: задачи решает оперативно, у руководства на хорошем счету, в удалёнку в виде исключения перейти умудрился, загружен всегда процентов на сорок, из кожи вон не лезет. Что ещё такому сотруднику для гармонии и счастья нужно?

В небольшой организации как правило современный инструментарий не требуется. Делаешь свою работу быстро и хорошо? Ну и делай дальше, хоть в Windows Paint. А для гармонии и счастья нужно двигаться вперед, профессионально развиваться, плыть по волнам трендов и инструментов для дизайнеров. И, очевидно, хочется быть на самом гребне волны идущей от западных берегов. Хочется во всю орудовать в Figma, анимировать во Framer, может даже начать React (!) осваивать. Весь мир, казалось бы, уже умеет. А ты ещё нет! И миру есть, где применять эти знания и навыки. А в организации из 5-7 человек это, оказывается, особо и не нужно. Таску быстро отфотошопил, в жиру приаттачил, прогеры подхватили и всего делов. Через пару дней уже на тесте. Через неделю на продакшне. Даже и дизайн спецификации давать не нужно: сами все уже знают. Сработались за последние годы.

А мир-то тем временем двигается дальше. И вот во всю набирают обороты микроитерации, интегрируются дизайн-системы, дизайнеры творят один прототип сообща прямо в браузере и так далее. А ты все сидишь и быстро закрываешь таски очередными макетиками. Потому что в небольшом офисе и так всё работает как часы…

А тут ещё западный информационный дизайнерский фон на мозги капает. Дриббл, беханс, аплабс и так далее. Не умеешь делать макеты в трендовых гайдах? Не умеешь собирать шрифтовые пары? Или не применяешь сине-фиолетовые градиенты? А может у тебя нет мака со Скетчем? Потому как без него ты сегодня уже не дизайнер, а завтра ты уже позади рынка. Ужас сколько всего сейчас должен мониторить, читать и исследовать дизайнер чтобы завтра не отправиться с вещами на выход. К кандидатам растут требования изо дня в день. Конкуренцию никто не отменял. Индусы постоянно пытаются добавиться к тебе в linkedin и готовы работать, казалось бы, за три банки консервированных бобов. Причем отнюдь не с худшим чем у тебя результатом.

Западный клиент уже не хочет psd/jpg на выходе. Он уже говорит: «Нет нет, ну что вы, нам нужны исходники в Sketch». Раз — и отвалился сразу. Реальная история. Швед, через Dribbble вышел на меня кстати, хотя я со своими новыми навыками делать интерактивные прототипы там так и «не выстрелил».
Только спустя месяц или два я прочитаю статью создателя топовой студии дизайна Ueno, где он откровенно скажет «поезд ушел: времена выстреливать на Dribbble прошли несколько лет назад».

Теперь расскажу о тех самых интерактивных прототипах, которые неистово взбудоражили мой разум. Естественно, как всякий современный дизайнер я некоторое время назад выкинул Фотошоп и отправился на поиски продвинутого инструмента, дабы не отставать. И вот я уже во всю разбираюсь в Axure. Ну не покупать же мак ради одной программы. В нем и JS функции, и переменные, и возможности анимирования, и css события, и немного «кодинга без кодинга». Да много чего есть. Вот он шаг развития на лицо — теперь можно не просто картинками таски закрывать, а прямо код отдавать. Разрабы получают и дизайн, и стили, и практически верстку. Жаль кривоват код, но валиден. Делаешь дизайн в «Акшуре» и видишь результат сразу в браузере. Отбросил тень от объекта — она сразу посредством CSS отобразилась, а отступы между ними сразу с учётом DOM элементов рассчитываешь. Мечта! Хлопнув себя ладонью по лбу, подумал: «И почему эта муха не ужалила меня раньше...»

Есть ли в таком переходе развитие, которое я так хочу постичь? Смотря с какой стороны взглянуть: внутри небольшой организации разрабы тебе скажут: «Точно лучше стало!». Мол и отступы считать проще сразу из машинного кода и стили можно копипастить, а не с пипеткой по стайлгайдам лазить. Однако в большой корпорации девелопер справедливо скажет «Сам этот ералаш разгребай. Sketch файл мне давай, переверстать проще. Или psd на худой конец».

Итак, с другой стороны большие корпорации. У них все сложнее. Могут возникнуть проблемы интеграции. Если инфраструктуры для поддержки дизайн-системы нет, то и нет смысла начинать.
Или нет такого количества продуктов, которые надо объединить таким современным способом. Кстати, крутую дизайн-систему сделать — это почти достижение. Со своим стилем, своей логикой анимации, правилами и так далее. И обязательно кейс запилить, и непременно на Medium. Чтобы «знали наших»! И «Акшура» бы это потянула, потому как на выходе не картинки, а код.

Но иметь такое желание — это одно. А иметь опыт внедрения — уже совсем другое. Нет опыта или нет пространства для такого маневра? Значит сиди и делай сам себе интерактив: непрошенные дизайны, вымышленные кейсы, эффектную анимацию и т.п… На этом и перегорел видимо. Прототипируешь выдуманные концепты, лайки собираешь в дизайнерских сообществах, кто-то даже скачивает этот кривой валидный код. Но реальные проблемы не решаются. Особенно собственные. Например, куда дальше двигаться дизайнеру с этими новыми знаниями… Как понять, что ты сделал верную ставку на инструмент?

Но есть ещё и третья сторона — это фриланс. Если ты хорошо устроился на рабочем месте, щелкаешь все таски как семечки, да и вообще на хорошем счету у начальника, то предположим, что никто не будет против. Особенно, если в небольшой организации нет столько задач, чтобы тебя загрузить на 100%. И вот каким-то образом к тебе приходит твой личный клиент со своей проблемой.

Клиента берем мелкого, средний уйдет в студию, а у крупных подобные задачи решаются в штате. Ты быстро вникаешь в суть проблемы заказчика и уже украдкой чувствуешь своё преимущество. Почему? Потому что вау-фактор обеспечен: вместо картинок теперь заказчику можно сразу «почти продакшн» продемонстрировать. Ещё и с интерактивом. И откроет он его сразу в браузере. Он и мышкой может поводить, может и кнопки/ссылки покликать прямо в прототипе. Главное заявить вовремя «Такие дизайн-разработки сейчас в тренде!» Любой ценой надо зарабатывать себе очки. А то «соскочит» еще к Пете, который хоть и показывает статичные картинки, но делает это в Sketch'e. Ещё и градиенты фиолетово-оранжевые лихо использует, а значит — он «круче». А самое главное — Петя отдает абсолютно понятные исходники. Да, у «Акшуры» слабых мест хватает: на выходе либо png, либо смутный html/css/js код, либо собственный исходник в виде rp-файла. Последний разумеется использовать по существу могут лишь 2,37% всех потенциальных клиентов. Можно смело вычеркивать такой вариант.

Итак, вроде бы вырисовывается некоторое преимущество: отдаем клиенту high fidelity прототип в полном «фарше» — все онховерится, кликается, двигается и тп. Однозначно эффективнее чем статичные макеты. Sketch почти позади! Но возникает вопрос: что дальше клиенту с этим делать? Клиент не крупный, от силы в штате 2-3 девелопера, которых предварительно лучше спросить — «Эй ребза, страшный код возьмёте в дело?».
Страшный, потому что если инспектировать содержимое, обнаруживается ужасное ассорти из лишних div'ов внутри span'ов, к которым ещё и непонятные стили привязаны. Особенно странно это видеть, учитывая что Axure все стили складывает во внешние файлы. Но и не брезгает оставить много непонятного css-мусора внутри html'ок.

Я пожалуй немного фатализирую, у меня на практике почти все разрабы говорили «давай сюда что есть, раз больше нечего». Зато потом за ними приберать не нужно — все отступы, стили, цвета и размерности шрифтов в идеале. Идите сюда — обниму вас! Правда каким путем они кривой код привели в валидный — остаётся лишь догадываться.

Теперь «так себе» сценарий — скажут разрабы, что исходники нужны. Ну привыкли так работать. В конечном итоге это я фрилансю с ними, значит я и подстраиваться должен. Исходники Акшура им погоды не сделают, а Фотошоп после него ой как открывать страшно и мерзко.

Да, все это больше про десктопные интерфейсы, с мобайлом в Акшуре всё так себе. Нет, безусловно можно натянуть 8dp сетку в рабочем лейауте и начать с максимальных разрешений. Даже недавно импорт svg корректный подоспел (ну наконец-то) в весеннем апдейте. Затем уже ужимать макет под разрешения поменьше. Куча лишних телодвижений и смута на выходе: несколько версий всех экранов и опять же html, кроме которого отдать больше нечего. И что с этим делать мобильному разработчику? Сплошная боль, к которой если производитель инструмента не придумает панацею — потеряет часть рынка.

Вернусь теперь к интерактиву. Анимацию базовую в Акшуре делать на самом деле приемлемо, как бы не ругали. Просто немного кондово и не так как в других инструментах. Но как применять результат на практике — пока совершенно непонятно. Повторюсь: внутри небольшой фирмы это априори никому не нужно. Ну есть некоторая ставка на тренд анимации в интерфейсах, но «ведь у нас и так все работает» ответит наш девелопер. А анимировать интерфейс это оказалось очень увлекательно и где-то даже необходимо. Создаёшь себе в воображении свои собственные правила взаимодействия динамичных объектов и следуешь этим правилам, когда прототипируешь. Получается, если это не создаёт хаоса, то общее впечатление от будущего продукта точно становится не хуже. А если ещё понимать как анимация улучшает юзабилити продукта, становится вдвойне интереснее. И вот ты уже гордо бьешь себя кулаком в грудь, утверждая, что ты interaction designer. Интересно, много АйТи рекрутеров знают о такой профессии? А ещё есть product designer, mobile designer, creative designer и это не весь список кем можно оказаться. Особенно актуально это на западе, где ты четко должен позиционироваться как словом так и делом.

И вот возникает главная проблема: ты крут и умеешь делать интерактивные интерфейсы. Можно открыть твой труд в браузере и погрузиться в увлекательное взаимодействие. Но что происходит на самом деле? Ты просто ещё больше часов проводишь над каждым таском. В Фотошопе было все просто — раз два и готово. А теперь ты сам себе придумал работу: интерактивные прототипы делать. Отнюдь не факт, что за эту красивую комбинацию слов твоя рыночная стоимость возрастает. Ведь на твоём текущем рабочем месте особой нужды в этом нет. Чисто твоя инициатива, молодец, тимуровец!

Вот вы про Framer слышали? Там и удобно, и мобайл фёрст, и современно, и… изволь уже немного покодить. Иначе никаких эффектов и анимации не сделать. Судя по тому как часто на рынке стали выстреливать новые дизайнерские инструменты, кодить для дизайнеров скоро будет is a must. Интересно получается, если бы меня тянуло кодить стал бы я дизайнером? На двух стульях усидеть сложно. Ты хорош либо в дизайне, либо в кодинге. Я уже вижу возмущение некоторых читателей. Только не говорите мне что сейчас дизайнер должен знать html / css / js. Я украдкой верю, что если разрабы Акшура сделают наконец экспорт кода чистым и валидным, то верстальщикам пора начать беспокоиться о своём будущем.

В любом случае я закончу слог об инструментах так: если каждый год (а со временем и чаще) будет выстреливать новый дизайн-инструмент и надо будет мигрировать, чтобы не отставать, то мне становится не по себе. На обучение придется тратить больше времени, чем на решение задач.

А может в большую корпорацию махнуть? Там всем этим новым знаниям был бы и спрос, и применение, и вознаграждение достойное. Я почти всю сознательную карьеру был сам себе дизайнером. Решал задачи клиентов, как считал нужным, а потом аргументировал — почему лучше так, а не иначе. Каково это вообще, когда несколько крутых графических спецов объединяют усилия над решением одной задачи? Кто знает? Кто пробовал? Я всегда понимал: teamplay — это круто и эффективно!

Кстати, предложения рассматриваю, вакансии мониторю и держу руку на пульсе. Все они, поверьте, скучные. Рекрутеры работают однобоко, в специфике профессии никто не разбирается. Ну не способен рекрутер средней руки хорошего дизайнера интерфейсов от плохого отличить. Или понять сверхценность навыков конкретного спеца по графике и правильно представить руководству. Это чтобы ты завтра уже на собеседовании не на бесполезные этапы время тратил, а общался сразу с будущим руководителем. Ты бы понял, что он в адеквате, а ему возможно стало бы ясно — ты тот, кого он искал! Все везде одинаково. IBM так и отвалились недавно, когда я высказал свои пожелания на первый этап собеседования. Спасибо, кстати, что избавили меня от возможного сложного решения.

С западными хедхантерами аналогичная картина. Все действуют под копирку, строго по регламенту. Ты тратишь свою энергию и нервы на серию телефонных собеседований и доходишь уже до руководства отдела. А потом выясняется, что твоё портфолио даже никто не посмотрел. Между прочим, это самое первое с чего должно начинаться интервьюирование любого специалиста по графике. Вообще вариант с релокацией я оставил по одной простой причине: жизнь и работа в Европе строго по регламенту. Самореализоваться проактивному дизайнеру интерфейсов, который способен смотреть на проблемы под разными углами в таких условиях вряд ли удастся.

Мне жаль огорчать тебя, читатель. В этом посте не будет никаких решений. Я лишь призываю тебя остановиться прямо сейчас и поразмышлять — куда ты хочешь двигаться дальше? Особенно ты, дизайнер. Если вообще хочешь двигаться. Ведь можно и дальше быстро закрывать таски в жире «прямо из Фотошопа». Но если однажды придется сменить место работы, то в новом месте уже надо будет соответствовать…

Полезные материалы по теме:

• ?RU: 10 причин отказаться от Sketch и перейти на Figma — vc.ru/p/stop-using-sketch
• ?EN: You Are Going to Switch to Figma — medium.com/@tomjohndesign/you-are-going-to-switch-to-figma-351dc05c9a33
• ?EN: Designing the all-new Framer — blog.framer.com/designing-the-all-new-framer-eec13aaa2b53