Должен ли веб-дизайнер уметь программировать — вечный спор
Этот вопрос всплывает в каждом втором профессиональном чате. «Дизайнер должен уметь кодить?» — одни кричат «обязательно», другие — «это не его работа».
Правда, как обычно, посередине. И она куда практичнее, чем кажется.
Зачем дизайнеру знать HTML и CSS
Представь архитектора, который никогда не был на стройке и не знает, как кладут кирпич. Он рисует красивые проекты — с парящими консолями, стеклянными полами и лестницами без опор.
Строители смотрят на это и молча страдают. Половину сделать невозможно, половина обойдётся в три раза дороже плана.
Знание кода для дизайнера — это не «стать строителем». Это понять как вообще стоят здания. Тогда в проектах не будет парящих консолей там, где нет несущих стен.
Дизайнер знает CSS — как это меняет работу с разработчиком
Вот конкретный пример. Дизайнер без знания кода говорит разработчику: «сделайте покрасивее при наведении».
Дизайнер с базовым CSS говорит: «сделайте transition: all 0.3s ease-out». Разработчик получает точную инструкцию и идёт делать — без итерации «а что именно покрасивее?».
По данным State of the Designer 2025, 92% дизайнеров и 91% разработчиков считают, что процесс передачи макетов можно значительно улучшить. Главная проблема — коммуникационный разрыв: две стороны буквально говорят на разных языках.
Знание кода — это переводчик. Не нужно быть носителем, достаточно понимать основные слова.
Дизайнер без знания вёрстки
До недавнего времени дизайнер и разработчик работали почти в параллельных мирах. Дизайнер рисовал в Figma — разработчик получал макет и начинал «интерпретировать».
Результат: анимация «не такая», отступы «чуть не те», кнопка ведёт себя «немного иначе». Итерации тянутся неделями.
Сейчас, с приходом дизайн-систем, токенов и AI-инструментов, граница между дизайном и разработкой стирается окончательно. Дизайнер, умеющий читать код, может взять v0 или Bolt.new, сгенерировать рабочий UI через AI и сразу доработать — вместо того чтобы объяснять задачу разработчику и ждать реализацию. Это меняет скорость итераций кардинально.
Что даёт знание вёрстки дизайнеру
Реализуемые решения. Понимая flexbox и блочную модель, ты перестаёшь проектировать то, что разработчик будет «мучительно реализовывать». Нестандартный контейнер на 1234px, анимация без учёта поддержки браузеров, экран без состояний hover/error/loading — всё это исчезает из макетов само собой.
Дизайн-системы. Современные системы построены на design tokens — переменных, которые описывают цвет, отступы, типографику одновременно для Figma, CSS, iOS и Android. Дизайнер, понимающий CSS-переменные, работает с этим напрямую. Меняешь переменную в Figma — изменение расходится по всей системе.
Прототипы, которые не врут. Figma показывает статичные экраны. Реальный код — реальное поведение. Дизайнер, умеющий писать код, может создать прототип, неотличимый от финального продукта, и показать точную анимацию, жест, переход.
Автоматизация рутины. Базовый JavaScript позволяет писать плагины для Figma — автоматическое переименование слоёв, генерация вариантов, экспорт по шаблону. Задачи, которые съедают час в день, решаются скриптом за пять минут.
Зарплата дизайнера с навыками программирования
По данным Хабр Карьеры, средняя зарплата дизайнера в Москве — около 105 000 рублей. Средняя зарплата разработчика — 217 000 рублей. Дизайнер с навыками разработки занимает промежуточную позицию и претендует на совершенно другую компенсацию.
Гибридный специалист «дизайнер + разработчик» на рынке называют unicorn — единорог. Таких мало, спрос высокий. Для стартапа это человек, который проводит продукт от идеи до рабочего прототипа в одиночку. Крупные компании тоже ищут таких — потому что они ускоряют работу команды в разы.
По некоторым оценкам, дизайнеры с базовым CSS получают на 30–40% больше проектов — клиенты ценят возможность показать живой прототип, а не картинку.
С чего начать изучение HTML и CSS дизайнеру
Шаг 1. HTML — структура страницы.
Не нужно знать все теги. Нужно понять: страница — это иерархия блоков. Что такое семантика, как браузер читает разметку. Это занимает несколько дней.
Шаг 2. CSS и Flexbox — отступы, расположение, адаптивность.
Вот тут начинается главный инсайт. После того как понимаешь margin, padding и flexbox — начинаешь проектировать совершенно иначе. Раскладки в Figma перестают быть «красивыми картинками» и становятся техническими решениями.
Шаг 3. CSS-переменные — токены и дизайн-системы.
Если работаешь с продуктовым дизайном — это обязательно. Понимание трёхуровневой структуры токенов (primitive → semantic → component) меняет подход к дизайн-системам.
Шаг 4. Основы JavaScript — по желанию.
Анимации, плагины для Figma, интерактивность. Значительно расширяет возможности, но уже не «прожиточный минимум» — скорее следующий уровень.
Если хочешь пройти первые два шага с нуля и сразу на практике — вот бесплатный учебник
Когда дизайнеру не нужно знать программирование
Честно: есть сценарии, где всё это нерелевантно.
Упаковка и полиграфия — там нет браузера. Промышленный дизайн — там нет CSS. Иллюстрация — там финальный продукт статичное изображение.
Но если ты работаешь с веб, мобайлом, интерфейсами — базовое понимание кода перестаёт быть «плюсом в резюме» и становится профессиональным стандартом.
Итоговая мораль — три вещи, которые меняет код
Знание программирования для дизайнера — это не про то, чтобы заменить разработчика. Это про три конкретных изменения.
Первое: коммуникация. Говоришь на одном языке с командой — исчезают потери при передаче макета.
Второе: реализуемость. Перестаёшь проектировать невозможное — экономишь время всей команды.
Третье: ценность. Выделяешься среди тех, кто «просто рисует», и претендуешь на другой уровень задач и зарплаты.
Начать можно с HTML и CSS — это пара недель, не пара лет. Попробуй — а вдруг у тебя всё получится? 🚀
Если есть вопросы по вёрстке — можно задать в чате