Анимация на 360°
для МФМК
для МФМК
Сделали крутой проект, где оборудование, как планета Земля, — тоже вертится вокруг своей оси:)
Когда вы утром вяло чистите зубы у себя на 9-м этаже, то вряд ли задумываетесь о том, как к вам поступает вода — открыли краник и мечтаете о высоком, пока она себе бежит. И в этот момент вам уж точно не до сложных технических вопросов вроде водоснабжения, водоподготовки, водоотведения, отопления, пожаротушения, обеззараживания, канализации или очистки сточных вод.
А вот МФМК до этих сфер дело есть — компания производит насосное оборудование, системы управления и инженерные решения для того, чтобы мы с вами с комфортом пользовались благами цивилизации — очищенной водой, отоплением, водоотведением и канализацией.
А вот МФМК до этих сфер дело есть — компания производит насосное оборудование, системы управления и инженерные решения для того, чтобы мы с вами с комфортом пользовались благами цивилизации — очищенной водой, отоплением, водоотведением и канализацией.
Задачи
Производители на корпоративных сайтах часто хотят рассказать обо всём и сразу: и о производстве, и об оборудовании, и о проектах реализованных, плюс впихнуть схемы, чертежи и таблицы параметров. А ещё опросные листы, отзывы и списки дилеров.
Чтобы пользователи не потерялись в потоке технической информации, сайтоделы обычно ляпают и в шапке, и в футере, и на самой странице батарею из повторяющихся ссылок на все-что-только-есть, и вуаля: всё пестрит, а найти нужное и не потеряться всё-таки сложно.
Чтобы пользователи не потерялись в потоке технической информации, сайтоделы обычно ляпают и в шапке, и в футере, и на самой странице батарею из повторяющихся ссылок на все-что-только-есть, и вуаля: всё пестрит, а найти нужное и не потеряться всё-таки сложно.
Сайт МФМК мы с Заказчиком задумали принципиально иным — на голову выше других интернет-проектов в этой сфере, — и запланировали для него ряд задач:
1
Создать каталог с понятной структурой, чтобы было легко найти и подобрать нужное оборудование.
2
Интересно показать выполненные проекты в портфолио — ведь именно они формируют доверие.
3
Отразить преимущества группы компаний (МФМК входит в 10-ку по отрасли в России, между прочим!)
4
Раскрыть детальную информацию по оборудованию: размеры, чертежи, параметры — без хаоса и по делу.
5
Предусмотреть понятную форму для возможности задать вопрос или узнать цену.
6
Разработать адаптивную версию, которая отвечала бы основным задачам:)
Дизайн
Производство — сфера суровая, и всё здесь должно быть серьёзно, даже дизайн:) Поэтому важно было изначально определиться со способом подачи информации. Заказчику нравились сайты с боковым меню, поэтому мы учли это пожелание в прототипе. Также мы решили сделать акцент на продукции в промо-блоке.
Итоговая версия главной сохранила структуру, предложенную на прото, а сам дизайн стал интереснее и круче благодаря визуальным решениям — например, необычной подаче оборудования в промо-блоке.
На основной версии меню на темной подложке, а промо на светлой. На альтернативной мы поменяли акценты, сделав наоборот:
На основной версии меню на темной подложке, а промо на светлой. На альтернативной мы поменяли акценты, сделав наоборот:
Элементы навигации заказчик восторженно принял с первого раза, а вот оттенки синего пришлось повыбирать — в итоге остановились на чётких, контрастных цветах. Также мы придали логотипу более современный вид, сделав его плоским. В итоге дизайн получился сдержанным и серьёзным, и при этом стильным и трендовым. В общем — Квадратиш. Практиш. Гуд :)
Евгений
Арт-директор
Старый логотип и его «причёсанная» версия
Варианты с другими оттенками цвета
В выборе итогового варианта участвовало человек 10 — голоса между двумя вариантами макета разделились, нравились оба :) В итоге обошлось без драки, нам удалось удачно их скомбинировать и взять от каждого лучшее :)
Татьяна
Руководитель проекта
Особое внимание мы уделили внутренним страницам. Например, для раздела «специальные решения» очень детально прорисовали все элементы, чтобы после можно было наложить анимацию:
Чтобы посетители сайта могли легко сориентироваться в информации по конкретному оборудованию, на детальной странице есть аккуратные таблички, яркие фотографии, схемы и техническая документация, которые разбиты по вкладкам:
Детальные странички референсов тоже максимально проработаны с точки зрения подачи материала: крупное фото, описание задачи, название оборудования и характеристики. Реализованные проекты особенно важны для технических специалистов, подбирающих оборудование.
Разработка
Фишка проекта — крутящиеся на 360 градусов 3D-модели установок. Да что там, крутящиеся! Их можно остановить в любой момент, повертеть вручную в поисках нужного ракурса, потыкать на плюсики с описанием характеристик — в общем, рассмотреть со всех сторон:)
На старом сайте была плитка новостей и видео — нам хотелось, чтобы обновлённая главная была интереснее. Изначально на прототипе была идея, чтобы оборудование собиралось из разных частей. Однако, посмотрев на реальные фото, мы поняли, что масштабнее будет показывать их целиком. Затем арт-директор Женя предложил крутить их на 360 градусов, и получилось еще круче:)
Татьяна
Руководитель проекта
Чтобы реализовать эту идею, мы запросили у заказчика колоссальный объём визуала — каждая модель состоит из более чем 140 изображений в различных ракурсах, которые соединяются в одно цельное. Благодаря этому модель можно крутить-вертеть во все стороны.
Андрей
Разработчик
Залипательная анимация на сайте повсюду: от прелоадера до каталога.
Из удобств для менеджеров — привязка формы «запросить цену» к конкретным моделям. Каждая отправленная форма сохраняется, предварительно сортируясь на «спам» /«не спам» — ничего не потеряется.
Опросные листы — важная вещь для производителя оборудования, и часто формы для их заполнения бывают громоздкими и негибкими. Мы аккуратно переверстали их, снабдив выпадающими списками и взаимоисключающими вариантами, от которых зависят дальнейшие пункты. И кстати, при переходах между типами оборудования ключевые заполненные поля в опросных листах не стираются. Ю — юзабилити!
Опросные листы — важная вещь для производителя оборудования, и часто формы для их заполнения бывают громоздкими и негибкими. Мы аккуратно переверстали их, снабдив выпадающими списками и взаимоисключающими вариантами, от которых зависят дальнейшие пункты. И кстати, при переходах между типами оборудования ключевые заполненные поля в опросных листах не стираются. Ю — юзабилити!
Не менее важны партнёры и их отзывы — в этом блоке можно просмотреть миниатюры референций, а также увеличить каждое официальное письмо и, что очень понравится пользователям, листать их как галерею, а не открывать каждый документ ручками:
Сайты производителей обычно более строгие и консервативные, с тоннами информации и сложными таблицами, со схемами и с кучей характеристик оборудования. Заказчики боятся и не готовы к чему-то смелому. А тут получилось все по другому. Фишки, анимации, вкусные крупные фото, специально подготовленные иконки! Получился очень стильный проект. Обязательно откройте его на планшетах и телефонах — адаптив прям крутой :)
Татьяна
Руководитель проекта
Готовый проект