02.06.2016 Связь и телекоммуникации

Танец маленьких треугольников на Гарс Ритейл

Гарс Телеком крупный телеком-оператор, в жизни которого недавно произошло несколько изменений. Теперь он — важная часть империи Мегафона (с самым клёвым сайтом в ней, мы считаем :). И у него появился второй сайт в нашем исполнении — Гарс Ритейл для частных клиентов.

Дизайн

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

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

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

Разработка

Одна из особенностей — уже упомянутый анимированный фон, который шевелится, переливается и мягко меняет цвета при скролле.

Главная фишка сайта — это анимация, где крутятся SVG-треугольнички. Пришлось помучиться с её отладкой под разные системы. На Safari есть проблемы производительности при отображении анимации на SVG. Из-за этих проблем пришлось именно для этого браузера анимацию строить на CANVAS , а также уменьшать FPS и количество сегментов и деталей в анимации.

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

И этот сайт для частных клиентов не был бы полноценным разделом Гарса, если бы не адаптировался под любые экраны быстро и красиво. Вот так.

Проект: http://retail.garstelecom.ru/

Подробнее о процессе разработки читайте в блоге scrum-студии «Сибирикс» — http://blog.sibirix.ru/2016/06/01/gars-retail/