Главная » Блоги Экспертов И ИТ-Компаний » Имиджевый сайт для рекламного агентства Jumpica
Делать проекты так, чтобы ими гордиться! 9 лет назад

Имиджевый сайт для рекламного агентства Jumpica

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

Если вы когда-нибудь катались на ватрушках Газфонда, кутались в пледы МТС или пили чай из кружек РЕН ТВ, знайте, что все эти классные штуки заказаны в Jumpica. Jumpica — это рекламное агентство, которое работает со многими известными брендами и делает для них крутую сувенирку, текстиль, полиграфию и POSM. Ребята накопили много креативных кейсов и решили обновить сайт, чтобы он соответствовал уровню и стилю их работ.

Задача:

Cоздать имиджевый корпоративный сайт для рекламного агентства Jumpica.

Решение:

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

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

3d-анимации

Каждая анимация — это не дорогущая тяжелейшая 3d-модель, а множество png. Порядка 120 штук. Все они загружены на сайт. Все скрыты, кроме первой. При наведении курсора на 3d анимацию, png-картинки покадрово переключаются, и фигура вращается. Если бы мы делали обычные 3d-модели, сайт был бы в разы тяжелее, а разработка обошлась бы заказчику значительно дороже. Мы же подобрали оптимальную технологию для выполнения задачи и на выходе не только получили легкий сайт, но и сэкономили бюджет заказчика.

Скролл

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

Каждая цифра здесь — это png, к которой применен фильтр. Когда экран проскроллен до определенного значения, фильтр отключается (все значения проставлены в хэш-таблице). Так и происходит смена цвета.

Сама линия — это 2 svg-картинки: одна серая, другая оранжевая. Оранжевая расположена поверх серой. У svg есть атрибут path («путь» рисования линии) и свойство stroke-dashoffset (смещение изображения). Это свойство и меняет цвет линии, в зависимости от того, насколько пройден «путь».

Состояние hover

Состояние hover — это состояние ссылки при наведении на неё курсором. Оно дает нам понять, что мы нацелились на ссылку и ссылка готова к клику. Мы искали нестандартные динамичные решения для состояния hover на сайте и придумали несколько интересных вариантов.

В блоке с услугами

Блок с услугами состоит из четырех частей: Полиграфия, POS материалы, Текстиль, Сувениры. Все части — одного размера. Точно такого же размера мы сделали отдельный элемент — оранжевую плашку. Она всегда находится в блоке с услугами и преследует курсор. Наводишь курсор на одну из четырех частей блока — сразу же рассчитываются координаты её левого нижнего угла и плашка встает в это положение.

В блоке «Что входит в услугу»

Здесь каждая ссылка, при наведении на неё курсором, сразу с двух сторон подчеркивается оранжевым пунктиром, который сходится в центре. На самом деле, здесь две линии: одна — оранжевый пунктир, другая — белая. Белая располагается поверх оранжевого пунктира и сливается с фоном. Изначально, ширина обеих линий — 100%, поэтому мы видим белую и не видим пунктир. При наведении на строку курсором, ширина белой линии становится 0%. Но она не разом исчезает, а исчезает с двух сторон по направлению в центр строки. Нам кажется, что анимирована оранжевая линия, а, на самом деле, анимирована белая. У неё сделано смещение по координате X на 50%, то есть, её начальная точка находится в середине строки, а не в начале.

Результат:

  1. Сделали лёгким сайт, который мог бы быть в разы тяжелее, учитывая количество 3d-моделей.
  2. Закончили проект на 1,5 месяца раньше, чем планировали. Дедлайн был 6 сентября, акт от клиента получили 29 июля.
  3. Превзошли ожидания заказчика.

Готовый проект: https://jumpica.ru/

Подробнее о процессе разработки читайте в блоге scrum-студии «Сибирикс»: https://blog.sibirix.ru/2019/10/17/jumpica/


Данный материал является частной записью члена сообщества Club.CNews.
Редакция CNews не несет ответственности за его содержание.
9 месяцев назад | категории: Интернет: E-commerce
Комментарии
Другие публикации
RU, Барнаул
веб-разработчик
Информационные технологии

Мы 10 лет на рынке информационных услуг. За это время из маленькой студии выросли в интернет-агентство, численностью более 35 сотрудников. У нас есть представительства в Москве и Лондоне. Мы активно сотрудничаем с такими известными клиентами как Cisco, Adobe, Nissan, Газпром и другими. За нашими плечами несколько сотен проектов, которыми мы гордимся и часть из них представлена в нашем портфолио.

Забегайте в гости: www.sibirix.ru




Забыл пароль?
Авторизоваться через
Зарегистрируйся сейчас!
Присоединяйся к нашему обществу для того чтобы познакомиться с новыми людьми, создать собственный блог, публиковать анонсы событий и объявления, а также участвовать в обсуждении публикаций CNews. Мы создали единое пространство для общения специалистов рынка информационных технологий и всех, кто интересуется современными технологиями. Регистрация =>