Маяк помнит берег: как мы переосмыслили сайт адвоката adv26.ru

Глава первая. Прежде чем выключить свет

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

Поэтому для этой истории мы сначала сняли старый adv26.ru. Сохранили исходный HTML главной, доступные файлы оформления и полный скриншот. Отдельно зафиксировали первый экран в размере 1440 × 1000 пикселей: позже в таком же размере сняли новую сборку. Так у сравнения появилась общая точка отсчёта.

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

Архив стал первой частью визуального кейса adv26.ru со сравнением двух версий. Здесь же расскажем, как связаны решения, которые на скриншотах видны по отдельности.

Глава вторая. Маяк, который не стали убирать

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

При редизайне легко принять всё прежнее за балласт. Взять другую палитру, другой образ, другую интонацию — и получить безупречно новый сайт, который никак не связан с предыдущим. Для adv26.ru такая потеря была бы слишком большой. У проекта уже существовала метафора, способная выдержать следующую главу.

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

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

Глава третья. Красивый берег и вопрос «что дальше?»

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

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

Рядом находится представление специалиста: фотография, полное имя, практика с 2002 года и реестровый номер. Эти сведения относятся к профессиональному пути адвоката; они не определяют возраст сайта или срок работы студии над ним.

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

Глава четвёртая. Под пейзажем обнаруживается целый сайт

За первым экраном у adv26.ru уже была содержательная жизнь: сведения об адвокате, направления помощи, цены, практика, информационные материалы. История редизайна не сводилась к замене обложки. Нужно было дать всему этому материалу понятное место.

В новой навигации сохранены основные разделы: «Об адвокате», «Услуги», «Цены», «Практика», «Информация», «Контакты». У направлений помощи есть собственные страницы. У человека, который хочет сначала изучить специалиста, и у человека, который ищет конкретную услугу, появляются разные маршруты.

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

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

Глава пятая. Невидимые тропинки к старым страницам

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

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

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

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

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

Глава шестая. Тот же путь на маленьком экране

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

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

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

Глава седьмая. Где заканчивается история и начинается измерение

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

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

Сам кейс на Stav-PR проверили на ширинах 1440, 768, 390 и 320 пикселей: загрузку изображений, горизонтальное переполнение, меню, ползунок сравнения и управление с клавиатуры. Затем проверили опубликованную страницу. Эти проверки относятся к странице портфолио; они не заменяют приёмку всех страниц нового adv26.ru.

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

Эпилог. Новая глава начинается со знакомого света

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

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

Откройте кейс «adv26.ru — новая глава»: там можно сдвинуть границу между двумя версиями и рассмотреть новую главную целиком. А если история похожа на ситуацию вашего сайта, начните с короткого описания задачи — расскажите, что хотите сохранить и что должно измениться.