UI/UX дизайн сайта, который ведёт посетителя к заявке

Наш подход описывается тремя принципами.

1. Содержание раньше формы. Мы не рисуем блоки с «Lorem ipsum», чтобы потом втиснуть туда тексты. Сначала определяем, что именно скажет каждый блок: заголовок, аргумент, доказательство, действие. Если текстов ещё нет — пишем черновики вместе с прототипом. Так дизайн сразу строится под реальную длину заголовков и реальное количество пунктов.

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

3. Компоненты, а не картинки. Каждая кнопка, карточка или поле — компонент Figma с вариантами и состояниями. Это даёт три выгоды: сайт выглядит цельно, разработчик верстает быстрее, а новые страницы можно собирать из готовых деталей без нового дизайна.

Под капотом — собственная технология разработки и библиотека проверенных решений: типовые паттерны (карточка услуги, блок цен, FAQ, форма заявки) уже протестированы на удобство, и мы не изобретаем их каждый раз заново. Время экономится на рутине и уходит на то, что делает ваш сайт уникальным: подачу, визуальный язык, сценарии вашей ниши. Именно поэтому дизайн лендинга занимает 2–3 дня, а не две недели.

Отдельно проверяем доступность: контраст текста — не ниже уровня WCAG AA (4,5:1 для обычного текста), размер кликабельных элементов, читаемость на солнце. Это не формальность: бледно-серый текст на светлом фоне тяжело читать, особенно с телефона на солнце, — и человек просто закрывает вкладку.

Главная единица цены в дизайне — не количество страниц, а количество уникальных шаблонов. Корпоративный сайт на 30 страниц может иметь всего 5–6 шаблонов: главная, услуга, кейс, статья, контакты. Остальные страницы — те же шаблоны с другим наполнением.

Что увеличивает стоимость:

• Нет фирменного стиля. Если нет логотипа, палитры и шрифтов, их придётся создать. Логотип «Экспресс» — 2 900 ₴, «Стандарт» — 5 900 ₴, полный фирменный стиль — 14 900 ₴.
• Сложные интерфейсы. Калькуляторы, конфигураторы, личные кабинеты, фильтры каталога имеют много состояний — каждое нужно нарисовать.
• Иллюстрации и 3D. Уникальная графика вместо фото и стоковых иконок.
• Анимации. Прототипирование переходов и микровзаимодействий.
• Тексты. Если копирайтинг нужен сверх пакета — 900 ₴ за страницу.

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

Совет для сравнения предложений: просите подрядчика назвать не количество страниц, а количество шаблонов, брейкпоинтов и состояний, которые он нарисует. Две сметы «дизайн сайта на 10 страниц» могут отличаться по объёму реальной работы втрое.

Эти ошибки легко встретить и в портфолио на Behance, и на живых сайтах. Все они выглядят «стильно» — и все снижают количество заявок.

1. Абстрактный первый экран. Крупный слоган «Мы создаём будущее» на фоне туманных гор. За 3–5 секунд человек должен понять, что вы предлагаете, кому и почему стоит обратиться именно к вам.
2. Серый текст мелким шрифтом. Модно, но нечитаемо, особенно на телефоне и для людей постарше.
3. Кнопки, не похожие на кнопки. Текстовые ссылки с тонким подчёркиванием вместо чёткого призыва к действию.
4. Сначала десктоп, мобильная версия — «как получится». На смартфоне блоки просто становятся узкими и длинными, а форма оказывается на девятом экране.
5. Карусель вместо решения. Слайдер на первом экране с пятью сообщениями — признак того, что главное так никто и не выбрал. Дальше первого слайда листают немногие.
6. Стоковые фото. Улыбающиеся люди в гарнитурах не вызывают доверия. Реальные фото команды, офиса, объектов работают лучше даже с неидеальным светом.
7. Нет состояний ошибок и пустых состояний. Разработчик придумывает их сам — и в самой важной точке (форма заявки) появляется красный системный текст на английском.
8. Шесть шрифтов и десять оттенков синего. Без UI-кита каждая страница постепенно начинает жить своей жизнью.

Хотите проверить текущий сайт на эти ошибки — воспользуйтесь бесплатным аудитом сайта.

Честное сравнение трёх способов получить дизайн сайта.

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

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

Конструктор (Tilda, Wix) — отдельный случай: дизайн там ограничен возможностями платформы, а сайт привязан к её тарифам. Плюсы и минусы подробно разобрали в статье Tilda, WordPress или разработка.

Студия берёт на себя всю цепочку: структуру, тексты, дизайн, разработку, скорость и запуск. У нас цена и срок зафиксированы в договоре, а за каждый день просрочки по нашей вине вы получаете скидку 5%, до 30%. Как выбрать подрядчика — в статье как выбрать веб-студию.

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

• Figma-файл в вашей собственности. Передаём файл в ваш аккаунт Figma или в отдельный проект команды. Никаких «доступ только на просмотр».
• Страницы, разложенные по порядку. Обложка, wireframe, макеты для каждого брейкпоинта, UI-кит, прототип.
• Библиотека компонентов. Кнопки, поля, карточки, блоки с вариантами и состояниями. Новые страницы ваш дизайнер или разработчик собирает из готовых деталей.
• Спецификация. Сетка, отступы, поведение блоков между брейкпоинтами, анимации, требования к изображениям.
• Лицензии. Шрифты — из Google Fonts или с коммерческой лицензией, которую вы оформляете на себя. Фото — ваши или со стоков с разрешением на коммерческое использование. Мы всегда указываем источник каждого ресурса.

Имущественные права на дизайн переходят к вам после оплаты — это прописано в договоре. Захотите отдать макет другому разработчику — отдавайте.

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

Если разработку тоже поручаете нам, макет переходит в вёрстку без потерь: те же люди знают, как должен вести себя каждый блок, а автоматические проверки качества и скорости гарантируют PageSpeed 90+ на мобильных. Свежие визуальные тренды и что из них стоит брать — в статье тренды веб-дизайна 2026.