Технодизайн: как умение писать код влияет на профессию

DD Planet
Источник: vc.ru

В эпоху генеративного дизайна и дизайн-систем уже трудно удивить работодателя на собеседовании знанием HTML и умением сверстать сайт на Tilda. Веб-дизайнерам приходится выходить за рамки своей профессии и учиться писать код, чтобы говорить на одном языке с разработчиками и создавать качественный современный продукт. Мы спросили у коллег из разных компаний, какие навыки необходимы, чтобы успевать за развитием рынка. Своим опытом поделились специалисты из DD Planet, «СберСервиса», Byndyusoft, «РашенСофт», Polarr и Usetech.

Технологические тренды в дизайне

Цифровизация — уже сама по себе важнейший тренд в сфере дизайна, и внутри него ярче всего выделяются несколько направлений: автоматизация рутины и стремление упростить процессы, генеративный подход и внедрение искусственного интеллекта, развитие интерактивных и звуковых форматов.

Автоматизация и упрощение процессов

Дизайн становится все более нацеленным на быстрое получение результата без потери качества, поэтому многие компании автоматизируют повседневные задачи и процессы.

Даниил Вершинин, старший разработчик программных продуктов компании Polarr:

«Цифровизация ускоряет дизайн-процессы в компаниях: итерации проходят быстрее, а дизайнеры пользуются средствами прототипирования со встроенной обратной связью, чтобы прийти к качественному финальному результату».

Юлия Голева, ведущий дизайнер в «СберСервис»:

«Даже такое, казалось бы, творческое направление, как дизайн, стремится автоматизировать многие рутинные задачи. Если, скажем, лет десять назад 3D-визуализация была чем-то невероятно сложным, то сейчас появилось множество достаточно простых редакторов, которые с легкостью позволяют решить базовые задачи».

Сегодня если вы что-то делаете долго, значит, вы делаете это неправильно. В девяти случаях из десяти есть способ это упростить или автоматизировать.

Егор Денисов, Senior UX\UI в компании Usetech:

«Стремление к упрощению отражается во всех аспектах нашей жизни — от программирования (Python по сравнению с Java) до ИИ в маркетплейсах.

Если рассматривать этот тренд с позиции дизайна, считается, что лучший дизайн — это когда его совсем нет или он незаметен. Век ярких и кричащих картинок с бешеным количеством анимации закончен. На плечи дизайнеров в последние годы ложатся и генерация кода, и автоматизация, и оптимизация, и компетентность — все это идет параллельно с развитием дизайна. И, конечно же, не стоит забывать про методологию БЭМ от Яндекса, которой в этом году исполнится 15 лет».

Генеративный дизайн и AI

Дизайн развивается в неразрывной связке с технологическим прогрессом, поэтому искусственный интеллект, машинное обучение и генеративный подход проникают в графику и проектирование. Специалисты же получают новые возможности для творчества.

Андрей Шапиро, арт-директор в Byndyusoft:

«Появляются усилители дизайнера, инструменты сотворчества: Prizma, Artisto и т. д. Их основные задачи — автоматическая генерация единообразной по стилю графики, постобработка изображений, расстановка элементов в гармоничную композицию за счет рандомизации или каких-то физических законов.

Кроме брендированных решений развивается интерес к написанию собственных.

Сам я пользуюсь несколькими самописными генераторами паттернов, творческими разбрасывателями частиц или элементов в макете. Основные среды для генерации графики: Processing, DrawBot, NodeBox. Из специфичных и близких для сферы 3D: TouchDesigner, Houdini».

Александр Обанин, арт-директор digital-интегратора DD Planet:

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

Дизайнер создает взаимодействия между машиной и алгоритмами, становится больше соучастником творчества, чем указателем. Можно создавать множество автоматических систем — одна система придумывает баннеры, вторая система может находить соответствия и несоответствия целевым аудиториям».

Интерактив: анимация, 3D, видео

Развитие технологий позволяет воплощать в жизнь самые невообразимые задумки, и многие российские компании активно пользуются таким разнообразием, следят за новинками и тестируют их возможности. Сегодня тренды в дизайне и разработке — это анимация, интерактивность, отзывчивый дизайн.

Роман Полищук, арт-директор в ООО «РашенСофт»:

«Откройте презентацию любого продукта на сайте Apple. По мере прокрутки страницы на вас то и дело будут выезжать модели современных гаджетов, яркие, динамичные образы, которые иногда даже можно покрутить и „пощупать”. В далеком 2012-м большинство современных на тот момент браузеров стали поддерживать язык разметки HTML5, и статические фотографии сменились на захватывающее и непредсказуемое интерактивное шоу. С тех пор можно внедрять видео в iFrame, 3D-элементы, а устоявшийся в 2011 году CSS3 предоставляет широчайшие возможности для анимации.

В последние годы появилось множество библиотек и фреймворков для JS и CSS, но все они лишь облегчают работу с базовыми принципами, которые устоялись восемь лет назад».

Звук

Дизайн стремится охватить все органы наших чувств: следом за уходом от статики к объемным, практически ощутимым визуальным формам и интерактивным интерфейсам, в моду вошел звуковой контент. Поэтому важный тренд в современном дизайне — фокус на звуке.

Александр Обанин, арт-директор digital-интегратора DD Planet:

«Здесь могу выделить два направления, которые активно растут и набирают популярность: голосовые интерфейсы и подкасты. Они позволяют человеку быть многозадачным, можно ехать на авто и слушать подкаст с новостями, собираться на работу и на ходу узнать погоду. Благодаря их развитию появляются новые области в дизайне и даже новые профессии, например, voice interface designer.

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

В интересах ли дизайнера уметь писать код?

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

C другой стороны, есть специалисты по дизайну, которые участвуют в проектах наравне с разработчиками, сами пишут программы под задачи компании, придумывают уникальные алгоритмы и считают, что без этого уже невозможно обойтись.

Против

Юлия Голева, ведущий дизайнер в «СберСервис»:

«Программирование — как никогда актуальная и востребованная профессия, но, с другой стороны, именно в сфере дизайна все движется к тому, чтобы максимально избавить от этой необходимости создателей контента. У нас есть возможность создавать как работающие прототипы с анимацией, так и готовые сайты, лендинги и даже интернет-магазины, не написав ни одной строчки кода.

Был момент, когда я начала изучать Java Script, HTML и CSS. Во-первых, хочу отметить, что программирование — занятие далеко не для людей творческих профессий, это кропотливый и очень логически выстроенный процесс, который не прощает даже малейших ошибок. Хотя не могу не отметить, что во многом это довольно увлекательно, если вы человек, который любит решать головоломки. Во-вторых, лично мне пригодилось из этого ну разве что знание HTML, но и то не в прикладном смысле, руками я никогда не писала код.

Я считаю, что для повышения своего профессионального уровня дизайнеру стоит обратить внимание на изучение новых программ. Освоить хотя бы один конструктор сайтов, научиться анимировать свои интерфейсы и прототипы. Теперь для всего этого нет необходимости учить языки программирования».

За

Андрей Шапиро, арт-директор в Byndyusoft:

«Часто спрашивают нужно ли дизайнеру уметь программировать. Здесь важно понять, вы хотите развиваться больше в эстетическую часть, в графический дизайн, или в проектирование и инженерию. Если второе, если вы про UX/UI, то без понимания технологических возможностей, во-первых, будете обделены в классных средствах решения задач, во-вторых, не сможете противостоять аргументам разработчика о том, что что-то невозможно или трудно исполнимо. UX чаще всего в позиции защиты интересов человека, использующего продукт, а разработка может защищать позиции системной целостности, стоимости поддержки, личного удобства разработчика (писать код, как проще мне, а не пользователю). Между ними порой неизбежен конфликт, и без компетенций в технологиях и навыках написания программ дизайнер будет чуть-чуть беззубым».

Роман Полищук, арт-директор в ООО «РашенСофт»:

«Часто творческая часть команды пытается оградить себя от технических аспектов, ссылаясь на то, что это не их компетенция. На самом деле, дизайнер должен разбираться в тонкостях фронтенд-разработки, чтобы как минимум чувствовать рамки, за которые выходить нельзя, и использовать современные решения, которые сделают его проект особенным. Он должен заглянуть за ширму и понять, что происходит с его дизайном на каждом из последующих этапов.

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

Дизайнер просто обязан понимать современные технологии, чтобы по максимуму раскрыть потенциал своей задумки. В противном случае либо проект выйдет в продакшн уже устаревшим, без использования современных фишек, либо дизайнер наслушается от разработчика подробностей о том, что ему следует сделать со своими макетами, а то, что он просит сделать, — еще не изобрели».

Как это использовать в работе

В своей повседневной работе дизайнеры применяют поразительно много инструментов: языки программирования, готовые скрипты, плагины и т. д. Специалисты технически подкованы, разбираются в коде и даже могут показать, как сделать дизайн, который, по мнению разработчиков, реализовать невозможно.

Генераторы для внутрикорпоративных задач

Александр Обанин, арт-директор digital-интегратора DD Planet:

«В DD Planet дизайнеры выполняют много рутинных задач, поэтому была необходимость создать генераторы картинок для соцсетей, презентаций и визиток.

Для работы с картинками для соцсетей сделали генератор в виде HTML-страницы. SMM-специалисты самостоятельно могут править в нем текст или менять фон, сохраняя единообразие стилей и шрифтов.

Презентации собираются в генераторе, созданном с помощью JavaScript-фреймворка PptxGenJS. Он с помощью JSON собирает готовый PowerPoint-файл.

Чтобы автоматизировать создание визиток, я выбрал две библиотеки:

• PDF Kit для PDF. Может работать в рамках Node.js или просто в браузере, это и был подходящий вариант.

• EasyQRCodeJS для QR кодов».

Прототипирование приложений

Даниил Вершинин, старший разработчик программных продуктов компании Polarr:

«Наши дизайнеры используют минимум программирования для реализации интерактивности — это доступно в Figma прямо из коробки. Однако один из наших дизайнеров решил пойти дальше и выучить язык программирования Swift и SwiftUI для создания прототипов приложений для iOS таким образом, чтобы нашим программистам было легче их внедрять в приложение. Он всегда хотел совмещать работу с дизайном и программирование, а релиз SwiftUI от Apple был отличным подспорьем. Изучив руководства от компании Apple на официальном веб-сайте SwiftUI, он бросился в бой и быстро начал клепать компоненты с помощью Swift, который для целей прототипирования дизайна оказался достаточно простым и понятным. Кроме того, это позволило лучше понимать специфику работы программистов: делать дизайн таким, каким его ожидает увидеть программист. Это очевидный плюс и экономия времени для двух сторон дела».

Андрей Шапиро, арт-директор в Byndyusoft:

«В дизайн-цехе Byndyusoft программирование практикует треть дизайнеров. Основные языки программирования: R, Python, JavaScript. Сферы применения: обработка и визуализация данных для прототипирования будущих приложений, генерация паттернов и повторяющихся лейаутов.

Из готовых скриптов мы повторно используем генераторы, созданные на проекте, когда нужно наплодить новую тысячу-миллион изображений, например, аватарок. Никакие скрипты не пишутся с абсолютного нуля, они используют среды, библиотеки для манипуляции графическими элементами графиков (ggplot2, D3.js) и физические движки (Box2D).

Для Sketch App, одного из популярных приложений проектирования интерфейсов, я написал и активно использую набор плагинов Efficiency, чтобы автоматизировать работу с текстом и элементами макета. На горячих клавишах „висят“ типограф, расстановщик мягких переносов, управление разрядкой, интерлиньяжем, межстрочным расстоянием и кеглем. Все для того, чтобы максимально быстро управлять текстом с клавиатуры. Там же есть разбрасыватель элементов по макету. Удобно, когда нужно быстро сделать красивую россыпь.

На NodeBox создавался целиком генеративный интерактивный прототип для поиска способа отображения блог-постов. Важно было за короткое время опробовать отображение уже имеющегося контента в максимально широком диапазоне вариаций формы. Взяв данные, прототип выводил итоговый вариант и давал дизайнеру набор ползунков, дизайнер их дергал, страница мгновенно преобразовывалась, дизайнер судил „лепо“ это или нелепо и продолжал дергать ползунки. Так подыскивался оптимальный дизайн».

Верстка

Дробина Катерина, Senior UX\UI дизайнер компания Usetech:

Время от времени для создания интерфейса мне необходимо разобраться в коде, например, моя текущая задача — сделать интерфейс конструктора для создания модели данных, в коде эта модель выглядит так:

{      
    	"name": "Estate", 
    	"type": "record", 
    	"doc": "Estate from ad", 
    	"fields": [ 
        	{"name": "uuid", "type": "string"}, 
        	{"name": "agent_uuid", "type": "string"}, 
        	{"name": "action", "type": ["null", "string"], "default": null}, 
        	{"name": "type", "type": ["null", "string"], "default": null}, 
        	{"name": "renovation", "type": ["null", "string"], "default": null}, 
        	{"name": "square", "type": ["null", "int"], "default": null}, 
        	{"name": "price", "type": ["null", "int"], "default": null}, 
        	{"name": "address", "type": "Address"} 
    	], 
    	"indexes": [ 
        	"uuid", 
        	"agent_uuid" 
    	], 
    	"relations": [ 
            { "name": "agent", "to": "Agent", "count": "one", "from_fields": "agent_uuid", "to_fields": "uuid" } 
        ] 
	}, 

Чаще всего в работе я взаимодействую с кодом, когда выдаю правки по верстке фронтенду. Зачастую намного легче залезть в код (инспектор в браузере) и на созвоне быстро показать коллеге, что не нравится и что он сделал не так. Это намного продуктивнее, чем правка „верстка сделана не по макету“. Куда быстрее сказать, что вот здесь лишние 10 пикселей, которые сильно портят картину.

Создание анимации

Егор Денисов, Senior UX\UI в компании Usetech:

«В своей работе я использую многочисленные скрипты. Например, беру идеи визуализации с помощью кода на сайте Codepen и по необходимости корректирую под свои нужды. Использую библиотеку по UI-элементам с исходниками Code my UI. В ближайшее время планирую изучить Flutter для разработки нативных приложений и Nodes.

С 2017 года использую Lottie (bodymovin) от Airbnb — экспорт анимации в формате JSON. Легкие по весу JSON можно использовать на Android, iOS и React Native. Анимации уже не нужно отрисовывать пошагово, можно просто воспользоваться плагином и получить полноценный продукт. Для этого есть Anima, Spirit, Principle. Кстати, таких полезных плагинов с каждым годом становится все больше. Несколько лет назад я планировал самостоятельно заняться написанием плагинов — не успел, но это и к лучшему. Сейчас практически любой плагин можно найти на просторах интернета, а также в Figma».

Плюсы для карьеры

Примерять математический склад ума и мыслить системнее в своем творчестве, понимать разработчиков, быть для них «своим», экономить время всей команды, — все это преимущества, которые открывает дизайнерам знание кода. Приятным бонусом можно также считать рост в глазах коллег и начальства.

Развитие мышления

Егор Денисов, Senior UX\UI в компании Usetech:

«Кодить я не умею, но на постоянной основе смотрю трансляции и презентации новых решений и инструментов, анализирую самые современные продукты конкурентов, чтобы посмотреть на дизайн и упаковку продуктов компании с разных сторон и под разными углами».

Катерина Дробина, Senior UX\UI дизайнер компания Usetech:

«Программирование мне очень помогло мыслить системно, кстати, не только в работе, но и по жизни.

Да, я не умею классно программировать, но я могу разобраться в сложной логике, системах, взаимодействиях. Я могу построить сложный сценарий».

Взаимопонимание с разработчиками

Даниил Вершинин, старший разработчик программных продуктов компании Polarr:

«Стоит отметить, что подобные эксперименты в области программирования обычно не увеличивают зарплату дизайнера, однако улучшают качество взаимопонимания между программистом и дизайнером, что теоретически может сэкономить время, а следовательно и трудозатраты на выполнение своей деятельности».

Катерина Дробина, Senior UX\UI дизайнер компания Usetech:

«Знание основ программирования помогает общаться с коллегами на одном языке и быть своей среди чужих. Вообще, мне не нравится, когда есть недопонимание или, о ужас, война между дизайнерами и программистами. Мои знания, моя вовлеченность в проблемы коллег-фронтендеров помогают выстраивать дружеское общение.

Я могу выслушать и понять причины, почему программисты не могут реализовать идею, и придумать вместе с ними решение, которое точно будет работать, а не только классненько выглядеть на макетах.

В плане карьеры это вообще получился один из самых мощных навыков — быть на одной волне с отделом разработки. Быть друзьями, коллегами, командой. Я быстро входила в коллектив, понимала узконаправленные шутки, погружалась в их проблемы и помогала их решить».

Умение объяснить и направить в нужном направлении

Роман Полищук, арт-директор в ООО «РашенСофт»:

«Вот и ответ на вопрос, что побудило меня пойти на курсы верстки пять лет назад. Пинки от верстальщиков и повторные согласования макетов. Видите ли, так сделать не сможем. И ты винишь себя, не понимаешь, действительно ли реализовать то, что ты просишь, нереально, или верстальщик просто привык выполнять легкие задачи. И знаете, что мне дали курсы по верстке? Теперь с уверенностью могу сказать: „Сможешь. Хочешь, покажу, как?“. И это доставляет огромное удовольствие!

А еще, бывает, приходит комментарий от клиента касательно верстки, типа сделайте как в утвержденном макете, и больше ничего. Округлившиеся глаза тестировщика и верстальщика дают понять, что им нужна помощь».

Открываю макет, открываю верстку, проверяю через консоль разработчика. Пишу: «Сделай здесь padding-bottom 30px, line-height 15, animation-delay 5s». Done!

Повышение качества продукта

Александр Обанин, арт-директор digital-интегратора DD Planet:

«Во-первых, знание возможностей кода помогает делать сложные решения, которые учитывают большее количество параметров. Можно улучшать персонализацию, точнее настраивать каждый элемент интерфейса, даже мотивировать пользователя сделать то или иное действие более тонко.

Во-вторых, изучая новые возможности, вы придумываете неожиданные решения и способы применить технологии. Это развивает мозг и позволяет творчески подойти к техническому процессу создания сайтов».

А что с зарплатой?

Андрей Шапиро, арт-директор и партнер в Byndyusoft:

«Что касается возможности повлиять на свою зарплату — мне не видится прямой такой связи. Мол, вы пришли, заявили, что умеете в дизайне вот это и вот это, да еще и программировать, и вам сразу предлагают больше оклад. Нет, так не работает. Но обычно люди с более широкой компетенцией в целом и лучше общаются, и эффективнее задачи решают. И вот если вы „тащите”, регулярно элегантно справляетесь с трудностями, подвижны в мышлении, что отражается на результате, тогда, конечно, вас будут ценить больше и рублем».

Как начать программировать

Напоследок собрали для вас полезные советы и ресурсы от успешных практиков, которые помогут расширить кругозор и начать программировать.

Андрей Шапиро, арт-директор и партнер в Byndyusoft:

«Ресурсов невероятно много, но большая часть на английском языке. Я бы рекомендовал начинать с бесплатных курсов на той же Coursera, если владеете английским, или с курсов на Stepik.org, это русскоязычные курсы.

Почему с бесплатных. Сейчас очень перегрета тема информационных технологий, и под эту дудочку возникла масса русскоязычных курсов, где вам за деньги будут обещать чудесное научение. Узнать такие курсы можно по отдельному сайту, красивой „упаковке” и обещаниям гарантий. Таких я бы сторонился.

Учит нас только реальная практика решения задач. Многие, многие часы практики.

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

Роман Полищук, арт-директор в ООО «РашенСофт»:

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

Общайтесь, интересуйтесь, какими методами происходит внедрение ваших идей, не возникают ли трудности в процессе.

Если вы работаете удаленно — попросите разработчика записать с экрана все этапы реализации вашего дизайна.

Ему не составит труда нажать кнопку записи, а вам будет крайне полезно взглянуть на волшебство, которое происходит с вашими макетами после того, как вы успешно сдали свою часть работы».

Александр Обанин, арт-директор digital-интегратора DD Planet:

«Есть много полезных ресурсов, из простых могу посоветовать The Coding Train, Matthew Epler, Tim Rodenbröker. Найти полезные для себя инструменты можно на сайтах:

• Processing — библиотека для работы с изображениями на Java.

• P5.js — JS-библиотека для креативного кодинга, вдохновленная Processing.

• ML5.js — библиотека для машинного обучения: создание модели и последующее использование в JS.

• TensorFlow — библиотека для машинного обучения в JS.

Для вдохновения советую посмотреть работы аргентинского художника Manolo ide — он использует Processing, художника из Нью-Йорка Joshua Davis и оценить 3D-мейкап от ines.alpha».

Катерина Дробина, Senior UX\UI дизайнер компания Usetech:

«Мне кажется, сейчас курсов так много, что было бы только желание. Отличные курсы есть у сервиса „Яндекс.Практикум“, а также Skillbox и Geekbrains. Но это вовсе не значит, что нужно бежать сразу туда и проходить все курсы.

В интернете огромное количество в бесплатном свободном доступе разной информации. Я бы посоветовала в первую очередь изучить базы верстки, попробовать сверстать небольшую страничку, узнать, что такое адаптив, не сидеть только в Figma в вакууме, отрисовывая правильные углы скругления кнопок.

Отличный способ побыть дизайнером и программистом одновременно — сделать полноценный сайт на Tilda. Да, это конструктор сайтов, но поверьте, он настолько мощный, что, делая там современный сайт с дизайном высокого уровня, вы встретитесь и с ограничениями, о которых ранее не задумывались, и сразу сможете тестировать свои дизайны на мобильном устройстве. Подобные задачи заставляют вас думать чуть шире, а в нашей сфере всегда нужно быть в курсе смежных областей».