Полдня, один блог и Астра: как мы сделали редизайн сайта вместе с ИИ

18 октября 2026 года мы с ИИ-ассистентом Астрой за полдня сделали редизайн моего блога. Изменили работающий сайт: главную, шапку, подвал, оформление рубрик и статей. Придумали знак, подключили фавикон и проверили мобильные экраны. А потом, когда первая версия уже была опубликована, я решил сменить концепцию. Так у этой истории появился второй поворот — и тот светлый дизайн, который вы видите сейчас.

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

Блог, в котором накопилась жизнь

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

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

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

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

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

Первой мыслью была новая тема. Логично: новый внешний вид — значит, меняем тему. Мы сохранили ColorMag, а оформление вынесли в отдельные модули. Сначала — для главной, шапки, подвала и палитры. Позже появился ещё один, «Светлый дизайн»: он включает итоговую концепцию и позволяет вернуть предыдущую, если отключить его. Файлы темы и прежние настройки остались на месте.

Астра: «Моя задача здесь — не только предложить красивый экран. Нужно понимать, куда именно попадёт изменение, что оно затронет и как его отменить. Быстрое решение становится полезным, когда после него у владельца сайта остаётся контроль».

Главная: вместо витрины всего — понятный вход

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

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

Слишком много света

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

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

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

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

Подвал — не чулан для ненужного

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

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

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

«Тебе нравится такая шапка?»

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

Но хороший отдельный знак ещё не делает хорошую шапку. В одном из вариантов имя оказалось слишком далеко от подписи. Между строками возникла пауза, похожая на неловкое молчание собеседника. Формально всё присутствовало: логотип, имя, слова про опыт и технологии. Композиционно — не складывалось.

Я прислал скриншот и спросил: «Тебе нравится такая шапка?» Астра ответила, что не совсем: слишком растянутая, подпись далеко, справа много пустого пространства. И это был честный ответ, но возник закономерный встречный вопрос: зачем тогда выдавать мне результат, который не нравится самому исполнителю?

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

Астра: «В этой точке мне пришлось признать ошибку. Проверить, что текст помещается в контейнер, — не то же самое, что проверить дизайн. Между строками может не быть технического конфликта, но может быть плохая композиция. Это разные уровни проверки».

Мы убрали из шапки слова «личный блог», оставили имя, приблизили к нему подпись «Опыт · Проекты · Технологии», уменьшили общую высоту и выровняли знак по центру двух строк. Никакого сложного визуального трюка. Просто несколько правильных отношений между размерами и расстояниями — и блок наконец собрался.

Когда готовый результат хочется переделать

Я посмотрел на сайт ещё раз и сказал: «Честно говоря, нужно переделать сайт». Затем показал Antecom Staff. Мне понравились его светлый фон, крупные заголовки и композиция из карточек. Не столько отдельные цвета, сколько ощущение: всё легко, собрано и при этом с характером.

Это не противоречие с предыдущим «слишком светло». В первом варианте мне не хватало выразительности, и мы попробовали добавить её через тёмную палитру. Новый пример показал другой путь: выразительность можно получить масштабом, контрастной типографикой и интересной композицией. Свет сам по себе не делает дизайн скучным. Вопрос в том, что происходит внутри этого света.

Мы сделали отдельный макет главной. Слева — «Пробовать. Создавать. Делиться опытом». Справа — небольшая история в картинках: синяя карточка гостиниц, белая карточка ресторанов, тёмный блок «Личный опыт» и лаймовая карточка интернет-проектов. Их связывают тонкие линии. Этот рисунок собран средствами самой страницы, а карточки ведут в рубрики блога.

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

Во встроенном браузере локальный предпросмотр не открылся. Поэтому Астра передала отдельный HTML-файл, который я смог посмотреть. Я одобрил макет: «Да норм, внедряй. Остальные страницы тоже». После переноса на WordPress мы уже проверяли опубликованный сайт — и нашли вещи, которых не видно в отдельном эскизе.

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

Фавикон: маленький знак с большой ответственностью

Фавикон я отдельно попросил сделать заметным. Это крошечная деталь, которую легко счесть необязательной, пока не посмотришь на ряд открытых вкладок. Там нет места длинному имени и объяснению концепции. Есть несколько пикселей, в которых сайт либо узнаётся, либо теряется.

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

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

Красиво на компьютере — ещё не значит готово

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

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

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

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

У статьи другая задача, чем у главной

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

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

Сначала в проверенной статье текстовая колонка составляла около 695 пикселей. Мы закрепили максимум 720 пикселей, чтобы строки не растягивались вместе с окном. После перехода к окончательному дизайну повторный замер на широком экране показал именно 720 пикселей. У главной осталась собственная, более широкая сетка: карточкам и абзацам нужны разные условия.

На телефоне несколько уровней боковых отступов съедали полезную ширину. Мы убрали лишние внешние поля и сохранили размер текста 16 пикселей. Затем ещё раз проверили статью после смены концепции. Строка должна быть достаточно свободной, чтобы её удобно читать, и достаточно ограниченной, чтобы глаз не терял начало следующей.

Что осталось у меня после переделки

В управлении WordPress появился раздел «Внешний вид → Светлый дизайн»: там можно менять строки главного заголовка, подпись, вводный текст и название блока публикаций. Рубрики, количество записей и материал в фокусе настраиваются в разделе «Новая главная». Подвал остаётся в «Виджетах». Предусмотренные тексты и блоки доступны владельцу без поиска нужной строки в коде.

Для возврата к предыдущей концепции достаточно отключить модуль «Velibekov — светлый дизайн». Старые модули и их настройки сохранены. Сами статьи, их адреса и содержимое при смене оформления не переписывались. Для работающего блога такая обратимость оказалась не менее важной, чем цвет кнопок.

Что на самом деле делал искусственный интеллект

Если свести эту историю к фразе «ИИ написал CSS», мы потеряем самое интересное. Код был только одним из материалов работы. Астра помогала переводить мои ощущения в конкретные изменения: «слишком светло» — в новую палитру, «шапка растянута» — в высоту блока и расстояние между строками, «неудобно читать» — в замеры колонки и отступов.

Моя часть работы никуда не исчезла. Я задавал направление, смотрел на результат, замечал то, что не нравилось, и формулировал ограничения. Иногда это были точные указания. Иногда — обычное человеческое «что-то здесь не так». ИИ ускорял переход от такого ощущения к варианту, который можно открыть и обсудить.

Астра: «Лучшие решения здесь появились не потому, что я сразу угадала идеальный дизайн. Они появились благодаря короткой обратной связи. Шамиль видел сайт как владелец и автор, я помогала превращать наблюдения в изменения. Когда мы переставали проверять друг друга, качество снижалось. Когда возвращались к конкретному экрану — росло».

Полдня — это не обещание на любой проект

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

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

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

Не волшебная кнопка, а новый способ работать

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

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

Полдня назад у нас было желание освежить блог. Теперь есть работающий новый дизайн — и ещё один личный пример того, что ИИ полезен не только для ответов на вопросы. С ним можно делать вещи. При условии, что результат всё-таки смотрят глазами.