Дизайн отдельно от разработки: как передать макеты, чтобы сайт собрали без потерь
Что должна передать дизайн-студия разработчикам: UI-кит, адаптивы, состояния, анимации и авторский надзор. Чек-лист для заказчика, который делает дизайн и разработку у разных подрядчиков.
Многие компании заказывают дизайн у одной команды, а разработку у другой: у своих программистов, у давнего подрядчика или у партнёров студии. Это нормальная схема, но у неё есть слабое место — шов между дизайном и кодом. Если его плохо прострочить, сайт в браузере будет заметно отличаться от макета.
Рассказываем, что должно лежать в папке с макетами, чтобы разработчикам не приходилось угадывать.
Макеты всех ключевых экранов
Не только главная и пара внутренних страниц, а каждый уникальный тип: каталог, карточка, корзина, личный кабинет, страница ошибки, пустой поиск. О том, как считать экраны, мы писали в статье «Из чего складывается стоимость дизайна сайта».
Адаптивные версии
Минимум — десктоп и телефон. Для сложных интерфейсов ещё планшет или промежуточная ширина. Разработчик не должен сам решать, куда переедет меню и как сложится таблица на узком экране.
UI-кит
Набор всех компонентов с их состояниями: кнопки, поля, чекбоксы, выпадающие списки, карточки, уведомления. У каждого элемента есть обычное состояние, наведение, нажатие, фокус, ошибка и неактивное. UI-кит экономит разработчикам часы и помогает сайту оставаться единым, когда через год появятся новые страницы.
Стили и токены
Цвета, шрифты, размеры, отступы и радиусы оформлены как переменные, а не разбросаны по макетам «на глаз». Тогда в коде их можно описать один раз.
Состояния и сценарии
Что происходит после нажатия кнопки? Как выглядит загрузка, ошибка сервера, успешная отправка формы, пустая корзина? Эти экраны часто забывают, и разработчик рисует их сам, как получится.
Анимации и поведение
Если в дизайне есть движение, его нужно описать: что анимируется, сколько длится, с каким ускорением. Хватает короткого видео или прототипа с подписями.
Ресурсы
Иконки в SVG, изображения в нужных размерах, шрифты с лицензией, фавикон и картинки для соцсетей. Всё названо понятно и лежит в одном месте.
Авторский надзор
Даже идеальная передача не отменяет вопросов. Авторский надзор — это когда дизайнер проверяет собранные страницы и показывает, где разошлись отступы, шрифты или поведение. Обычно это несколько коротких итераций, которые спасают сайт от «почти как в макете».
Как работаем мы
Мы делаем дизайн: исследование, прототипы, макеты, UI-кит, адаптивы и анимации. Разработку ведут ваши программисты или наши партнёры, а мы готовим для них всё перечисленное и сопровождаем сборку. Так у каждого своя зона ответственности, и при этом сайт получается таким, каким его задумали.
Посмотрите, как это выглядит в больших интерфейсах, например в кейсах Freedom Finance Office UI и Aspex корпоративный портал. Нужен дизайн, который легко собрать? Оставьте заявку.