Дизайн сайта КАТРАН — охранные услуги, адаптивный интерфейс и ИИ-видео

Используемые навыки Веб-анимация Веб-дизайн Графический дизайн на основе ИИ Дизайн интерфейсов Дизайн сайтов

Описание

Для группы компаний КАТРАН подготовили дизайн корпоративного сайта об охране объектов и безопасности бизнеса. В проект вошли главная, навигация по восьми направлениям, страница услуги, карточки задач и мобильные макеты. Отдельно выполнили ИИ-продакшн с металлической акулой.

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

Решение

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

Восемь направлений собрали в десктопную сетку с пиктограммами. На телефоне она превращается в вертикальный список. Для страницы охраны объектов предусмотрели вводный блок с кнопкой обращения и нумерованные карточки конкретных работ. Географию, стандарты и организацию работы выделили отдельно.

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

Образ и анимацию акулы создали с помощью Nano Banana и Kling. Свет и движение раскрывают ребристую серебристую поверхность. Это ИИ-видео поддерживает характер сайта и даёт ему узнаваемый визуальный образ.

Результат

Подготовлен комплект десктопных и мобильных макетов корпоративного сайта, дополненный ИИ-анимацией. Клиентский путь выстроен от знакомства с КАТРАНОМ к выбору направления, перечню работ и обращению.

UI/UX-дизайн помогает разобраться в услугах, а визуальный образ акулы делает презентацию компании выразительной. Результат работы команды — адаптивный дизайн сайта в Figma и материалы ИИ-продакшна для его оформления.