Вторая версия сайта компании «Кроми»

«Создание вау-эффекта в каждом пикселе» — девиз работы команды Студии над новым проектом для Cromi.

О компании

Компания Cromi специализируется на продаже и аренде оборудования для проведения экскурсионных и деловых мероприятий.

Основная целевая аудитория компании может быть поделена на 2 большие группы:

1. компании, покупающие оборудование;
2. компании, берущие необходимое им оборудование в аренду для проведения конкретного мероприятия. 

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

Было принято решение разнести аспекты работы на три разных сайта, каждый из которых фокусируется на предоставлении подробной информации о своем направлении продажи/аренды:

1. cromi.ru — продажа оборудования;
2. cromi.rent — аренда оборудования;
3. radioguide.rent — аренда радиогидов.

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

Перед нашей командой были поставлены следующие задачи:

1. Разработка нового дизайна, отражающего стиль компании и соответствующего современным трендам;
2. Отрисовка 3Д-моделей для главных направлений продажи/аренды (радиогиды и кабины переводчиков);
3. Разработка единого центра управления тремя сайтами — новой административной панели;
4. Оптимизация страниц сайта.

Дизайн

Лучший среди лучших

Первым этапом нашей работы над сайтом стало обсуждение и согласование структуры новых сайтов. 

Дизайн было решено переделать полностью — для поиска наиболее удачного решения мы провели небольшой дизайн-баттл среди дизайнеров нашей Студии. Каждый предложил свое видение нескольких блоков Главной страницы. Единственными требованиями стали: сохранение корпоративного цвета компании и фокус на «нешаблонности».
 
Мы с дизайнерами договорились, что они не будут обсуждать свои идеи и наработки друг с другом, чтобы каждое видение было по-своему уникальным.
 
Например, варианты первого экрана Главной страницы хоть и содержат одну и ту же информацию, внешне сильно отличаются.

К блоку с карточками предлагаемой продукции дизайнеры тоже подошли с креативом:

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

• сохранили тёмно-фиолетовый фон;
• добавили звёздочки на всем сайте, 
• для блоков на странице поддерживается «воздушность», они как будто парят в воздухе.

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

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

• Прозрачные карточки и баннеры, подсвеченные градиентами;
• Стеклянные иконки и блоки информации, реагирующие на курсор;
• Небольшие анимации по всему сайту:
• «Cromiвоз» на странице «Доставка оборудования»;
• Чашка кофе, заманивающая посетить офис компании; 
• Весы, на которых балансируют юр. и физ. лица со страницы «Оплата» и многие другие;
• Блок, рассказывающий о принципе работы оборудования по наведению курсора.

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

Больше интерактива 

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

Несколько примеров интерактивных блоков на сайте:

• В выпадающем меню «Продукция» в шапке сайта для каждого направления продажи была разработана своя анимация;

• Интерактивная карта в портфолио с возможность отфильтровать статьи и новости по геолокации;
• На карточках портфолио при наведении появляется информация об использованном оборудовании.

Кромус&Ко.

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

Созвездие рупора, так похожее на ковш Большой медведицы, вдохновило дизайнера на отрисовку Кромика — маскота-медведицы.

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

ЗД-модели

Для оборудования «Радиогиды» и «Кабины переводчиков» нашим 3Д-дизайнером были отрисованы модели и подготовлено 2 варианта их использования:

1. Анимированный 3Д-ролик с демонстрацией конструкции и основной логики работы;
2. Интерактивная модель, взаимодействие с которой происходит по движению курсора.

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

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

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

Перепробовав несколько вариантов, в итоге было решено сделать ретопологию — то есть сократить количество полигонов, не меняя форму модели — и «запечь» все текстуры в единый PBR-материал. 

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

Управление сайтом

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

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

Свобода творчества

Контент на сайте Cromi не следует единому шаблону (текст → картинка → текст): в админ. панели добавлена возможность заполнять страницы максимально гибко.

Мы подготовили большое количество типов блоков для контента для максимальной свободы при оформлении страницы. Это позволило оформить страницы интересными материалами разного формата.

Конструктор страниц

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

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

Легкость в управлении

Laravel также позволяет максимально кастомизировать функционал админ. панели. Мы сделали панель управления сайтами Cromi максимально удобной в навигации: 

Для полей подобрали понятные названия и добавили подсказки, чтобы сразу было очевидно, какие данные вводить в это поле и где они будут использоваться;

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

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

Команда Студии учла все пожелания заказчика по структуре и визуальным решениям и кропотливо работала над воплощением всего задуманного в реальность.

При просмотре вашего сайта клиенты не охают от восторга? 

Тогда мы идем к вам.