Как мы переделывали главную pimenov.ai: от оценки Comet до нового визуального языка

Эта статья — не абстрактный кейс про редизайн. Это живая история о том, как главная страница pimenov.ai прошла путь от внешней оценки через браузер Comet до полной переработки визуального языка, десятков правок, отдельной страницы UI Kit и запуска новой версии в прод.

В этой работе было важно не просто «сделать красивее», а собрать более ясную, взрослую и цельную главную: такую, которая одновременно помогает новому посетителю понять, кто такой Сергей Пименов, и не убивает ощущение живого интеллектуального сайта.

С чего всё началось

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

Сергей: «Я просто зашел на сайт и попросил его сделать анализ в лоб, и он дал интересное такое сообщение».

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

А вот всё, что вело к слишком шаблонному «консалтинговому лендингу», мы сознательно не стали тащить в продукт. pimenov.ai — это не безликая продающая страница. Это сайт с характером, с мышлением и с накопленным контекстом. Его нельзя было превращать просто в «закажите аудит за 90 минут».

Что именно мы решили изменить

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

Мы сформулировали несколько ключевых принципов новой версии:

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

Как шла работа

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

Сначала новый вариант вообще не жил на корне сайта. Мы вынесли его на отдельный маршрут `/home-v2/` и спокойно гоняли его там: перестраивали hero, меняли порядок блоков, возвращали кейсы в правильный формат, правили мобильную версию, убирали внутренний служебный мусор из интерфейса, выравнивали CTA, убирали кривые визуальные решения и доводили поведение на разных экранах.

Саркис: «Лучшее решение в таких задачах — не спорить с продом, а вынести новый surface на отдельный route, довести его до ума и только потом переключать на корень. Это сильно снижает риск и повышает качество».

Это была не одна правка и не два прохода. Мы несколько раз делали шаг вперёд, смотрели на результат, признавали, что что-то получилось не так, откатывали или перепридумывали. Например, некоторые CTA-сценарии сначала выглядели интересно, но ломались при реальном использовании. Некоторые блоки оказывались слишком декоративными. Некоторые решения были хороши на десктопе, но разваливались на мобильном.

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

Новый визуальный язык

Отдельно важно, что в этой работе родился не просто «новый hero». Появился новый визуальный язык сайта. Он проявился в нескольких вещах сразу:

более чистая и взрослая структура первого экрана;
реальные кейсы как основной слой доверия, а не абстрактные обещания;
более аккуратные CTA-паттерны — без случайной смеси из ярких кнопок и висящих ссылок;
спокойные link-like actions для вторичного navigation-layer;
более собранные карточки и секционные блоки;
отказ от выдуманных демонстрационных решений в пользу реальных компонентов, которые уже живут на сайте.

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

Почему появился UI Kit

После запуска новой главной возникла очень логичная идея: вынести все реальные компоненты сайта на отдельную страницу и посмотреть на них как на систему. Так родился `/ui-kit/`.

Это было важно сразу по нескольким причинам. Во-первых, стало видно, какие паттерны на сайте уже реально существуют. Во-вторых, стало проще обсуждать не абстрактные «красиво / некрасиво», а конкретные элементы: вот hero CTA, вот горизонтальная карточка статьи, вот карточка сервиса, вот нижний CTA, вот navigation-pattern. И наконец, именно через UI Kit стало понятно, что сайт можно дальше гармонизировать уже осознанно, а не точечно чинить стили на каждой странице по месту.

Сергей: «Я же не вижу, какие бывают компоненты. Я вот увидел этот сайт, как мы его в начале сделали, и с таким сайтом живу».

Очень быстро выяснилось и ещё кое-что важное: UI Kit нельзя делать как красивую демонстрашку «по мотивам». Если карточка на сайте горизонтальная — на странице-каталоге она тоже должна быть горизонтальной. Если меню вертикальное — оно и должно показываться вертикально. Любая выдумка сразу ломает смысл такой страницы. Поэтому UI Kit пришлось тоже переработать и очистить от fake-демо.

Саркис: «Настоящий UI kit для живого сайта — это не фантазия про идеальные компоненты. Это честная карта того, что уже реально существует в продукте».

Что получилось в итоге

К концу этого процесса у нас появились сразу несколько важных результатов:

новая главная была вынесена в прод и стала корнем сайта;
старая версия сохранена как fallback;
появился route `/ui-kit/` — уже как рабочий каталог реальных компонентов;
появилась отдельная страница политики обработки персональных данных и cookie-баннер;
были найдены и закрыты реальные UX-баги, которые всплывали только в ручной проверке: возвраты назад, поведение mobile menu, странные состояния CTA, несовпадения контейнеров и другие мелкие, но важные вещи.

Главное же — pimenov.ai перестал быть просто сайтом, который «как-то сложился исторически». У него теперь есть более ясная композиция, более взрослый first impression и более понятное ядро визуальной системы.

Что дальше

Новая главная — это не финальная точка, а скорее сильный checkpoint. Следующий логичный шаг — привести к тому же уровню внутренние страницы: about, services, blog, articles, knowledge, cases и вторичные интерфейсные зоны.

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

Что произошло после новой главной

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

Поэтому следующая волна работы пошла не в сторону «ещё одного редизайна», а в сторону harmonization. Мы последовательно выравнивали /about/, /services/, /cases/, /knowledge/, /blog/ и /articles/: собирали более единые секционные ритмы, приводили CTA и link-like actions к общему поведению, убирали визуальные расхождения между похожими по функции блоками и стягивали страницы в одну систему, а не в набор отдельно удачных экранов.

UI Kit стал картой реальных компонентов

Именно на этом этапе /ui-kit/ окончательно перестал быть просто удобной страницей для просмотра компонентов. Он стал рабочей картой того, из чего сайт реально собран. Не музей красивых примеров, а реальная схема живых элементов: карточек, навигационных связок, CTA-паттернов, текстовых блоков и состояний, которые уже используются в проде.

Это было важно ещё и потому, что visual harmonization нельзя удерживать в голове. Когда у сайта появляется несколько сильных разделов, нужна точка, где видно, какие компоненты действительно канонические, что можно переиспользовать, а что лучше больше не размножать. /ui-kit/ как раз стал такой точкой сборки.

Почему пришлось собирать source of truth для текстов

Дальше быстро выяснилось, что одного визуального порядка недостаточно. Даже если компоненты выровнены, сайт всё равно расползается, когда тексты живут в разных местах: что-то в коде, что-то в старых страницах, что-то в голове, что-то в разрозненных заметках. Поэтому следующим логичным шагом стало перевести текстовый слой в Notion и собрать его как единый source of truth.

Отдельно для этого появился слой shared copy — Site Copy pimenov.ai. Он нужен не как «ещё одна табличка», а как общее место для повторяющихся формулировок, навигационных подписей, служебных текстов и других фрагментов, которые не должны каждый раз заново изобретаться на соседних страницах. Когда у сайта появляется такой слой, он начинает говорить стабильнее и точнее.

Сайт как живая система

В какой-то момент это перестало быть историей только про страницы. Когда визуальный язык собран, реальные компоненты вынесены в /ui-kit/, а тексты лежат в Notion как source of truth, сайт превращается в живой контур. Его можно редактировать не через случайные точечные правки в коде, а через понятную систему: менять контент в Notion, запускать rebuild и получать обновлённый сайт без потери целостности.

И это, пожалуй, главный результат следующего этапа. pimenov.ai стал не просто аккуратнее выглядеть. Он стал лучше собран как продуктовая и редакционная среда: с новыми навигационными связками, с более цельной структурой разделов и с понятной логикой того, как сайт дальше развивать, не разваливая его на куски.

Подпись

Текст подготовлен для сайта Сергеем Пименовым и ИИ Агентом Саркисом. Сергей задавал направление, принимал решения и жёстко держал планку. Саркис переводил это в конкретные интерфейсные решения, добивал баги, собирал компоненты и доводил всё до работающего состояния.

Статья отформатирована и подготовлена к публикации агентом Мастер Контента в Notion: структурирование разделов, генерация промптов для обложки и иллюстраций, подбор тегов, slug, SEO-описания, оформление блока «По теме» и CTA.

По теме

Если вы хотите построить сайт на Notion CMS или навести порядок в визуальной системе своего проекта — давайте обсудим.