UX/UI

Дизайн сайта / UI-kit / Figma

Концепция, UI-kit, компоненты, адаптивы и пакет передачи в разработку.

Конструктор направления

Подберите, что ближе к вашей задаче

Эти страницы видны поисковикам и полезны клиенту: каждая раскрывает отдельный сценарий, но в меню первого уровня не перегружает сайт.

Сценарии пользователя, структура страниц, путь к заявке и прототипы.

Черновая структура экранов, блоков, CTA и логики без финальной графики.

Визуальная концепция, страницы, адаптивы, состояния и подготовка к верстке.

Компоненты, кнопки, формы, карточки, состояния, сетки и правила адаптива.

Обновление визуального языка, структуры и ключевых сценариев без потери смысла.

Мобильные и планшетные состояния страниц, меню, форм, карточек и таблиц.

Проверка визуальной иерархии, форм, карточек, адаптива и пути к заявке.

Дизайн сайта / UI-kit / Figma
Как выглядит результат

Дизайн сразу готовится к разработке

Концепция, UI-kit, компоненты, адаптивы и комментарии помогают быстрее перейти от макета к сайту.

3 направления на выбор
UI компоненты и состояния
Dev пакет передачи

Когда подходит

Нужен не просто красивый экран, а визуальная система сайта: понятная структура, несколько направлений дизайна, UI-kit, компоненты, состояния и адаптивы, по которым верстальщик сможет собрать страницы без хаоса.

Что входит

Разбираем аудиторию и конкурентов, собираем референсы, предлагаем 2-3 визуальных направления, утверждаем выбранный стиль, собираем UI-kit, главные страницы, мобильные состояния и пакет передачи в разработку.

Срок и бюджет

Оценка зависит от числа уникальных шаблонов, глубины UI-kit, количества адаптивов и сложности интерактивных блоков. Минимальный ориентир — от 80 000 ₽.

Рабочий сценарий

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

Что входит

Состав работ по этой услуге

Раздел показывает ключевые работы, результат каждого этапа и точки, которые влияют на заявки, SEO и удобство дальнейшей поддержки.

01

Арт-дирекшн

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

02

UI-kit

Фиксируем кнопки, карточки, поля, формы, состояния, типографику, цвета и отступы.

03

Макеты страниц

Делаем главную, внутренние страницы и адаптивы на основе согласованной системы.

04

Передача в разработку

Описываем анимации, ховеры, состояния, пагинацию, поведение блоков и спорные места.

Интерактивный маршрут

Как проходит работа

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

01

Вводные

Изучаем бренд, задачи, конкурентов, контент, структуру и ограничения будущей CMS.

02

Концепции

Готовим разные визуальные направления, чтобы выбрать стиль до отрисовки всех страниц.

03

UI-kit

Собираем основу компонентов, чтобы страницы были едиными и удобными для верстки.

04

Страницы

Прорабатываем desktop и mobile, состояния, контентные блоки и сценарии пользователя.

05

Handoff

Передаем разработчику структуру, комментарии, анимации, ограничения и правила сборки.

Управление после запуска

Что можно будет менять без лишней разработки

Продумываем управление сайтом заранее: тексты, карточки, формы, контакты, SEO-данные и важные настройки остаются понятными для команды после запуска.

Зоны управления

Связь с CMS В макете отмечаются блоки, которые должны редактироваться из админки.
Компоненты Повторяемые элементы описываются один раз и используются на всех страницах.
Состояния Формы, ошибки, ховеры, активные пункты и пустые состояния не забываются при передаче.
Адаптивы Мобильная версия проектируется как отдельный рабочий сценарий, а не сжимается автоматически.
Связанные проекты

Смотрите похожие задачи в проектах

В проектах видно, какие решения использовали для структуры, дизайна, управления контентом, заявок и продвижения.

ПРО ТКО Изображение проекта ALAB: АО ПРО ТКО

Под ключ

АО ПРО ТКО

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

Результатсайт + личный кабинет + архитектура

Сайт YII 2 личный кабинет поддержка
КЭС-Баскет Изображение проекта ALAB: Кэс-Баскет (новый)

Под ключ

Кэс-Баскет (новый)

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

Результатdigital-платформа для спортивного проекта

Сайт интеграции статистика поддержка
Геомир Изображение проекта ALAB: Геомир

Под ключ

Геомир

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

Результатсайт под ключ и управляемая CMS

Сайт структура CMS формы
Вопросы по услуге

Что обычно уточняют перед стартом

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

Обычно сначала достаточно 2-3 разных направления главной страницы, чтобы выбрать визуальный язык до детализации всего сайта.

Что входит в UI-kit?

Цвета, типографика, кнопки, поля, карточки, сетки, состояния, отступы, формы, навигация и правила адаптива.

Нужны ли мобильные макеты?

Да. Мобильные экраны влияют на порядок блоков, меню, формы, карточки и скорость восприятия.

Как дизайн передается верстальщику?

Через Figma и README: где анимация, ховеры, пагинация, прокрутки, состояния и редактируемые зоны.

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

Лучше нет. Реальные заголовки, офферы, услуги и CTA сильно влияют на композицию и SEO-структуру.

Обсудим
сайт
как систему

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

Заявка фиксирует страницу обращения и UTM-метки, чтобы менеджер видел контекст задачи и быстрее вернулся с ответом.