Нужно ли дизайнеру уметь программировать

Вопрос из серии «Нужно ли хозяйке уметь печь пироги?». Не обязательно, но гостям будет приятно.

Если вы дизайнер, который умеет кодить, всем вокруг будет приятно. Вам тоже. Вместе с дизайнером ДАЛЕЕ Борисом Бессоновым мы провели исследование, поболтали с коллегами, хорошенько погуглили и нашли убедительные доказательства.

Предположим, что команда состоит из менеджера, фронта, бэка, дизайнера и тестировщика. Мы спросили, какими навыками обладает дизайнер их мечты и входит ли в этот список разработка.

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

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

Менеджер

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

Фронт/верстальщик

Верстальщик или фронтенд-разработчик визуализирует макет в браузере. От качества этого макета зависит скорость работы, ведь на верстку небрежного дизайна уходит больше времени и усилий.

Бэк

С бэкенд-разработчиком дизайнер в 90% случаев не пересекается. В оставшиеся 10% входят случаи с «костыльной» версткой из-за некачественного дизайна и еще нестандартные решения.

Например, многие задачи бэк решает через циклы. Обычно они используются для повторяющегося контента: колонок с товарами на сайте, галерей с картинками и тому подобного. Допустим, дизайнер нарисовал макет с 4 колонками по ¼ ширины сайта, и формула: 1 повтор цикла = 1 колонка здесь отлично работает. Но на планшетном макете дизайнер решил применить нестандартный подход: колонка 1 занимает 100% ширины, колонка 2 — 50%, а третья состоит сразу из двух вложенных колонок.

Либо бэку придется применять вложенный цикл, а это время, либо фронт переделывает планшетную версию на JS по образцу десктопной по формуле: 1 колонка = 1 повтор. Это тоже время и дополнительная нагрузка на сайт.

Даже QA

Тестировщикам и так по кайфу.

Подводим итог этой главы и получаем аргумент № 1 — если дизайнер знает JS и язык гипертекстовой разметки, он рисует макет, который удобно верстать. Фронт не потратит время на отступы, шрифты и заголовки. Бэкендер натянет все это счастье на движок. Менеджер уложится в сроки, клиент получит продукт. Все довольны.

От джунов навыков программирования не требуют, в вакансиях часто даже нет требований по HTML/CSS, указан только стандартный набор из Figma/Adobe Photoshop/Illustrator. Но и зарплата соответствующая.

С ростом зарплаты список растет — в требованиях к кандидату появляются HTML, CSS и даже JS. Но верстать сам сайт не просят.

Есть вакансии от тех, кто хочет получить два в одном. Зарплатная вилка примерно на том же уровне.

Таким образом, аргумент № 2 — знание верстки приблизит вас к уровню мидла или сеньора. С ростом грейда вырастет и зарплата.

Еще как будем.

И не только для тестирования прототипа в браузере.

Во-первых, знания HTML/CSS/JS уберегут от факапов. Если дизайнер рисует на сайт сложную анимационную фичу, например, вот такую или такую, лучше сразу делать это на CSS или JS, а не в таймлайне After Effects. Фронту не придется мучительно оптимизировать, а дизайнеру — упрощать механику анимации по ходу дела.

Во-вторых, Борис Бессонов дал нам список из 13 примеров того, что может дизайнер с техническим бэкграундом.

1. Сделать хороший макет, где блоки и слои отсортированы сверху вниз как в HTML-документе, фронт сверстает его в разы быстрее.

2. Сразу адаптировать этот макет под все устройства и браузеры, сверстав его в HTML/CSS.

3. Сразу отрисовать макеты для разных сценариев: имен вроде Константина Константинопольского, поп-апов с ошибками сети, полос прокрутки.

4. Не зафейлить шрифты, выбрать те, которые идут и на Mac, и на Windows, Linux.

5. Показать клиенту настоящий прототип в браузере на реальных данных с помощью JSON и Firebase вместо скриншотов из фигмы.

6. Нарисовать генеративный арт как Спотифай.

7. Использовать инструменты фронтендеров вроде Codepen, чтобы визуализировать идеи и тестировать их, а также библиотеки с UI элементами вроде Code my UI.

8. Использовать подход Components / Autolayouts / Variants, который похож на фронтендерский БЭМ (Блок, Элемент, Модификатор), когда вы рисуете один компонент, например, кнопку «Купить!» один раз, а потом используете еще 10 раз в разных проектах, меняя слово.

9. Настраивать автоматический перенос компонентов в Figma в дизайн-систему.

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

12. Применять Blur без угрозы для скорости сайта. На слабых устройствах без GPU сайты с размытием фона тормозят, поэтому на среднестатистических продуктовых ресурсах эффект встречается редко. Однако если дизайнер знает код, он может заблюрить фон заранее и вставить как обычную картинку. Подробнее — в докладе «Гибридный дизайнер» арт-директора «Газпром нефти» Вадима Матвеева.

13. Вставлять 3D-анимацию, которая не подведет. Например, как в этой статье New York Times. На сайт вставили прозрачный видеоролик и «приправили» параллаксом, вышло стильно, работает даже на слабых устройствах. Об этом мы узнали от Юрия Артюха.

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

Короче:

уметь — полезнее, чем не уметь.