Редизайн сайта Albatros: обновление фирменного дизайна и улучшение UX  сайт  albatros.ru

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

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

  1. Адаптировать дизайн-макет клиента под реальные разделы и задачи проекта.
  2. Проработать вложенность и согласовать структуру, чтобы путь пользователя стал более понятным и предсказуемым.
  3. Отрисовать недостающие макеты в общей стилистике, обеспечив целостность будущего сайта.
  4. Сверстать сайт и реализовать функционал согласно утвержденным макетам и определенным пользовательским сценариям.
  5. Перенести контент на обновленные страницы и проверить корректность отображения всех материалов.
  6. Запуск сайта на основном домене и открытие его для индексации поисковыми системами
Над проектом работали:
Ведущий аккаунт-менеджер
Екатерина Яговдик
Разработчик
Алексей Журавский
Разработчик
Родион Винничук
Руководитель отдела разработки
Никита Демченков
Руководитель SEO отдела
Андрей Прокопович
Контент-менеджер
Надежда Карпович
Реализация
Этап 1. Структура и навигация

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

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

  • Собрали карту разделов и вложенностей, включая ветки каталога по типам оборудования и сервисные страницы, чтобы видеть полную картину сайта.
  • Проработали вложенность каталога, чтобы при большом количестве позиций навигация оставалась предсказуемой для пользователей и поисковых систем.
  • Отдельно выделили опорные разделы как ключевые точки входа, вокруг которых дальше выстраивались дизайн и контент.
  • Несколько раз уточняли структуру вместе с клиентом, внося правки в названия и расположение пунктов, чтобы учесть и внутреннюю логику компании, и SEO-задачи.

Структура сайта Albatros

Этап 2. Обновление страницы прайс-листа

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

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

До:


После:


Этап 3. Макет второго уровня каталога

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

Что мы сделали?
Собрали страницу, где сверху пользователь видит название и описание группы оборудования, а ниже список доступных позиций, оформленный по единому принципу. Это позволяет поддерживать порядок в каталоге и легко масштабироваться без доработки дизайна.

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


Макет второго уровня каталога «Измерительные системы объемно-массового учета»

Этап 4. Переработка карточек товаров

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

Как мы доработали карточку:

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

До:


После:


Этап 5. Доработка главной страницы

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

Что изменилось:

  • Появился отдельный блок «О компании», коротко описывающий деятельность Albatros и помогает быстрее понять направление работы.
  • Новые элементы встроили в общую композицию главной страницы, сохранив целостность визуального стиля.
  • Страница стала информативнее для новых пользователей и удобнее для тех, кто знакомится с брендом впервые.

Обновленная главная страница Albatros

Этап 6. Верстка и функционал остальных страниц

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

  • Сверстали типовые информационные и сервисные страницы (о компании, услуги, сервисные разделы, контакты) на основе утвержденных макетов и общих принципов оформления.
  • Проверили отображение контента, чтобы даже при большом объеме информации страницы оставались удобными в навигации и прочтении.
  • Настроили работу форм и других элементов, обеспечив стабильную отправку заявок и корректные переходы между разделами.
  • Провели финальный просмотр сайта как единого продукта, чтобы пользователь, начиная с любой страницы, попадал в одинаково понятную и предсказуемую среду.
Результаты работы

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

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

Отзыв клиента

Отзыв клиента Albatros


187 часов верстальщика
24 часа контент-менеджера
9 часов программиста
5 часов дизайнера
3 часа SEO-сепециалиста
Смотреть другие наши кейсы
Хочу так же!
Меня зовут .
Со мной можно связаться по телефону и эл.почте .
Меня интересует сайта .
Оставить заявку
Нажимая на кнопку "Оставить заявку",
Вы даете согласие на обработку своих персональных данных