Дизайн-концепция · главная страница
Делаем круто с 2004 года
Новая
kartoteka.ru
Цифровой советник для безопасных решений о контрагентах: сценарии вместо каталога сервисов, инсайты вместо данных.
Заказчик
ООО «Коммерсантъ КАРТОТЕКА»
Формат работ
Дизайн-концепция и UI-макеты
Основание
ТЗ v1.0 · 25.07.2026
LOGO MARKcrt
Контекст
LOGO MARKcrt
Задача редизайна — уверенность в решении, а не доступ к данным
БизнесРост конверсии «визит → поиск компании → регистрация → оплата»; отстройка от Контур.Фокус, Rusprofile и СПАРК за счёт нового позиционирования
ПродуктПереход от каталога сервисов к навигатору принятия решений: сценарии выгоды и инсайты вместо перечня функций
ТехнологииУскорить загрузку страниц — LCP в «зелёной зоне» — и упростить саму навигацию: короче путь от входа до ответа
До первого инсайта
< 10 с
LCP страницы
< 2,5 с
Mobile first
375 px
Доступность
WCAG AA
CRTБазовые метрики снимаются на этапе 0 · ТЗ п. 1
Позиционирование и язык
LOGO MARKcrt
Термины меняем на задачи и последствия
№Было — терминСтало — задача пользователя
01Проверка аффилированностиУзнайте, кто стоит за компанией
02Анализ арбитражаПосмотрите, как компания ведёт себя в судах
03Финансовая отчётностьОцените финансовое здоровье компании
04МониторингМы предупредим, если что-то изменится
05Проверка директораУзнайте, кому вы доверяете деньги
Правило для всех заголовков сайтаЗадача или последствие, не термин
CRTПрофессиональные термины допустимы на втором уровне · ТЗ п. 3.3
Визуальная система
LOGO MARKcrt
Спокойная уверенность: один акцент и много воздуха
Цвет
Брендовый синий — только действия и акценты. Зелёный, янтарный и красный отданы статусам риска и не используются как декор.
Типографика
Onest132 400 ₽
Два семейства с полной кириллицей: гротеск для интерфейса, моноширинный — для метрик и табличных цифр.
Геометрия
Карточки 28–36px, кнопки и поля 14px, навигация — пилюли. Разделение строится на линиях 1px и подложках, а не на тенях.
Данные
Единый стиль индикаторов: бары, спарклайны, кольцо скоринга — с подписями и понятной шкалой.
CRTБез стоковых фото, стен текста и маркетинга страха · ТЗ п. 7.5
Структура главной
LOGO MARKcrt
Восемь блоков, ведущих от вопроса к оплате
01
Hero
Поиск и бейджи источников
05
Готовые проверки
Пресеты с чек-листом состава
02
Умный подбор
Задача своими словами
06
Кейсы с цифрами
Предотвращённые убытки
03
Сценарии
Шесть ситуаций из п. 4.2
07
Доверие
База, источники, клиенты
04
Демо ценности
Живой отчёт на демо-данных
08
Тарифы и CTA
Расчёт суммы на месте
Ключевое решение
Раздел «Наши сервисы» упразднён как навигация первого уровня
Пользователь не просыпается с мыслью «мне нужен сервис „Связи“». Доступ к сервисам сохранён через сценарии, меню второго уровня и футер — привычки текущих пользователей и SEO не страдают.
CRTПорядок блоков соответствует ТЗ п. 5
Блок 1 · первый экран
LOGO MARKcrt
Одно действие на экране — поиск компании
01
Заголовок-ценность «Принимайте решения на основе фактов» и поиск по ИНН, ОГРН или названию
02
Иллюстрация «25+ источников → один ответ»: карточки источников сходятся линиями в карточку компании
03
Автоподсказки сразу показывают статус — первый инсайт ещё до клика
CRTHero без тяжёлого видео: анимация — CSS и SVG · ТЗ п. 8.6
Блок 2 · что вы хотите сделать
LOGO MARKcrt
Задача словами — набор проверок в ответ
«Поставщик попросил предоплату» → четыре рекомендованные проверки с объяснением, зачем каждая.
Восемь быстрых действий — это бывший каталог сервисов, переведённый на язык задач пользователя.
CRTНе обещаем «ИИ», пока подбор работает на правилах · ТЗ п. 3.5
Блок 3 · сценарии
LOGO MARKcrt
Шесть ситуаций, где проверка спасает деньги
Перед заключением сделкиCTA «Проверить компанию»
Выбор поставщика или подрядчикаCTA «Сравнить компании»
Работа с постоянными контрагентамиCTA «Настроить мониторинг»
Банкроты, работодатель, анализ рынкаЕщё три сценария по тому же шаблонуCRTШаблон лендинга сценария собран на примере «Перед оплатой»
Блок 4 · демо ценности
LOGO MARKcrt
Инсайты вместо данных, с объяснением каждого
01Вывод, а не поле данных«Идут споры на 4,2 млн ₽» — клик раскрывает дела и источник
02Health Score объясняется факторамиФинансы, суды, связи — видно, что тянет оценку вниз
03Статус = цвет, иконка и текст«Внимание», «Риск» читаются без цветового восприятия
04Freemium-замкиТизер говорит, что́ узнает пользователь, не показывая данные
CRTТри состояния доступа проработаны в макете · ТЗ п. 8.2
Блок 8 · тарифы
LOGO MARKcrt
Два продукта рядом и интерактивные калькуляторы
Поисковая система · пакет «Бизнес»
18 300 ₽
в год за одного пользователя · переключатель месяц/год, степпер пользователей
Мониторинг
5 ₽ / мес
за контрагента · слайдер периода, объекты от 500, сумма пересчитывается сразу
CRTЦены — с действующего сайта; итоговая сетка за заказчиком · ТЗ п. 11
Внутренние страницы
LOGO MARKcrt
Выдача, карточка, лендинг и ЛК — один язык
Карточка компанииРезюме за 10 секунд · светофор инсайтов · Risk Timeline · 8 вкладок данных
Рабочее пространствоПортфели контрагентов, наблюдение, сделки в работе, лента изменений
CRTИндексируемый контент карточек сохранён · ТЗ п. 8.5
UX-требования
LOGO MARKcrt
Ограничения ТЗ отработаны в макете
ПунктТребованиеЧто сделано
8.1Mobile firstСетки перестраиваются от 375 px, таблицы скроллятся, тач-таргеты от 44 px
8.2FreemiumГость, бесплатный и платный переключаются прямо в макете
8.3СостоянияПрогресс проверки по источникам вместо спиннера, пустые состояния с подсказками
8.4ДоступностьКонтрасты приведены к AA, статусы дублируются иконкой и текстом
8.5SEOКрошки, иерархия заголовков, перелинковка «связанные компании», сервисы в футере
8.6ПроизводительностьДва шрифта с кириллическим сабсетом, без тяжёлых библиотек, анимации на CSS и SVG
Готовность к этапу 2 — макетыГлавная + 4 внутренних экрана
CRTДальше: мобильные версии, кликабельный прототип, дизайн-система · ТЗ п. 10