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

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

От€600за проект

  • 5пользователей находят около 80 % проблем
  • 1-2 нед.до кликабельного прототипа
  • 2 кругаправок входят в цену дизайна
  • €0за изменение, пока это макет

UI-дизайн это готовые экраны сайта или приложения: цвета, шрифты, кнопки, формы и их состояния на телефоне и компьютере. Дизайн экранов стоит от €1 000, дизайн-система от €1 200. Каждый экран уходит со всеми состояниями, поэтому разработчики собирают его один раз и правильно.

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

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

Компоненты рисуем в Figma и собираем в коде в одной команде, поэтому готовый сайт выглядит как дизайн.

Компоненты рисуем в Figma и собираем в коде в одной команде, поэтому готовый сайт выглядит как дизайн.

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

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

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

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

Все услуги этой категории по-людски

  • Детальный дизайн

    Экраны с настоящим контентом, которые можно сразу верстать.

    Коротко Детальные экраны, готовые к разработке: реальный контент, реальные состояния, светлая и тёмная темы, крайние случаи учтены. В UI/UX-дизайне разработчики получают спецификации вместо догадок.

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

    Что ты получишьГотовые экраны в светлой и тёмной теме, с состояниями, крайними случаями и спецификациями размеров, цветов и поведения. Плюс экспортированные ассеты и исходный файл в Figma, который остаётся у тебя. Юзабилити-тестирование покажет, где люди спотыкаются, до того как это увидят клиенты.

    Что входит в цену

    • Реальный контент и настоящая длина текста
    • Светлая и тёмная тема
    • Крайние случаи закрыты в макете
    • Каждый размер в спецификации

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

    Цвета, шрифты и компоненты в одном месте для любого экрана.

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

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

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

    Что входит в цену

    • Токены вместо зашитых значений
    • Новый экран за часы
    • Figma и код синхронизированы
    • Правила, что когда использовать

    Редизайн

    Скажем честно, хватит ли нового вида или нужна перестройка.

    Коротко Фейслифт или полная перестройка: скажем прямо, что из этого тебе нужно, и подкрепим это UX-аудитом. Дальше обновляем интерфейс, не ломая привычки, на которые опираются твои пользователи.

    Как мы работаемСначала по UX-аудиту и данным смотрим, что люди на сайте реально делают, какие страницы приносят заявки и где они теряются. По этим данным говорим, нужен тебе новый внешний вид или полная перестройка. Обновляем по частям и сверяем адреса один к одному.

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

    Что входит в цену

    • Честно: фейслифт или перестройка
    • Основано на UX-аудите и данных
    • Бережёт привычки постоянных пользователей
    • Редиректы один к одному: позиции сохраняются

    Входит в комплект

    Это не заказывают отдельно: оно входит в любую работу, и делаем это мы.

    Библиотека компонентов

    Дизайн-система на практике: задокументированные компоненты в Figma и в коде, которые не расходятся друг с другом. Разработчики перестают собирать одну и ту же кнопку пятью разными способами.

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

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

    • Те же компоненты в Figma и коде
    • Прописаны варианты и состояния
    • Демо-страница для проверки
    • Процесс добавления новых компонентов

    Руководство по стилю

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

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

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

    • Понятно тем, кто не дизайнер
    • У каждого правила пример правильно и неправильно
    • Готовые шаблоны и экспорты
    • Качество держится и без нас

    Адаптивный дизайн

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

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

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

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

    Технологии

    Знакомо?

    Пётр Петровпервый звонок
    1. Сайт выглядит как в 2015-м, и отправлять его стыдно

    2. Устаревший вид подрывает доверие раньше, чем человек прочтёт первое предложение. Строим редизайн на том, что на сайте уже работает, и подтягиваем внешний вид к тому, какая компания сейчас.

    3. Каждая страница выглядит немного по-своему

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

    5. С телефона сайтом почти невозможно пользоваться

    6. Раскладка с компьютера, ужатая до телефона, ломается. Проектируем сначала под телефон, с кнопками под большой палец и читаемым шрифтом, а для больших экранов раскладку расширяем.

    7. Разработчики собрали не так, как в макете

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

    Похоже на тебя?

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

    Люди уходят. Причину не знаю

    Посетителей в месяц2 000
    Сколько посетителей покупают1,5 %
    Средний заказ120 €

    Чтобы проверка UI/UX окупилась за 3 месяца, хватит

    +8,3 % к конверсии

    Сейчас сайт приносит около 3 600 € в месяц: 2 000 посетителей, из них 1,5 % покупают по 120 €. Аудит UI/UX обычно стоит 900 €.

    Цена «обычно» из прайса студии. Выручка без учёта маржи. Это порог окупаемости: рост конверсии заранее никто не гарантирует.

    Строю что-то с нуля

    Бюджет на разработку20 000 €
    Сколько экранов, по-твоему, придётся переделать25 %

    Под риском переделки после запуска

    5 000 € из бюджета

    Переделать 25 % экранов после запуска значит заплатить ещё 5 000 € из 20 000 €. Кликабельный прототип обычно стоит 1 200 €, и эти правки делаются в нём до кода.

    Долю переделок задаёшь ты. Цена прототипа «обычно» из прайса студии.

    Продукт расползся в разнобой

    Сколько человек делают интерфейс4
    Часов в неделю у каждого на подгонку экранов3 ч
    Сколько стоит твой час30 €

    Разнобой обходится в

    1 559 € в месяц

    4 человека по 3 ч в неделю по 30 € в час. Дизайн-система обычно стоит 2 650 € и окупится за 1,7 месяца.

    Часы и ставку задаёшь ты. Оценка сверху: считаем, что система снимает подгонку целиком. Цена «обычно» из прайса студии.

    Купить шаблон за пару десятков евро?

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

    Когда хватит шаблона

    • Нужна простая презентация на несколько месяцев, пока ты разгоняешься
    • Контент ложится в шаблон как есть, без правок раскладки
    • У бренда пока нет своего визуального стиля, на который надо опираться
    • Тебя не смущает, что так же выглядят сотни других сайтов

    Когда он начнёт тормозить

    • Каждая правка раскладки превращается в борьбу с чужим кодом
    • Шаблон тянет десятки скриптов и эффектов, которые замедляют сайт
    • Новые функции, например калькулятор или бронирование, в него не встают
    • Конкуренты выглядят так же, потому что купили тот же шаблон

    От задачи к экранам, готовым к коду

    1. Знаешь, что проектируем

      Созвон и материалы

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

    2. Видишь, как это будет выглядеть

      Визуальное направление

      На двух-трёх ключевых экранах показываем направление: шрифты, цвета, ритм. Решаем на настоящем контенте, мудборду такое не под силу.

    3. У тебя весь дизайн

      Экраны и состояния

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

    4. У каждой детали есть правила

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

      Вытаскиваем из экранов компоненты и токены: цвета, шрифты, отступы, тени. Новая страница собирается из готовых деталей.

    5. Дизайн сидит как надо

      Проверка и правки

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

    6. Экраны готовы

      Передача или разработка

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

    Сколько стоит UI/UX-дизайн

    Дизайн экранов от €1 000, дизайн-система от €1 200, библиотека компонентов от €600, редизайн от €1 000. Два круга правок в цене. Цена окончательная, сверху ничего не добавляется.

    Узнать цены

    Где мы это делали

    • 3Dсцена прямо в браузере, без плагинов
    • 0,10 sответ сервера, замер 8/2026

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

    Открыть кейс
    Spectrum Interactive
    Финансовое образование · 2026

    Spectrum Interactive

    • ×5посетителей из органики, год к году
    • ×20просмотров страниц, год к году
    • 100+страниц на всю группу компаний
    • 0,17 sответ сервера, замер 8/2026

    Текстильная фабрика с 1987 года. Нетканые материалы, конопляный утеплитель Konsulate™ и готовый домашний текстиль UKONO™, а сайт застрял лет на десять в прошлом.

    Открыть кейс
    Fabrika Sumy
    Текстильное производство · 2025

    Fabrika Sumy

    • 100+компаний-резидентов, от Coca-Cola до Kyivstar
    • 85 000м² цехов, офисов и складов в аренду
    • 0,26 sответ сервера, замер 8/2026

    Индустриальный парк на территории текстильной фабрики 1987 года. Сдаёт производственные, складские и офисные площади бизнесу: аренда цеха, склада или офиса, без розничных покупателей и кликов.

    Открыть кейс
    Индустриальный парк «Патриот»
    Промышленная недвижимость · 2024

    Индустриальный парк «Патриот»

    01 / 03

    Сначала факты, потом вкус

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

    О чём спрашивают чаще всего

    Что такое UI-дизайн?

    UI-дизайн (user interface) это проектирование внешнего вида экранов: раскладка, шрифты, цвета, кнопки, формы и их состояния. Он опирается на UX, который отвечает за то, как человек движется по сайту. Результат: экраны, готовые для разработчиков.

    Сколько стоит UI/UX-дизайн сайта?

    Дизайн экранов от €1 000, для обычного сайта компании около €2 450 в зависимости от числа шаблонов страниц. Дизайн-система от €1 200, редизайн от €1 000. Цену знаешь после первого созвона. Цена окончательная, сверху ничего не добавляется.

    Что такое дизайн-система и нужна ли она мне?

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

    Делаете мобильную версию?

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

    Получу исходные файлы?

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

    Когда нужен редизайн?

    Когда структура сайта работает, а вид устарел или не соответствует бренду. Если люди не находят нужное, одного внешнего вида мало, и мы начинаем с исследования. Редизайн всегда меряем до и после.

    Сколько занимает дизайн?

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

    Соберёте сайт по чужому дизайну?

    Да. Если макет готов, проходим его, дорисовываем недостающие состояния и мобильные версии и собираем. Часто находим места, где макет повёл бы себя в коде иначе, и решаем их заранее.

    Сколько кругов правок входит в цену?

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

    Расскажи о своей задаче

    Хватит пары предложений. Ответим в течение нескольких часов и предложим время для созвона.

    1. 1За пару часов: ответит человек, поделится первыми мыслями и, возможно, задаст пару вопросов.
    2. 2За пару дней: созвон на 30 минут. Бесплатно и ни к чему не обязывает.
    3. 3После звонка: смета с фиксированной ценой. Или честный ответ, что мы тебе не подходим, и совет, к кому обратиться.

    Без скриптов продаж: с тобой говорят люди, которые сами всё построят.

    Аллергия на формы? Понимаем.info@chronicles.cz+420 773 230 278

    Отправляя форму, ты соглашаешься на обработку своих данных, чтобы мы ответили на заявку. Как мы обращаемся с данными. Данные нужны только для ответа. Не продаём и в рассылку не добавляем.