UX/UI / прототип / дизайн-система

Дизайн сайта, который связывает содержание, пользовательские сценарии и будущую разработку

Проектируем структуру, прототипы, адаптивные макеты и систему компонентов для корпоративных сайтов, магазинов, каталогов и цифровых сервисов.

Что входит
UX/UI Прототипирование Figma Дизайн-система
Первый результат

Что будет определено на первом этапе

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

1 карта

Пользовательские сценарии

Основные аудитории, задачи, переходы и целевые действия.

1 структура

Типы страниц

Шаблоны, разделы, состояния и связи между ними.

1 прототип

Информационная иерархия

Порядок блоков, формы, карточки, таблицы и навигация.

1 направление

Визуальная концепция

Типографика, цвет, сетка, изображения и характер интерфейса.

1 система

Компоненты и состояния

Кнопки, поля, карточки, hover, focus, error и мобильные варианты.

1 план

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

Состав макетов, зависимости, этапы и критерии готовности.

Технический контроль

Как контролируем качество дизайн-проекта

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

01 CONTENT

Реальный контент

Макеты выдерживают длинные названия, цены, таблицы и разные объёмы текста.

02 SYSTEM

Система компонентов

Повторяющиеся элементы имеют единые размеры, состояния и правила использования.

03 MOBILE

Адаптивность

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

04 ACCESS

Доступность

Контраст, фокус, подписи и кликабельные области учитываются до разработки.

05 STATES

Состояния

Показываем ошибки, загрузку, пустые результаты, disabled и другие сценарии.

06 HANDOFF

Передача

Макеты, компоненты и пояснения подготовлены для однозначной реализации.

Организация работы

Чем системный дизайн отличается от набора макетов

Таблица показывает разницу между визуальной отрисовкой отдельных страниц и проектированием целостного интерфейса.

Задача Набор отдельных макетов веб-студия «Vagizov»
Старт работы

Сразу рисуется главная страница по примерам конкурентов.

Сначала определяются сценарии, структура, контент и ограничения.
Прототип

Заменяется схематичным wireframe без реальных данных.

Проверяет иерархию, содержание, формы и сложные состояния.
Компоненты

Каждая страница собирается как отдельная картинка.

Используется единая библиотека с понятными правилами.
Мобильная версия

Десктопный макет просто сжимается по ширине.

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

Разработчик сам догадывается о состояниях и поведении.

Макеты содержат состояния, размеры и пояснения к реализации.
Развитие

Новый экран создаёт ещё один визуальный вариант.

Новые страницы собираются из согласованных компонентов.
Принципы

Принципы проектирования интерфейса

Дизайн должен объяснять продукт, выдерживать реальные данные и оставаться последовательным после передачи в разработку.

Сценарий до стилистики

Сначала определяем задачу пользователя и содержание экрана.

Реальные данные

Проектируем на фактических текстах, ценах, изображениях и характеристиках.

Компонентный подход

Повторяющиеся решения объединяются в систему, а не копируются вручную.

Мобильный сценарий

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

Доступные состояния

Фокус, ошибки, контраст и кликабельные области учитываются в макетах.

Реализуемость

Решения соответствуют платформе, срокам и техническим ограничениям проекта.

Расчёт проекта

От чего зависит стоимость дизайна сайта

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

TYPE

Типы страниц

Уникальные шаблоны и различия между ними, а не общее число URL.

FLOW

Сценарии

Формы, фильтры, корзина, кабинет, роли и служебные состояния.

BRAND

Состояние бренда

Готовый брендбук или необходимость формировать визуальное направление.

CONTENT

Контент

Тексты, изображения, характеристики и сложные таблицы.

ADAPT

Адаптивные состояния

Мобильные, планшетные и нестандартные варианты интерфейса.

SUPPORT

Сопровождение

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

Форматы и ориентиры бюджета

Небольшой сайт

Дизайн Старт

140 000–220 000 ₽

Готовая структура, компактный набор экранов и базовая система компонентов.

Корпоративный проект

Дизайн Бизнес

260 000–450 000 ₽

Исследование, прототипы, адаптивы и расширенная библиотека компонентов.

В ежемесячном формате

Что входит в разработку

  • ИсследованиеПродукт, аудитория, сценарии и ограничения.
  • АрхитектураТипы страниц, переходы и состав состояний.
  • ПрототипыСодержание, иерархия, формы и управление.
  • КонцепцияТипографика, цвет, сетка и визуальный характер.
  • Дизайн-системаКомпоненты, состояния и адаптивные макеты.
  • ПередачаFigma, пояснения и сопровождение реализации.
Отдельная оценка

Что оценивается отдельно

  • Фирменный стильЛоготип, бренд-платформа, руководство и носители за пределами интерфейса.
  • КопирайтингИнтервью, сбор фактуры, написание и редактура полного содержания.
  • Фото, видео и 3DСъёмка, монтаж, моделирование, ретушь и лицензирование.
  • Сложные иллюстрацииАвторские схемы, персонажи, инфографика и наборы графики.
  • Дополнительные концепцииНезависимые визуальные направления сверх согласованного количества.
  • Расширенный авторский надзорРегулярная проверка реализации за пределами включённых итераций.
Тарифы

Тарифы на дизайн сайта

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

Компактный проект

Дизайн Старт

140 000–220 000 ₽
20–25 рабочих дней

Для ограниченной задачи или небольшого проекта с понятными исходными данными.

  • Анализ вводных
  • Прототип ключевой страницы
  • Одна визуальная концепция
  • До пяти типов экранов
  • Базовая система компонентов
  • Передача в разработку
Корпоративный сайт

Дизайн Бизнес

260 000–450 000 ₽
25–45 рабочих дней

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

  • Пользовательские сценарии
  • Прототипы основных шаблонов
  • Адаптивные макеты
  • Расширенная библиотека компонентов
  • Служебные и ошибочные состояния
  • Сопровождение передачи
Сложный интерфейс

Дизайн Система

500 000–900 000+ ₽
от 45 рабочих дней

Для большого объёма, сложной архитектуры, интеграций или нестандартных требований.

  • Глубокое исследование
  • Карта сложных сценариев
  • Многоуровневые прототипы
  • Полная дизайн-система
  • Документация компонентов
  • Авторский надзор
Состав работ

Что входит в дизайн сайта

01

Исследование задачи

Исследование задачи. Объём и способ реализации определяются после изучения задачи.

02

Информационная архитектура

Информационная архитектура. Объём и способ реализации определяются после изучения задачи.

03

Прототипы

Прототипы. Объём и способ реализации определяются после изучения задачи.

04

Визуальная концепция

Визуальная концепция. Объём и способ реализации определяются после изучения задачи.

05

Дизайн ключевых страниц

Дизайн ключевых страниц. Объём и способ реализации определяются после изучения задачи.

06

Мобильные версии

Мобильные версии. Объём и способ реализации определяются после изучения задачи.

07

UI-kit и компоненты

UI-kit и компоненты. Объём и способ реализации определяются после изучения задачи.

08

Подготовка к разработке

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

Для каких проектов

Для каких проектов подходит услуга дизайна сайта

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

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

Корпоративный сайт

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

02

Интернет-магазин

Каталог, карточка, корзина, оформление заказа и служебные состояния.

03

Сайт-каталог

Фильтры, характеристики, сравнение и запрос коммерческого предложения.

04

Landing Page

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

05

Редизайн

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

06

Цифровой сервис

Личный кабинет, роли, таблицы, статусы и сложные пользовательские сценарии.

Процесс

Как проходит проектирование дизайна сайта

01

Вводные и исследование

Изучаем продукт, аудиторию, структуру, бренд, контент и технические ограничения.

Что подготовить
02

Архитектура и прототипы

Формируем сценарии, типы страниц, содержание, формы и служебные состояния.

Состав работ
03

Визуальная концепция

Определяем типографику, цвет, сетку, изображения и характер компонентов.

Принципы
04

Дизайн-система и адаптивы

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

Контроль качества
05

Передача и сопровождение

Подготавливаем Figma, пояснения и проверяем реализацию в согласованном объёме.

Вопросы и ответы
Подбор формата

Какой объём дизайн-проекта нужен вашему сайту

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

Шаг 1 из 5 Первый вариант выбран — при необходимости измените
01Что нужно спроектировать?

Выберите ближайший по масштабу вариант.

Для старта

Что подготовить для первичной оценки

Для первичной оценки не нужны доступы. Достаточно описать продукт, состав страниц, состояние бренда и кто будет разрабатывать сайт.

Важно до старта

Границы и условия работы

Перед оценкой До оценки необходимо определить, нужен ли только дизайн или полный цикл с разработкой, контентом и запуском.
01

Разработка оценивается отдельно

HTML, CMS, программирование и интеграции не входят в дизайн автоматически.

02

Контент влияет на результат

Полный копирайтинг, интервью, фото, видео и иллюстрации имеют отдельный объём.

03

Фирменный стиль не равен UI

Логотип и брендбук могут потребовать самостоятельного этапа.

04

Изменение структуры меняет объём

Новые страницы и сценарии после утверждения прототипа оцениваются дополнительно.

05

Нужен единый ответственный

Комментарии собираются и согласуются одним представителем проекта.

06

Авторский надзор имеет границы

Количество проверок реализации фиксируется в выбранном тарифе.

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

Вопросы о дизайне сайта

Обсудить проект

Обсудим структуру и объём дизайн-проекта

Опишите продукт, страницы, состояние бренда и будущую разработку. В ответ определим этапы, состав макетов и ориентир бюджета.

Как считается стоимость
Связанные услуги

Что может понадобиться дополнительно

Четыре направления выводятся отдельным блоком и не включаются в стоимость автоматически.

Все услуги →
Веб-студия

Вёрстка по макету

Адаптивная HTML-вёрстка сайта по макету Figma: компоненты, формы, интерактивные состояния, производительность и передача в CMS или другой команде.

от 90 000 ₽ Подробнее
Веб-студия

Landing Page

Проектируем и разрабатываем Landing Page под конкретное предложение: структура, контент, индивидуальный дизайн, WordPress, формы, аналитика и интеграции.

от 140 000 ₽ Подробнее
Разработка

Сайт услуг

Проектируем и разрабатываем многостраничные сайты услуг с понятной архитектурой, индивидуальным дизайном, WordPress, аналитикой и технической подготовкой к SEO.

от 240 000 ₽ Подробнее
Разработка

Сайты на WordPress

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

от 180 000 ₽ Подробнее

Дизайн сайта как проектирование интерфейса, а не набор красивых экранов

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

Веб-студия «Vagizov» проектирует дизайн корпоративных сайтов, интернет-магазинов, каталогов, сайтов услуг и Landing Page. Мы связываем визуальную систему с архитектурой и компонентами будущего сайта. Макеты передаются не как несвязанные картинки, а как последовательная система состояний, которую можно реализовать без постоянных догадок разработчика.

Исследование задачи и вводных

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

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

Прототипирование и содержание

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

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

Визуальная концепция и дизайн-система

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

Затем формируем библиотеку компонентов: кнопки, поля, карточки, таблицы, вкладки, уведомления, модальные окна, навигацию и служебные элементы. Для компонентов описываются состояния hover, focus, active, disabled и error. Системный подход сокращает расхождения между страницами и упрощает дальнейшее развитие.

Адаптивные версии и доступность

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

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

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

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

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

Контент и материалы

Качество интерфейса зависит от содержания. Если тексты, фотографии и характеристики не готовы, фиксируем требования к ним и используем реалистичные рабочие данные. Написание полного текста, интервью, фотосъёмка, 3D и сложные иллюстрации оцениваются отдельно, поскольку требуют самостоятельного производства.

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

Этапы работы над дизайном

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

На каждом этапе фиксируем результат и критерии приёмки. Комментарии собираются пакетно от ответственного лица, чтобы исключить противоречивые правки. После утверждения этапа изменения исходных вводных могут потребовать переоценки сроков и объёма.

Стоимость дизайна сайта

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

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