Компания может обратиться из-за устаревшего вида сайта. Но при изучении часто обнаруживаются более глубокие проблемы: продукт изменился, навигация запуталась, контент не отражает бизнес, а технологии усложняют обычные обновления.
В Brutelo Studio мы сначала выясняем, что перестало работать и чего должен достичь новый сайт. Только потом определяем структуру, объём, технологии и творческое направление.
В статье расскажем о нашем процессе редизайна, каждом его этапе и подготовке компании к проекту.
Прежде чем делать дизайн, определяем задачу
Один из первых наших вопросов:
«Что текущий сайт мешает делать вашему бизнесу?»
Или проще:
«Что перестало работать и почему вы задумались о редизайне?»
У каждой компании свой ответ. Например:
Сайт больше не отражает зрелость продукта.
Посетителям сложно понять ценность предложения или различия услуг.
Сайт медленно загружается, снижая удобство и конверсию.
Компания выросла, а прежняя структура устарела или плохо масштабируется.
Бизнес проходит ребрендинг, но сайт по-прежнему отражает старое направление.
Иногда главная проблема вообще не в сайте.
Низкую конверсию могут вызывать неясное позиционирование, слабое предложение, неподходящий трафик или неэффективные продажи. Без изучения причин можно получить красивый сайт без улучшения бизнес-результата.
Поэтому первый этап — понять ситуацию и определить задачи, которые редизайн действительно способен решить.
Наш процесс редизайна
Точный объём зависит от проекта, но большинство редизайнов проходят пять этапов:
Исследование и аудит
UX и прототипирование
UI-дизайн и анимация
Разработка и интеграция CMS
Тестирование и запуск
Этапы связаны: исследование влияет на карту сайта, карта — на контент, контент — на макеты, а визуальная система — на фронтенд и требования к CMS.
Если рассматривать этапы изолированно, позже возникают несоответствия.
Этап 1. Исследование и аудит
Изучаем сайт, продукт, бизнес-модель, конкурентов, контент, аналитику и технические ограничения.
Цель — сохранить работающие решения и улучшить слабые, а не раскритиковать всё существующее.
Страницы могут уже привлекать ценный органический трафик, а сценарии, контент и привычная навигация — быть полезными. Заменять их без оснований рискованно: можно создать новые проблемы.
Обычно мы изучаем:
Цели бизнеса и позиционирование
Основные аудитории
Текущую структуру сайта
Качество и объём контента
Поведение пользователей и пути к конверсии
Видимость в поиске
Техническую производительность
Ограничения CMS
Сторонние интеграции
Внутренние рабочие процессы
К концу исследования понятно, что сохранить, что изменить и насколько масштабным должен быть редизайн.
Этап 2. UX и прототипирование
Определив проблемы и цели, выстраиваем сайт вокруг потребностей пользователей, а не внутренней структуры компании.
Определяем:
Основные аудитории
Основные пользовательские пути
Карту сайта
Навигацию
Цели страниц
Иерархию контента
Пути к целевому действию
Связи между продуктами и услугами
Для небольшого сайта этап может быть простым. Для корпоративной или SaaS-платформы потребуется упорядочить годы контента по продуктам, рынкам, регионам и аудиториям.
Оцениваем работу по уникальным шаблонам, сценариям, требованиям к контенту и технической сложности.
Корпоративный сайт из 30 страниц на нескольких шаблонах может быть проще пятистраничного проекта, где каждая страница уникальна и содержит сложные взаимодействия.
Прототипы определяют структуру ключевых страниц до появления финального визуального стиля.
На этом этапе решаем:
Что пользователь должен понять первым
Сколько информации нужно на странице
Где разместить призывы к действию
Какие преимущества продукта объяснить
Где нужны отзывы и кейсы
Как пользователь переходит между разделами
Макеты с условным текстом могут казаться быстрым решением, но приводят к переделкам: короткого абзаца может оказаться недостаточно для объяснения функций, аудиторий и преимуществ продукта.
Необязательно завершать все тексты до дизайна, но ключевые сообщения, иерархия и примерный объём должны быть понятны.
В прототипе проще проверять идеи: переставить информацию быстрее, чем переделывать готовый интерфейс или код компонентов.
В сложных проектах создаём кликабельные прототипы и проверяем важные сценарии до детального визуального дизайна.
Этап 3. UI-дизайн и анимация
После согласования структуры определяем внешний вид и характер взаимодействия.
Начинаем с одной-двух ключевых страниц, содержащих главные элементы системы. Это позволяет исследовать типографику, цвет, изображения, композицию, компоненты и анимацию, не рисуя сразу весь сайт.
Первая концепция задаёт направление для обсуждения и доработок. В проектах с фиксированным объёмом число итераций определяем в предложении. Просим клиентов делиться референсами, предпочтениями и ясной обратной связью. Кто-то активно участвует в творческом процессе, кто-то даёт больше свободы в рамках целей.
У анимации должна быть цель: направлять внимание, объяснять продукт, связывать разделы или давать отклик на действие. Движение без учёта удобства и скорости обычно лишь утяжеляет сайт.
Этап 4. Разработка и интеграция CMS
После утверждения визуальной системы и адаптивных макетов начинается разработка. Технологии выбираем под реальные требования: небольшому сайту, многоязычной корпоративной платформе и интерактивному проекту нужна разная архитектура.
Разработка может включать:
Адаптивный фронтенд
Индивидуальную анимацию и взаимодействия
Настройку CMS
Разработка бэкенда
Формы и интеграцию CRM
Аналитику и отслеживание событий
Локализацию
Поиск
Перенос контента
Сторонние API
Инфраструктуру запуска
Для индивидуальных проектов используем, например, Astro или Next.js, GSAP и headless CMS Strapi. Система управления — часть продукта: если маркетинговая команда не может удобно работать с сайтом, внешней красоты недостаточно. Редакторы должны обновлять контент без поломок вёрстки и постоянной помощи разработчиков.
Этап 5. Тестирование и запуск
Проверяем сайт целиком, а не только отдельные страницы.
Перед запуском проверяем:
Адаптивные макеты
Совместимость с браузерами
Навигацию
Формы
Работу CMS
Интеграции
События аналитики
Производительность
Доступность
Метаданные
Перенаправления
Настройки индексации
Тестировать нужно с реальным контентом. Длинные заголовки, переводы, нестандартные пропорции изображений и отсутствующие материалы выявляют проблемы, незаметные в аккуратных макетах.
SEO-миграцию планируем заранее: сопоставляем важные старые страницы с новыми адресами, готовим перенаправления, проверяем метаданные, сканирование и индексацию.
Запуск — управляемый технический процесс. До публикации проверяем резервные копии, настройки, формы, аналитику, перенаправления и интеграции. Сразу после запуска повторно тестируем главные сценарии на рабочем домене.
Для крупных платформ поэтапный запуск может быть безопаснее одновременного перевода всех пользователей.
Как процесс зависит от проекта
Основные этапы сохраняются, но акценты зависят от исходной ситуации, целей бизнеса и технических требований.
Punto Pago: от продукта к цифровой экосистеме
В начале сотрудничества Punto Pago была прежде всего сервисом коммунальных платежей. Превращение в суперприложение с картами, кредитами, переводами и маркетплейсом требовало развития всего цифрового присутствия.
Сайт нельзя было обновить изолированно. Мы работали над трансформацией бренда, продуктовой стратегией, мобильным приложением и визуальной системой для растущей экосистемы.
Здесь исследование выходит за рамки аудита сайта: нужно понять развитие продукта, связи услуг и способы представить их как единый опыт.
FIND Real Estate: создаём бренд и платформу вместе
У FIND были другие исходные условия. Проект объединял айдентику, UX/UI и разработку масштабируемой платформы недвижимости.
Нужно было упростить поиск в большом меняющемся каталоге: просмотр, фильтрацию и сравнение объектов для покупателей, продавцов, арендаторов и профессионалов рынка.
Поскольку бренд и платформа создавались вместе, позиционирование, навигация, визуальный язык и технологии развивались как части единой системы.
Оба проекта прошли общий процесс, но с разными акцентами: Punto Pago требовала трансформации существующей экосистемы, FIND — создания бренда и платформы с нуля.
Поэтому мы не используем совершенно одинаковый сценарий для всех редизайнов. Этапы похожи, но объём и приоритеты определяют текущая ситуация и цели бизнеса.
Сколько времени занимает редизайн?
Точечный редизайн занимает несколько недель, индивидуальный корпоративный или SaaS-сайт — несколько месяцев, крупная платформа — полгода и больше.
| Тип проекта | Ориентировочные сроки |
|---|---|
| Точечный редизайн | 4–6 недель |
| Небольшой сайт с индивидуальным дизайном | 6–8 недель |
| Корпоративный или SaaS-сайт | 8–12 недель |
| Сложная корпоративная платформа | 4–6 месяцев и более |
Это ориентиры, а не фиксированное расписание.
Сроки зависят и от готовности клиента предоставлять контент, собирать обратную связь и согласовывать решения. Задержка согласования влияет на проект не меньше дополнительной разработки.
Некоторые этапы идут параллельно: разработка согласованных компонентов может начаться до завершения второстепенных страниц, а контент и медиаматериалы — готовиться одновременно с UX и UI.
Запуск — не конец работы
Публикация — важный этап, но не окончательная мера успеха.
После запуска сравниваем показатели с целями исследования: конверсию, качество обращений, видимость в поиске, скорость, поведение пользователей и удобство работы с CMS.
Первые недели реального использования могут показать возможности, незаметные во время дизайна и тестирования.
На отдельной странице может потребоваться более ясный текст, навигацией могут пользоваться иначе, а маркетинговая команда найдёт улучшения для CMS.
Эти наблюдения становятся планом приоритетных доработок, а не поводом заново переделывать весь сайт.
Сильные цифровые платформы развиваются после запуска через небольшие улучшения, основанные на данных.
Частые вопросы
Сколько времени занимает редизайн?
Точечный редизайн занимает около 4–6 недель. Небольшой индивидуальный сайт — полтора-два месяца. Корпоративные и SaaS-сайты — два-три месяца, сложные платформы — от четырёх месяцев.
Нужно ли готовить контент до дизайна?
Ключевые сообщения, иерархия и примерный объём текста должны быть определены до детального визуального дизайна. Тексты могут дорабатываться, но откладывание всего контента на конец обычно вызывает задержки и переделки.
Входит ли разработка в редизайн?
Не всегда. Brutelo Studio может вести проект от исследования до фронтенда, CMS, тестирования и запуска. Если у клиента есть разработчики, можем ограничиться стратегией и дизайном. Включённые этапы всегда указаны в предложении.
Может ли редизайн повлиять на SEO?
Да. Изменения адресов, навигации и контента без плана миграции могут снизить видимость. Важные страницы нужно определить заранее, подготовить перенаправления, метаданные и внутренние ссылки.
