Кто такой веб-дизайнер: чем занимается, сколько зарабатывает и как им стать
Веб-дизайнер проектирует сайты и приложения в Figma. Разбираем отличия от UX/UI, зарплаты от 45 до 400 тыс. руб. и путь с нуля.
- Веб-дизайнер проектирует интерфейс, а не делает «красиво»: типографика, сетки, адаптив, компоненты.
- Junior: 45–80 тыс. руб., Senior: 150–250 тыс., в крупных IT-компаниях – до 400 тыс. руб.
- Figma – основной инструмент рынка. Без него на вакансию не возьмут.
- Портфолио из концептуальных проектов работает так же хорошо, как из реальных клиентов.
Веб-дизайнер проектирует визуальную и интерактивную часть сайтов и веб-приложений. Его задача — сделать продукт понятным, красивым и удобным: от лендинга до интерфейса сложного сервиса.
Профессия находится на пересечении визуального дизайна и пользовательского опыта. Веб-дизайнер работает с типографикой, цветом, сеткой и анимацией, но всегда с оглядкой на то, как пользователь будет взаимодействовать с интерфейсом.
Чем занимается веб-дизайнер
- Разработка концепции — определяет стиль, цветовую палитру, типографику, общий визуальный язык проекта
- Проектирование макетов — рисует wireframes (каркасы) и финальные макеты страниц в Figma или Sketch
- Адаптивный дизайн — делает версии для разных устройств: десктоп, планшет, мобильный
- Прототипирование — создаёт интерактивные прототипы для демонстрации навигации и анимаций
- Работа с разработчиками — передаёт макеты с описанием отступов, шрифтов, анимаций через Figma handoff
- UI-kit — создаёт дизайн-систему с переиспользуемыми компонентами для больших проектов
Веб-дизайнер vs UX-дизайнер vs фронтенд-разработчик
| Роль | Основная задача | Чего не делает |
|---|---|---|
| Веб-дизайнер | Визуальный облик и интерфейс сайта | Не пишет код, не проводит глубокие UX-исследования |
| UX-дизайнер | Сценарии взаимодействия пользователя с продуктом | Не занимается деталями визуала |
| UI-дизайнер | Оформление конкретных экранов и компонентов | Не выстраивает пользовательский путь |
| Фронтенд-разработчик | Реализует дизайн в коде (HTML/CSS/JS) | Не проектирует визуальную часть |
В небольших компаниях один специалист совмещает веб-дизайн, UX и частично верстку. Подробнее о разнице ролей: чем отличается UX от UI. В крупных — это разные люди.
Навыки веб-дизайнера
Инструменты
- Figma — основной инструмент рынка в 2024–2025 годах: макеты, прототипы, дизайн-система
- Adobe Photoshop / Illustrator — для обработки изображений и иконок
- Figma FigJam / Whimsical — инструменты для быстрых вайрфреймов и диаграмм до начала детального дизайна
- Базы анимации — Lottie, Rive или CSS-анимации для передачи разработчикам
Визуальные основы
- Типографика — правила работы со шрифтами, кеглем, межстрочным интервалом, иерархией
- Цветовая теория — как строить палитры, которые работают на экране
- Сеточные системы — Bootstrap-сетка, 8px-система, колонки
- Принципы Гештальта — близость, сходство, замкнутость — основа понятных интерфейсов
- Адаптивность — как макет трансформируется от 1440px до 375px без потери смысла
Сколько зарабатывает веб-дизайнер
Зарплата зависит от уровня, специализации и типа работодателя. Дизайнер в продуктовой IT-компании зарабатывает больше, чем в веб-студии. Данные по всем дизайн-специализациям: сколько зарабатывает дизайнер.
| Уровень | Опыт | Зарплата (руб./мес.) |
|---|---|---|
| Junior | До 1 года | 45 000 — 80 000 |
| Middle | 1–3 года | 80 000 — 150 000 |
| Senior | 3–5 лет | 150 000 — 250 000 |
| Lead / Art Director | 5+ лет | 250 000 — 400 000+ |
| Фрилансер | Любой | 50 000 — 350 000+ |
Данные по зарплатам — диапазоны по hh.ru и Хабр Карьера за 2024–2025 год. Реальные цифры зависят от региона, компании и конкретных навыков.
Специализация на UI для мобильных приложений и продуктовый дизайн в IT-компаниях — самые высокооплачиваемые направления. Дизайн лендингов и корпоративных сайтов — ниже рынка.
Зарплата по типу работодателя
| Тип компании | Зарплата Middle |
|---|---|
| Веб-студия / агентство | 70 000 — 110 000 |
| E-commerce / marketplace | 90 000 — 150 000 |
| IT-продуктовая компания | 120 000 — 200 000 |
| Банки и финтех | 110 000 — 180 000 |
| Международная компания | 150 000 — 300 000+ |
Как стать веб-дизайнером с нуля
Барьер входа ниже, чем в разработке: не нужна математика, базу можно освоить за 3–4 месяца. Но до уровня, за который платят хорошо, — от 1 до 2 лет практики.
- Освойте Figma
- интерфейс, компоненты, Auto Layout, прототипы — это займёт 3–4 недели
- Изучите базы дизайна
- типографика, цвет, сетки, принципы Гештальта — есть бесплатные курсы
- Копируйте хорошие сайты в Figma
- это лучший способ понять, как устроены профессиональные макеты
- Создайте 3–5 учебных проектов
- лендинг, интернет-магазин, мобильное приложение
- Добавьте проекты на Behance или Dribbble — работодатели смотрят именно туда
- Ищите первые заказы
- фриланс-биржи (kwork, fl.ru), студии, знакомые стартапы Об общей стратегии поиска первой работы — читайте здесь.
Подробнее об общей стратегии поиска первой работы в IT, включая дизайн: как найти первую работу в IT — пошаговый разбор.
Типичный процесс работы над проектом
- Бриф и исследование (2–5 дней): задача бизнеса, целевая аудитория, анализ конкурентов, mood board
- Wireframes (3–7 дней): каркасы страниц без цвета и деталей — утверждается структура и навигация
- Дизайн (1–3 недели): цвет, типографика, детали компонентов, адаптивные версии
- Прототип (1–3 дня): интерактивная демонстрация в Figma — клиент видит как работает навигация
- Передача разработчикам (1–2 дня): Figma handoff с описанием стилей, отступов, анимаций
- Контроль реализации: дизайнер проверяет вёрстку, фиксирует расхождения — «пиксельный перфекционизм»
Где находить заказы и работу
| Канал | Что ищут | Особенности |
|---|---|---|
| hh.ru / Хабр Карьера | Штатные позиции в компаниях | Требуется портфолио в ссылке |
| Behance / Dribbble | Входящие предложения от клиентов | Пассивный канал: нужно сначала наполнить |
| Telegram-каналы | Фриланс-проекты, разовые заказы | «Дизайн работа», «UI/UX вакансии» |
| Личная сеть | Рекомендации от предыдущих клиентов | Самый конверсионный канал для опытных |
| Kwork.ru / fl.ru | Небольшие заказы для старта | Низкие цены, хорошо для первых кейсов |
Ошибки начинающих веб-дизайнеров
- Копируют референсы без понимания
- делают «похоже на Airbnb», но не понимают почему так сделано
- Пропускают wireframes — сразу делают красивый цветной макет без согласования структуры
- Не думают об адаптивности
- дизайн отлично смотрится на 1440px и разваливается на мобильном
- Игнорируют состояния компонентов
- делают кнопку в normal-состоянии, забывают hover/active/disabled
- Занижают стоимость работы
- берут 2 000 руб. за лендинг и через месяц выгорают
- Не общаются с разработчиками
- делают вещи, которые нельзя реализовать в CSS
FAQ
Нужно ли уметь верстать (HTML/CSS)?
Не обязательно, но полезно. Дизайнер, понимающий возможности и ограничения CSS, делает более реализуемые макеты. Многие веб-дизайнеры знают базовую верстку (и понимают разницу между фронтендом и бэкендом) и могут проверить, как их макет выглядит в браузере.
Figma платная — как начать?
Figma имеет бесплатный тариф, которого достаточно для обучения и первых проектов (с 2024 года лимит — 3 черновика в командных пространствах, но личные черновики не ограничены). Платные функции нужны командам: общие библиотеки, ограничения доступа.
Чем веб-дизайнер отличается от графического дизайнера?
Графический дизайнер работает с полиграфией, брендингом, упаковкой — статичными материалами. Веб-дизайнер проектирует интерактивные цифровые продукты с учётом поведения пользователей, адаптивности и технических ограничений браузеров.
Портфолио без реальных клиентов — возможно?
Да. Концептуальные проекты (редизайн известных сайтов, придуманные продукты) работают как портфолио, если сделаны качественно. Многие Senior-дизайнеры начинали именно с концептов. Главное — показать мышление и уровень исполнения, а не наличие настоящего клиента.
Собираем и сверяем программы онлайн-школ: цены, сроки, документы об окончании.
Комментарии