Разработка дизайна сайта

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

от 90 000 ₽стоимость

от 3 недельсроки

Дизайн, который решает задачу, а не просто радует глаз

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

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

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

Что входит в услугу

Состав работ зависит от масштаба проекта, но базовый набор мы не урезаем никогда — без него дизайн превращается в набор картинок.

Аналитика и брифинг. Разбираем бизнес, целевую аудиторию, конкурентов и текущий сайт, если он есть. Фиксируем цели и метрики, по которым будем оценивать результат.
Информационная архитектура. Определяем, какие страницы нужны, как они связаны между собой и в каком порядке человек будет получать информацию.
Прототипы. Черно-белые схемы ключевых страниц: где какой блок, какой текст, какие кнопки. На этом этапе проще всего менять логику.
Визуальная концепция. Один-два варианта стилистики на примере главной страницы или самого важного экрана.
Макеты всех страниц. Детальная проработка каждого шаблона в десктопной, планшетной и мобильной версиях.
UI-кит. Библиотека компонентов: кнопки, поля, карточки, таблицы, модальные окна, иконки — со всеми состояниями (наведение, нажатие, ошибка, загрузка).
Интерактивный прототип. Кликабельная версия, на которой можно пройти основные сценарии и показать её коллегам или руководству.
Авторский надзор. Сопровождаем вёрстку и проверяем, что в коде всё выглядит и ведёт себя так, как задумано.

Кому подходит

Чаще всего к нам приходят с одной из четырёх ситуаций. Если узнали свою — значит, мы точно сможем помочь.

Новый бизнес или новый продукт

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

Сайт устарел визуально и морально

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

Есть своя команда разработки

Программисты есть, а дизайнера в штате нет или он загружен. Делаем макеты и UI-кит, которые разработчики смогут внедрить без постоянных уточнений, и остаёмся на связи на этапе вёрстки.

Нужен дизайн отдельного раздела

Личный кабинет, каталог, калькулятор, новая посадочная страница под рекламную кампанию. Встраиваемся в существующую дизайн-систему или аккуратно развиваем её.

Этапы работ

Процесс построен так, чтобы ключевые решения принимались на ранних шагах, когда их изменение почти ничего не стоит. Подробнее о том, как устроено взаимодействие с клиентом, рассказываем на странице «Как мы работаем».

Погружение. Созвон или встреча, заполнение брифа, доступы к аналитике. Изучаем, как сейчас приходят и ведут себя клиенты, какие вопросы задают менеджерам, на чём срываются сделки. Результат — согласованные цели и список требований.
Исследование. Анализируем пять–десять конкурентов и смежных компаний, собираем сильные и слабые решения. Описываем сегменты аудитории и их сценарии: зачем человек пришёл, что ему нужно увидеть, какие у него возражения.
Структура и прототипы. Строим карту сайта и прототипы ключевых страниц. Прописываем смысловые блоки и черновые тексты, чтобы оценивать не абстрактные квадраты, а реальное содержание. Согласовываем с вами, вносим правки.
Визуальная концепция. На основе прототипа главной страницы разрабатываем стилистику: типографику, палитру, сетку, характер иллюстраций и фотографий. Если у компании есть фирменный стиль, бережно его адаптируем для веба.
Дизайн всех страниц. Распространяем утверждённую концепцию на остальные шаблоны. Прорабатываем адаптивные версии — мобильная часто важнее десктопной, потому что большая часть трафика приходит со смартфонов.
UI-кит и передача в разработку. Собираем компоненты, описываем отступы, анимации, состояния. Готовим файлы так, чтобы разработчику не приходилось угадывать.
Авторский надзор. Проверяем свёрстанные страницы, составляем список расхождений и помогаем их устранить. Только после этого считаем работу завершённой.

Что вы получите на выходе

По итогам проекта у вас остаётся не просто «картинка сайта», а полноценный набор материалов, с которым можно работать дальше — своими силами или с любым подрядчиком.

Документ с результатами исследования: портреты аудитории, сценарии, выводы по конкурентам.
Карта сайта и прототипы ключевых страниц.
Макеты всех шаблонов в трёх разрешениях с подготовленными текстами и заглушками под фото.
UI-кит с компонентами и их состояниями, правилами использования цветов и шрифтов.
Кликабельный прототип для презентации и тестирования.
Исходные файлы с понятной структурой слоёв и полной передачей прав.
Рекомендации по контенту: какие фото снять, какие тексты дописать, что подготовить к запуску.

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

Сроки и стоимость

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

Формат	Что входит	Срок	Стоимость
Лендинг	Прототип, концепция, макет одной страницы в трёх разрешениях	от 2 недель	от 60 000 ₽
Корпоративный сайт	Исследование, прототипы, 6–10 шаблонов, UI-кит	от 4 недель	от 140 000 ₽
Интернет-магазин	Каталог, карточка, корзина, оформление заказа, личный кабинет	от 6 недель	от 220 000 ₽
Редизайн	Аудит текущего интерфейса, новая структура и визуал	от 3 недель	от 90 000 ₽
Дизайн-система	Расширенный UI-кит, документация, правила для команды	от 4 недель	от 160 000 ₽

Работаем поэтапно: оплата разбивается на части и привязывается к согласованным результатам. Если на этапе прототипов станет понятно, что проект нужно скорректировать, вы не платите за то, что не понадобилось.

Частые ошибки и почему с нами их не будет

За годы работы мы собрали типичный набор проблем, из-за которых редизайн не даёт результата. Каждую из них мы закрываем процессом, а не обещаниями.

Дизайн без структуры

Дизайнер сразу рисует красивую главную, а потом выясняется, что в неё не помещаются нужные блоки. Мы всегда начинаем с прототипа и согласовываем содержание до визуала.

Тексты «потом»

Макеты делаются под «рыбу», а реальные тексты оказываются в три раза длиннее. Мы пишем черновые тексты на этапе прототипа и проектируем блоки под реальный объём.

Забытая мобильная версия

Адаптив рисуют в последний момент «по остаточному принципу». У нас мобильные макеты — обязательная часть каждого шаблона, а не дополнительная опция.

Макеты, которые невозможно сверстать

Эффектные решения, которые разработчики реализуют месяц или не реализуют вовсе. Мы проверяем сложные элементы с технической командой ещё на этапе концепции.

Нет авторского надзора

Макеты сданы, а в коде всё «поехало»: другие отступы, другие шрифты, сломанные состояния. Мы сопровождаем вёрстку и сверяем результат с макетом.

Если сайт уже есть и вы не уверены, нужен ли полный редизайн, начните с аудита сайта — он покажет, что можно улучшить точечно, а что действительно стоит переделать.

Вопросы и ответы

Можно ли сделать только дизайн без разработки?

Да. Мы передаём макеты и UI-кит вашим разработчикам и при необходимости сопровождаем вёрстку. Файлы готовим так, чтобы с ними могла работать любая команда.

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

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

Сколько правок включено в стоимость?

На каждом этапе предусмотрены два круга правок. На практике их почти всегда хватает, потому что ключевые решения согласовываются заранее, на уровне прототипов.

Вы работаете с фирменным стилем, который уже есть?

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

Кто пишет тексты для сайта?

Черновые тексты и структуру блоков мы готовим сами на основе брифа и интервью. Финальную редактуру можем сделать силами нашего редактора или согласовать с вашими специалистами.

В какой программе вы делаете макеты?

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

Можно посмотреть ваши работы?

Да, часть проектов собрана в разделе «Проекты». На встрече покажем и те работы, которые не публикуем открыто, с разбором решений.

Примеры работ

Продвижение

Лендинги школы английского «Speak Up»

Языковая школа для детей и взрослых

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