Содержание8
- Кто такой веб-дизайнер и чем не занимается
- Инструменты и форматы: что использует дизайнер
- Адаптив и состояния: что должно быть в макете обязательно
- Как принимать макет: чек-лист для заказчика
- Правки, доработки и границы ответственности
- Кого выбрать: дизайнер в студии, фрилансер или штатный специалист
- Частые вопросы
- Источники
Веб-дизайнер — это не человек, который «делает красиво». Это специалист, который превращает задачу бизнеса в структуру страниц, сценарии поведения пользователя и визуальную систему, по которой потом верстают сайт. Заказчику важно понимать, что входит в его работу — иначе приёмка макета превращается в бесконечные «а тут переделайте».
Кто такой веб-дизайнер и чем не занимается
Веб-дизайнер проектирует интерфейсы: думает, как пользователь попадает на страницу, что видит первым, куда кликает и что происходит дальше. Потом одевает эту логику в цвета, шрифты и композицию. Результат — не картинка для галереи, а рабочий документ, из которого разработчик соберёт живой сайт.
Графический дизайнер работает с печатью и статикой: упаковка, плакаты, буклеты. Его задача — передать идею в одной точке, без сценария взаимодействия. Веб-дизайнер же проектирует путь: страница А ведёт на страницу Б, кнопка меняет состояние, форма выдаёт ошибку.
Граница с UX-дизайнером размыта. UX-специалист глубже копается в исследованиях: интервью, тестирование, метрики. Веб-дизайнер в студии часто совмещает обе роли, но в крупных командах UX проектирует логику, а веб-дизайнер — визуал.
Шаблон не заменит дизайнера, если у вас нетипичный продукт, сложная воронка продаж или нужен одностраничный сайт с нестандартной структурой. Шаблон подойдёт, когда задача стандартна, а бюджет минимален.
Веб-дизайнер проектирует функцию, а не украшает страницу. Если от него ждут только «красиво» — вы наняли не того специалиста или не дали ему задачу.
Что входит в работу: этапы от ТЗ до финального макета
Работа начинается до первого экрана. Без чёткого технического задания дизайнер рисует вслепую, а заказчик получает не то, что хотел.
Составление ТЗ
Фиксируем цели сайта, целевую аудиторию, конкурентов, контент и функциональность. Чем подробнее ТЗ, тем меньше переделок.
Исследование
Дизайнер смотрит конкурентов, ищет референсы, продумывает пользовательские сценарии. На этом этапе решается, какие блоки нужны, а какие — лишние.
Прототипирование
Сначала wireframes — схемы без цвета, только структура. Потом кликабельный прототип, который можно «потыкать» и понять логику до отрисовки.
Визуальный дизайн
Типографика, цветовая система, композиция, состояния элементов. Здесь рождается то, что многие ошибочно считают «началом работы».
Подготовка к вёрстке
Спецификации, ассеты, гайдлайны по компонентам. Разработчик получает не картинку, а инструкцию.
Сроки зависят от объёма. Лендинг проходит весь цикл быстрее, чем интернет-магазин с сотней страниц. Исследование и прототип ускоряются, если бизнес уже знает свою аудиторию. Визуальный этап растягивается, когда нужно несколько концепций на выбор.
Инструменты и форматы: что использует дизайнер
Figma вытеснила Sketch и Photoshop как стандарт отрасли. Причина — совместная работа в реальном времени, компонентный подход и встроенные прототипы. Заказчик видит макет в браузере, комментирует прямо в файле, получает обновления мгновенно.
Компонентный подход означает, что кнопка, заголовок или карточка товара — это единый элемент, повторяемый на всех экранах. Поменяли цвет кнопки в одном месте — она обновилась везде. Для заказчика это гарантия консистентности и меньше правок вручную.
Дополнительно дизайнеры используют Miro или FigJam для совместных сессий, Notion для документации. Но главный файл — в Figma, и заказчик должен получить именно его, а не набор PNG.
Важно: передача идёт структурированным файлом с версиями, а не «вот последний макет». История правок — это страховка для обеих сторон.
Адаптив и состояния: что должно быть в макете обязательно
Макет — это не одна картинка под десктоп. Адаптивный сайт требует продуманного поведения на каждом устройстве.
| Тип устройства | Минимальная ширина | Что проверять | Типичные ошибки |
|---|---|---|---|
| Десктоп | 1920 px, 1440 px | Сетка, типографика, отступы, использование пространства | Слишком широкие строки, мелкий текст на большом экране |
| Планшет | 768 px | Перестроение сетки, размеры касания, читаемость | Простое уменьшение десктопа без перестроения |
| Мобильный | 375 px | Минимальный кегль, кнопки под палец, вертикальный скролл | Обрезанный контент, неработающие жесты |
Помимо размеров экрана, в макете должны быть состояния интерфейса: как выглядит кнопка при наведении, при нажатии, в процессе загрузки, при ошибке. Пустое состояние — тоже состояние: что видит пользователь, когда список пуст или форма ещё не заполнена.
Проверять только в Figma недостаточно. Некоторые проблемы всплывают на реальных устройствах: тормозящая анимация, некорректный масштаб, конфликты жестов.
«Вы и сами сверстаете под остальное» — фраза, которая гарантирует сломанный сайт. Адаптив проектируется, а не додумывается разработчиком.
Как принимать макет: чек-лист для заказчика
Приёмка — не вопрос вкуса, а проверка соответствия договорённостям. Вот что сверить перед подписанием акта:
Этот чек-лист закрывает главную боль заказчиков: непонимание, когда работа закончена и можно платить. Проверка — не охота за ошибками, а защита обеих сторон от разных ожиданий.
Правки, доработки и границы ответственности
Стандарт отрасли — два-три раунда правок в рамках согласованной концепции. Правка — это уточнение цвета, подгонка отступа, замена иконки. Новая задача — переделать концепцию, добавить экраны, поменять структуру после утверждения.
Фиксируйте правки комментариями прямо в Figma, а не в мессенджерах. Переписка теряется, контекст размывается, «а вы обещали» становится невозможно проверить.
После оплаты заказчик получает исходник, шрифты, иконки, права на использование макета. Что именно передаётся — прописывается в договоре заранее. Неясность здесь ведёт к спорам через месяцы.
Переделать всё с нуля после утверждения прототипа — не правка. Это новый проект с новой стоимостью и сроками.
Кого выбрать: дизайнер в студии, фрилансер или штатный специалист
| Формат | Когда выбрать | Риски | Что учитывать в стоимости |
|---|---|---|---|
| Фрилансер | Бюджет ограничен, задача понятна, нужен один человек | Зависимость от загрузки, риск пропажи, нет команды на поддержку | [ЦЕНА:design-freelance] |
| Студия | Нужна команда, гарантии сроков, последующая поддержка и развитие | Выше входная стоимость, больше бюрократии | [ЦЕНА:design-studio] |
| Штатный дизайнер | Постоянный поток задач, необходимость глубокого погружения в продукт | Зарплатная нагрузка, простои между проектами, поиск и адаптация | [ЦЕНА:design-salary] |
Выбирайте по портфолио, а не по резюме. Смотрите живые сайты, а не картинки — убедитесь, что макет реально сверстали и он работает. Процесс работы важнее обещаний: есть ли этапы согласования, как ведутся правки, что входит в стоимость.
Если нужен одностраничный сайт с чёткой задачей — фрилансер справится. Сложный проект с интеграциями, последующей поддержкой и командной работой — смотрите в сторону студии.
