Веб-дизайнер: задачи, передача макетов и заработок

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

Что делает веб-дизайнер и какой результат получает заказчик

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

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

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

Где проходит граница с соседними профессиями

В вакансиях роли называют вперемешку, поэтому границу проще проводить по результату.

Отличие от графического дизайна стоит назвать прямо: в печати лист имеет фиксированный размер, и выбранный кегль останется таким же в типографии, а в вебе размер холста задаёт посетитель — шириной окна, масштабом шрифта, поворотом телефона. Веб-дизайнер описывает не одно состояние, а правило перестроения.

Адаптивность: сетка, брейкпоинты и логика перестроения

Брейкпоинт — ширина экрана, на которой раскладка меняется: колонки складываются, меню сворачивается. Единого списка брейкпоинтов не существует: часто рисуют три макета — около 360, 768 и 1440 пикселей, — но это соглашение команды, а не норматив.

Полезнее привязывать брейкпоинт к содержанию. Строка длиннее 70–80 знаков читается тяжело — колонку пора ограничивать. Три карточки перестали помещаться в ряд без сжатия — пора перестраивать его в два столбца.

Состояния элементов — то, что чаще всего забывают

Статичная картинка описывает интерфейс наполовину: кнопке нужны обычный вид, наведение, нажатие, фокус с клавиатуры, загрузка и неактивное состояние; полю ввода — пустое, с подсказкой, заполненное и с ошибкой, где сказано, что именно не так; списку — вид, когда данных нет и когда их двести. Чего нет в макете, то придумает разработчик. Отдельно стоит фокус — рамка, показывающая, где вы находитесь при переходе клавишей Tab: её часто убирают как «лишнюю», и страница становится непроходимой без мыши.

Компоненты, автолэйаут и дизайн-система

Компонент — повторно используемый элемент с главной версией и экземплярами: правишь главную, меняются все. Автолэйаут задаёт фрейму направление потока, внутренние отступы, расстояние между элементами и правила изменения размера — hug contents по содержимому, fill container по доступному месту, fixed с жёстким значением, плюс ограничения min и max (справка Figma). Эти параметры почти дословно переводятся в вёрстку: отступы — в padding, расстояние — в gap, «заполнить контейнер» — в ширину по родителю, ограничения — в min-width и max-width.

Свойства компонентов добавляют управляемости: логическое включает и выключает видимость слоя, текстовое помечает редактируемую надпись, instance swap подменяет вложенный компонент, варианты собирают размеры и состояния в один набор (документация Figma). Из такого набора вырастает дизайн-система: цвета и кегли вынесены в переменные, компоненты описаны и снабжены правилами использования. Навык её сборки виден по учебной программе: если рядом стоят сетки, автолэйаут, компоненты и кликабельный прототип, студент собирает интерфейс, а не рисует картинки. Так устроена программа курса «Веб-дизайнер» от Нетологии, где работа в Figma и публикация макета на Tilda идут вместе с практикой на адаптивных макетах.

Передача макета в разработку

Передача — отдельный этап, а не отправка ссылки. Разработчику нужны названные стили текста и цвета вместо случайных значений, понятная структура слоёв, экраны всех состояний, описание поведения при изменении ширины, экспортированные изображения и шрифты.

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

Доступность: контраст и размер целей нажатия

Доступность в вебе опирается на проверяемые критерии, а не на вкус. По критерию WCAG 2.2 «Контраст (минимальный)» уровня AA обычный текст должен отличаться от фона с коэффициентом не менее 4,5:1, крупный — не менее 3:1. Крупным считается текст от 18 пунктов или от 14 пунктов полужирного начертания — примерно 24 и 18,5 пикселя, — и значение не округляют: 4,499:1 требование не выполняет (разбор критерия 1.4.3 на сайте W3C). Исключения есть — логотипы и неактивные элементы, — но светло-серая подпись на белом под них не попадает.

Размер целей нажатия описан критерием 2.5.8, тоже уровня AA: цель должна быть не меньше 24 на 24 CSS-пикселя. Меньшую допускают, если вокруг достаточно пустоты: воображаемый круг диаметром 24 пикселя не должен задевать соседние цели. Ссылки внутри текстового абзаца из требования исключены (разбор критерия 2.5.8). Отсюда вывод: ряд мелких иконок соцсетей вплотную критерий нарушает, а тот же ряд с воздухом между ними — нет.

Как макет попадает в метрики скорости

Скорость загрузки принято считать заботой разработчика, но часть бюджета расходует дизайнер. Это видно по метрике Largest Contentful Paint: LCP — время отрисовки самого крупного изображения, видео или текстового блока в видимой части страницы, и хорошим считается результат до 2,5 секунды на 75-м перцентиле (web.dev).

Google разбирает LCP на четыре части и предлагает ориентир их распределения: время до первого байта — около 40 процентов, задержка до начала загрузки ресурса — менее 10 процентов, сама загрузка — около 40 процентов, отрисовка элемента — менее 10 процентов (руководство по оптимизации LCP). Первая и третья доли зависят от сервера и веса файла, а вот две десятипроцентные дизайнер расходует своими решениями. Отложенная загрузка на главной иллюстрации прямо названа ошибкой: lazy-loading для LCP-изображения всегда добавляет задержку, а фоновую картинку из CSS браузер обнаруживает поздно и её приходится предзагружать вручную. Если же самым крупным элементом оказывается заголовок фирменным шрифтом, текст не считается отрисованным, пока шрифт грузится, — третье начертание ради одной подписи стоит реальных миллисекунд.

Вторая метрика, Cumulative Layout Shift, описывает прыжки вёрстки. Хороший показатель — не выше 0,1 на 75-м перцентиле, а вклад каждого сдвига считается как доля затронутой площади экрана, умноженная на расстояние смещения относительно большей стороны окна (web.dev). Типовые причины названы там же: изображения без заданных размеров, подгружаемые баннеры и виджеты, шрифты, чей запасной вариант занимает другое место, блоки, вставленные над уже нарисованным. Отсюда правила для макета: указывать пропорции каждой картинки, заранее резервировать место под промобаннер и уведомление о файлах cookie, подбирать запасной шрифт близким по метрикам к основному. «Поставить крупную фотографию на первый экран» — решение не только композиционное: оно измеримо.

Сколько зарабатывает веб-дизайнер

В штате доход опирается на предложения работодателей. По данным агрегатора вакансий «ГородРабот.ру» на август 2026 года, медианная зарплата в вакансиях веб-дизайнера по России составляла 80 000 рублей, средняя — 82 325 рублей, самое частое значение — 50 000 рублей (страница профессии). Сервис оговаривает, что это предложения компаний, а не фактически полученные деньги. Карточка профессии на career.hh.ru в сентябре 2026 года показывала для Москвы медиану 62 366 рублей при вилке в объявлениях 50 000–60 000 рублей (career.hh.ru). Дату среза страница не указывает, поэтому цифру стоит перепроверять.

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

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

Из дохода вычитаются расходы, о которых новички забывают. Самозанятый платит налог на профессиональный доход: 4 процента с поступлений от физических лиц и 6 процентов от организаций, причём режим действует, пока доход с начала года не превысил 2,4 миллиона рублей (сайт ФНС). Добавьте комиссию площадки, подписку на инструменты, лицензионные шрифты и неоплачиваемое время на переписку и поиск заказов — остаток окажется заметно меньше суммы в счёте.

Повседневная работа и что может не подойти

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

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

С чего начать и как показать результат

Художественной базы не требуется, но пригодятся аккуратность и насмотренность. Разумный порядок: фреймы в Figma, сетки и отступы, типографика для экрана, цвет и контраст, компоненты и автолэйаут, состояния, прототип, передача в разработку. Параллельно полезно разобрать основы HTML и CSS — не чтобы верстать, а чтобы понимать, что делается легко, а что дорого. Для первой практики пересоберите экран знакомого сайта в трёх ширинах, описав правила перестроения.

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

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

Первые шаги бывают разными: джуниор-дизайнером в студию, где за год проходишь десятки типовых сайтов; на фриланс с небольшими заказами и растущей ценой; в компанию с готовой дизайн-системой. Какой бы маршрут ни был ближе, условия у нескольких образовательных платформ удобно сравнивать по рейтингу онлайн-школ веб-дизайна, где собраны программы по веб-дизайну, дизайну интерфейсов и UX-исследованиям.

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