Создание дизайна сайта редко начинается с открытия Figma и подбора цветов. Сначала нужен бриф, потом структура, и только потом — картинка, которую увидит пользователь. Если пропустить один из этих шагов, макет придётся переделывать на этапе, когда это уже дорого. В статье разбираем, из чего складывается создание дизайна сайта на практике и что должно оказаться в файле, который передают разработчику.
Зачем нужен бриф и что в нём фиксируют
Бриф — это не формальность для отчётности, а единственный способ дизайнеру не угадывать. Без него специалист опирается на собственный вкус, а заказчик потом объясняет, что представлял всё иначе, и правки идут по кругу.
В рабочем брифе для того, чтобы разработать дизайн сайта, обычно фиксируют:
- цель сайта и главное действие, которое должен совершить посетитель (оставить заявку, купить, скачать прайс);
- портрет аудитории — кто приходит на сайт и с какого устройства чаще заходит;
- 3–5 референсов: сайты, которые нравятся по стилю, и отдельно — что точно не подходит;
- готовые фирменные материалы — логотип, цвета, шрифты, если бренд уже существует;
- список страниц и функциональных блоков — каталог, форма расчёта, личный кабинет;
- технические ограничения: на какой CMS будет сайт, нужна ли адаптивная вёрстка под все устройства.
Если часть пунктов не заполнена, дизайнер задаёт вопросы до старта работы, а не после сдачи первого макета. Это дешевле для всех сторон.
Прототип: скелет сайта до цвета и шрифтов
Прежде чем рисовать финальный вид страницы, делают вайрфрейм — схему расположения блоков без цвета, шрифтов и картинок. Обычно её собирают в Figma или Miro, потому что там легко переставить блок и не потерять час работы дизайнера.
Причина такого порядка простая: структуру дешевле поменять на этапе серых прямоугольников, чем в готовом красивом макете. Если заказчик решит, что форма заявки должна быть не в конце страницы, а сразу под первым экраном, на прототипе это правка на пять минут. В готовом дизайне — это переверстка блока с учётом отступов, теней и адаптива.
Проверить прототип на удобство можно ещё до того, как в него добавят дизайн: посмотреть, не пришлось ли пользователю скроллить в поиске кнопки или путаться в меню. Такую проверку структуры и логики страниц делают в рамках юзабилити-аудита — он полезен не только готовому сайту, но и макету на стадии прототипа.
Этапы создания дизайна сайта
Создание дизайна для сайта обычно идёт в следующем порядке:
- Сбор референсов и утверждение вайрфрейма — что и где расположено.
- Разработка стиля на 1–2 ключевых экранах, чаще на главной странице.
- Утверждение цвета, шрифтов и графики после того, как согласована концепция.
- Прорисовка всех страниц сайта в едином стиле.
- Адаптация каждой страницы под десктоп, планшет и мобильный экран.
- Подготовка макета к передаче в разработку.
Стиль обкатывают на одной-двух страницах не случайно. Если заказчику не понравится выбранное направление, переделать один экран быстрее, чем перекрашивать весь готовый сайт из 15 страниц.
Сложность и объём работы сильно различаются по типу проекта. Дизайн одностраничного Landing Page — это, как правило, один длинный экран с несколькими блоками. Корпоративный сайт добавляет каталог услуг, страницы о компании и разделы с кейсами. Больше страниц и уникальных экранов — больше времени на прорисовку и согласование.
Что входит в готовый макет для разработчиков
Макет, который можно передать в вёрстку без дополнительных вопросов, обычно включает:
- файл в Figma с открытым доступом для разработчика, а не картинки в PDF;
- UI-кит: стили кнопок во всех состояниях (обычное, при наведении, нажатое, недоступное), палитру цветов, шрифтовую сетку, размеры отступов;
- адаптивные версии каждой страницы минимум на трёх ширинах экрана — десктоп (1920 px), планшет (768 px) и мобильный (375 px);
- иконки и изображения в нужном формате, без сжатия, ломающего качество при увеличении;
- спецификацию с точными размерами и отступами — в Figma это делают через Dev Mode, чтобы разработчику не приходилось измерять пикселы линейкой на глаз.
Если в макете нет проработанных состояний кнопок и полей форм, разработчик придумывает их сам по своему вкусу — и итоговый сайт отличается от того, что утверждал заказчик, хотя формально макет был передан.
Если нужен не только файл с картинками, а сайт целиком — от прототипа до запуска на CMS, — такую работу берёт на себя команда при разработке сайта под ключ: дизайн, вёрстка и передача администратору сайта идут в одном проекте, без стыковки разных подрядчиков.
От чего зависит стоимость дизайна сайта
Сколько стоит разработка дизайна сайта, определяется не одним параметром, а сочетанием нескольких:
- количество уникальных страниц — типовая карточка товара дешевле, чем полностью авторская страница с нестандартной сеткой;
- сложность интерфейса — личный кабинет с фильтрами и статусами заказа требует больше проработки, чем статичная страница «О компании»;
- число итераций правок, заложенное в проект — если правок больше согласованного лимита, это отдельная работа;
- наличие готового брендбука — когда цвета, шрифты и логотип уже есть, часть работы уже сделана за дизайнера;
- количество разрешений экрана, под которые адаптируют макет.
Стоимость дизайна интернет-магазина обычно выше, чем у лендинга, из-за количества типовых экранов: каталог с фильтрами, карточка товара, корзина, оформление заказа, личный кабинет покупателя. Подробнее о том, из каких блоков складывается такой проект, — на странице про разработку интернет-магазина.
Отдельно стоит редизайн: его цена зависит от того, сколько элементов старой структуры остаётся без изменений. Полная переработка структуры и стиля близка по стоимости к созданию нового дизайна с нуля, а точечное обновление визуала при сохранённой структуре выходит дешевле.
Дизайнер-фрилансер или агентство: что выбрать
Перед тем как заказать дизайнера сайтов, стоит сопоставить не только цену, но и то, что стоит за услугой.
| Критерий | Фрилансер | Агентство |
|---|---|---|
| Кто ведёт проект | Один специалист | Дизайнер, UX-специалист, часто разработчик на связи |
| Что получаете | Файл с макетом | Макет, готовый к передаче в вёрстку, с UI-китом |
| Что при болезни или занятости исполнителя | Проект может встать на паузу | Задачу передают другому специалисту команды |
| Комплексность | Обычно только дизайн | Дизайн можно объединить с вёрсткой и запуском |
Для простого одностраничника с ограниченным бюджетом услуги веб-дизайнера на фрилансе вполне решают задачу — экранов немного, и риск затяжной переделки ниже. Для сайта со сложной логикой — каталогом, личным кабинетом, интеграцией с CRM — разумнее выбирать команду, где дизайнер работает в связке с разработчиком: тогда макет сразу учитывает технические ограничения CMS, и на стыке дизайна и вёрстки не всплывают несостыковки.
Если вы дошли до этапа выбора подрядчика и уже понимаете, какой тип сайта нужен, дальше стоит запросить у пары кандидатов примеры макетов с проработанными состояниями кнопок и адаптивом — по ним видно, доводят ли проект до стадии, готовой к разработке, или передают только картинку главной страницы.