Пора в отпуск
6000 миль
за оформление карты
Подробнее
(function(w, d, promoUrl, loc) { var modal, box, closeModalBtn, isModalAnimation, body, html, scrollBarWidth, promoButton; var teaser = d.querySelector('.tinkoff-all-airlines'); if (!teaser) return false; initModal(); preloadImages(['https://leonardo.osnova.io/2755fcfd-f5aa-3496-f0b8-2066ac91e9fa/', 'https://leonardo.osnova.io/0006b8c0-6e01-4b3f-6765-45d1606a2c48/', 'https://leonardo.osnova.io/da12942b-f4f3-2560-40b3-a1c930f4b330/']).then(function() { setTimeout(function() { analyticsEvents(); teaser.classList.add('is-init'); teaser.addEventListener('click', openModal); onDestroy(); }, 100); }); function onDestroy() { var moduleAjaxify = window.Air && window.Air.get('module.ajaxify'); if (moduleAjaxify && moduleAjaxify.on) { moduleAjaxify.on('Before page changed', function() { window.removeEventListener('scroll', scrollHandler); hideModal(); if (teaser) { teaser.removeEventListener('click', openModal); } if (box) { box.removeEventListener('click', stopPropagation); } if (closeModalBtn) { closeModalBtn.removeEventListener('click', closeModalStop); } if (promoButton) { promoButton.removeEventListener('click', clickPromo); } if (modal) { modal.removeEventListener('click', closeModal); modal.remove(); } }); } }; function initModal() { body = d.querySelector('body'); html = d.documentElement; modal = d.querySelector('.tinkoff-all-airlines-promo'); box = d.querySelector('[data-tinkoff-all-airlines-box]'); closeModalBtn = d.querySelector('[data-tinkoff-all-airlines-close]'); isModalAnimation = false; scrollBarWidth = getScrollbarWidth(); box.addEventListener('click', stopPropagation); modal.addEventListener('click', closeModal); closeModalBtn.addEventListener('click', closeModalStop); promoButton = d.querySelector('.tinkoff-all-airlines-promo__button'); if (promoButton) { promoButton.setAttribute('href', promoUrl); promoButton.addEventListener('click', clickPromo); } body.appendChild(modal); }; function clickPromo() { sendEvent('Promo button'); }; function stopPropagation(e) { e.stopPropagation(); }; function closeModalStop(e) { e.preventDefault(); e.stopPropagation(); closeModal(); }; function openModal() { if (isModalAnimation) return false; isModalAnimation = true; sendEvent('Popup', 'Open'); body.style.overflow = 'hidden'; html.style.marginRight = scrollBarWidth + 'px'; modal.classList.remove('is-hidden'); setTimeout(function() { modal.classList.add('is-show'); setTimeout(function() { isModalAnimation = false; }, 300); }, 0); }; function closeModal() { if (isModalAnimation) return false; isModalAnimation = true; hideModal(); sendEvent('Popup', 'Close'); }; function hideModal() { modal.classList.remove('is-show'); setTimeout(function() { modal.classList.add('is-hidden'); body.style.overflow = 'auto'; html.style.marginRight = '0px'; isModalAnimation = false; }, 300); }; function isInViewport(elem) { var bounding = elem.getBoundingClientRect(); return ( bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; function preloadImages(urls) { return Promise.all(urls.map(function(url) { return new Promise(function(resolve) { var image = new Image(); image.onload = resolve; image.src = url; }); })); }; function sendEvent(label, state) { state = state ? state : 'Click'; var value = 'Tinkoff All Airlines 650 (' + loc + ') — ' + label + ' — ' + state; console.log(value); if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function getScrollbarWidth() { var outer = d.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; outer.style.msOverflowStyle = 'scrollbar'; d.body.appendChild(outer); var inner = d.createElement('div'); outer.appendChild(inner); var scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); outer.parentNode.removeChild(outer); return scrollbarWidth; }; function analyticsEvents() { sendEvent('Teaser', 'init'); window.addEventListener('scroll', scrollHandler); scrollHandler(); }; function scrollHandler() { if (isScrolledIntoView(teaser)) { sendEvent('Teaser', 'Show'); window.removeEventListener('scroll', scrollHandler); } }; function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(); var elemTop = rect.top; var elemBottom = rect.bottom; var isVisible = (elemTop >= 0) && (elemBottom <= w.innerHeight); return isVisible; }; }(window, document, 'https://www.tinkoff.ru/cards/credit-cards/all-airlines/promo/form/black-friday/?utm_source=vc0920_cc&utm_medium=ntv.fix&utm_campaign=allairlines.vcbf', 'entry-head'));
Дизайн
Chipsa
3505

Соевое молоко в 3D: один из наших опытов в креативной веб-разработке

Кейс амбициозного проекта c использованием технологии WebGL.

В закладки

«Привет!» — этой простой и непринужденной фразой мы встречаем посетителя на новом сайте More!milk, и именно этой же фразой приветствуем вас. Мы — это Chipsa, создаём сайты и приложения не как у всех.

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

Мы расскажем о технологиях, которые применили в этой работе, встреченных трудностях и их решениях. Выясним, почему проект стал нерентабельным и стоила ли игра свеч? Дадим советы по работе с WebGL и узнаем, в чём польза от участия в международных конкурсах для веб-дизайнеров и разработчиков (по крайней мере для нашей студии).

More!milk работает — коровы отдыхают

More!milk — это производитель растительного напитка на основе сои. Продукт экологически чистый, подходит для тех, кто отказался от коровьего молока и ищет ему вкусную замену. More!milk по своей сущности eco-friendly бренд, делающий большой упор на коммуникацию с клиентом.

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

Отношение «бренд — потребитель»

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

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

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

Старт проекта

Герои проекта: Сергей Шуть, Евгений Сотников и Павел Мажуга.

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

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

Готовые этикетки от клиента, которые нам нужно показать на 3D-моделях

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

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

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

Юлия Чернова
директор по маркетингу More!milk

Мы решили сделать ставку на WebGL — одну из передовых технологий frontend-разработки, которую мы используем в студии. Первая версия этой технологии вышла в 2011 году, но она, на наш взгляд, только сейчас начинает набирать обороты.

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

Использовать WebGL на проекте с ограниченным бюджетом рискованно, но мы не стали экономить на ресурсах, понимая, что это будет нашей визитной карточкой в веб-сайтах с 3D.

WebGL (Web Graphics Library) — программная библиотека для языка JavaScript, которая позволяет создавать 3D графику, функционирующую в браузерах. Мощная и производительная штука c довольно крутым порогом входа.

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

Использовать эту технологию можно для любого проекта, где вы хотите показать объекты в объеме, сложную анимацию, дать пользователю возможность взаимодействовать с 3D или сделать интересное поведение 3D-модели в зависимости от происходящего на сайте.

Особенному продукту особый дизайн

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

Нестандартный лейаут

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

В данном случае компоновка объектов разная на всех страницах, по этой причине время вёрстки заметно увеличилось.

Много графики плюс видео в качестве прелоадера

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

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

3D-модели

Самая интересная часть. Мы решили сделать не просто статичные изображения продукции, а объемные, более реалистичные бутылки, которые реагируют на действия пользователя. На этом этапе было много времени потрачено на изучение опыта других разработчиков использования GLTF-моделей в вебе, а также их оптимизации. 3D контент, как правило, самая «тяжелая» для браузера часть сайта (как в плане загрузки, так и в плане производительности в рантайме).

С какими трудностями столкнулись и как их преодолели

Основные трудности мы встретили на вёрстке сайта. Павел Мажуга, front-end разработчик проекта, расскажет в чём было дело.

1. «Тяжелые» бутылки. Когда дизайнер передает тебе в работу модель размером в 25 мегабайт (в среднем), первая реакция — ужас. На главной странице должно быть 4 разных модели, не говоря о плавном скролле, lottie-анимациях (svg-анимации, экспортированные из Adobe After Effects), и прочем. 100 мегабайт только 3D-объектов? Не вариант.

Шоколад, корица, масала, ваниль. Какой вкус выберешь ты?

Я был знаком с технологией компрессии/декомпрессии трехмерных данных Draco от Google, поэтому первой мыслью стало ее применение. За счет нее я смог сократить объем модели с 25 мегабайт до 1,5 мегабайт, что весьма круто. Но этого было недостаточно.

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

Итоговый размер бутылки сейчас — 156 Кб для большой бутылки и 306 Кб для маленькой плюс текстура этикетки. Странно вышло, что после сжатия маленькая бутылка вышла тяжелее большой. Видимо в мире бутылок размер не имеет значения...

К сожалению, в мобильной версии нам пришлось отказаться от 3D и заменить модели картинками, так как телефоны дешевле сорока тысяч рублей начинали «кипеть» при запуске сайта.

2. Сторителлинг на главной странице. При пролистывании страниц на сайте постоянно что-то происходит, и это «что-то» привязано к позиции скролла. При неправильной реализации — гарантированные лаги (т.к. в браузере происходит много перерисовок). Я решил воспользоваться готовым решением для реализации данного функционала.

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

3. Использование lottie-анимаций на сайте. Чем их меньше, тем лучше, если вы хотите сохранить производительность работы сайта. При скролле страницу страшно фризило. Когда работали такие анимации, fps проседал до 20. Чтобы сохранить адекватный перфоманс при скролле сайта, lottie-анимации ставятся на паузу, а когда скроллинг заканчивается, снова воспроизводятся.

Чтобы не расходовать ресурсы браузера впустую, анимации, которые находятся вне вьюпорта браузера (которые не видны в данный момент пользователю) не воспроизводятся.

Советы frontend-разработчикам, которые собираются работать с WebGL

Если вы столкнулись с проблемами, которые не можете решить, и они описаны ниже — надеюсь, я вам помог:

  • Всегда сжимайте GLTF-модели с помощью draco (файлы сжимаются до 90% от исходного размера).
  • Уменьшайте количество вызовов отрисовки (draw calls) — чем их меньше, тем выше FPS.
  • (очевидно) Старайтесь переиспользовать все, что только можно, не создавайте ненужные объекты в JS и на GPU — экономьте ресурсы процессора и память.
  • Вообще следите за памятью при работе с моделями и WebGL в целом — очень легко допустить утечку.
  • Старайтесь избегать включения сглаживания (antialiasing) при создании WebGLRenderer — это сильно повышает производительность.
  • Выносите вычисления, которые не привязаны к DOM, в веб-воркеры — это действительно повышает производительность главного потока выполнения программы в браузере.
Паша совместно с бутылочкой More!milk верстают сайт

Стоило ли это потраченного времени и сил?

В общем и целом, большая часть времени ушла на два процесса:

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

2. Достижение максимально естественного вида бутылок и их содержимого без потери производительности.

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

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

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

Когда проект длится долго, то «глаз замыливается», появляется усталость и от визуала и от процесса. Мы все любим свежее и новое, и когда человек смотрит в одни и те же картинки несколько месяцев, ему постепенно кажется, что все не то и не так. Это естественная тяга человека к новому.

Проверка правильности решения вовсе не в том, чтобы все сменить и переделать. Она в том, чтобы показать тому, кто еще ни разу не видел и посмотреть его рефлекторную, первую реакцию. Если это вау-эффект, если он при первом взгляде не кривит рот — значит проект успешен.

Юлия Чернова
директор по маркетингу More!milk

А что там с конкурсами?

Наш проект MoreMilk уже получил 3 ленточки на Behance: Interaction, AIGA, AdobeXD, Website of The Day на CSS Design Awards и honorable mention на Awwwards. Как думаете, российские награды вроде Tagline и Золотого сайта получится взять с этим проектом?

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

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

Подытожим

На новый год наша команда получила от More!milk подарок под ёлку — целый ящик соевого молока. Получается уже не зря старались! В знак благодарности мы устроили небольшую фотосессию и оставили отзывы о полезном продукте.

Наша студия вышла на новый уровень в работе с технологией WebGL. Полученный опыт и набитые «шишки» говорят о том, что следующие шаги будут начаты с уже более высокой планки, и мы будем делать проекты с 3D-графикой ещё круче, быстрее и интереснее.

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

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

Юлия Чернова
директор по маркетингу More!milk

Дизайн, 3D, motion — Кирилл Ким
3D — Александр Педченко
Анимация — Эйнар Хамидуллин
Front-end — Павел Мажуга
Back-end — Сергей Шуть
Копирайтинг — Елена Гладышева
Менеджмент проекта — Евгений Сотников

Подпишитесь на наши:

Для сотрудничества свяжитесь с нами: info@chipsa.ru

Делаем сайты и приложения не как у всех — с проработанной анимацией, качественной графикой (фото, видео, иллюстрации, 3D) и креативной концепцией. Разрабатываем брендинг, графический контент и развиваем запущенные проекты (техническое и дизайн-сопровождение). 11 место в рейтинге креативности Рунета среди веб-студи.
{ "author_name": "Chipsa", "author_type": "editor", "tags": [], "comments": 74, "likes": 24, "favorites": 61, "is_advertisement": false, "subsite_label": "design", "id": 129695, "is_wide": true, "is_ugc": false, "date": "Wed, 05 Aug 2020 10:04:09 +0300", "is_special": false }
Дизайн
Проект надгробий с авторским дизайном и философские приложения
Несколько лет назад я закончил архитектурный, какое-то время занимался реставрацией зданий и малых форм. Сейчас…
Объявление на vc.ru
0
74 комментария
Популярные
По порядку
Написать комментарий...
8

Щас набегут комментаторы «А аналитика? Да кому это нужно! У меня тормозит, хрень всё!».
Но проект получился крутой, работы проделана куча. А главное — опыт, такие штуки круто прокачивают)
Молодцы!

Ответить
3

Спасибо, Валерий! Вас с Black Milk тоже поздравляем, вышло очень вызывающе))

Ответить
6

Свистоперделки — это, конечно, занятно, но ресурсы пользователя нужно беречь.

Ответить
6

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

Ответить
1

К слову, проверьте на скорость практически любой сайт с использованием WebGL и более или менее сложных 3D моделей. Например, в списке победителей на сайте https://www.awwwards.com

Ответить
2

Так в том и смысл. Зачем использовать WebGL? Чтобы показать заказчику, что веб-дизайн это на самом деле креативно и на сайте все может летать и шевелиться во время прокрутки, не то что у конкурентов. Кажется что за этим. И это полностью оправдывает лишние сотни часов разработки. 

Я не против креатива во фронтенде, кстати. Просто не понимаю, почему это до сих пор сводится к завязанным на скролл трансформациями каких нибудь объектов (открывается что нибудь, здесь вот бутылочка) и летающим надписям. 

Это даже не конкретно к вам, на awwwards такого много. Так то все профессионально сделано, ок, но это больше напоминает дорогую имиджевую рекламу, которая делается в основном... ради себя самой. 

Ответить
0

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

Ответить
0

Эта анимация происходит какие то доли секунды (если сайт не тормозит). Чтобы удержать пользователя и заинтересовать продуктом можно написать интересный/полезный рассказ с оформлением. 

Ответить
0

Согласны с вами, поэтому постарались именно так и сделать. Просто невозможно угодить всем, к сожалению, а может и к счастью...

Ответить
0

 Современный веб - это одни сплошные свистоперделки, не говоря уже про якобы быстрые фрейморки, которые под капотом столько ***** имеют.
Поковыряйтесь в исходникак фреймворком хотя бы пол года.
13.5 лет с JavaScript и имею право на это мнение.

P.S.:
 Вам бы в какой-нибудь жесткий Enterprise попасть, где Java разрабы(ненавидящие JavaScript) пишут архитектуру веба, а потом это **** нужно как-то поддерживать и там где может работать один, работает 5+ человек.
Или в стартапы, где студенты в 24 года становятся Lead-ами и колбасят проекты на 150к строк, придумывая свои ноу хау к фреймворкам.
Особое "наслаждение" можете получить от иностранных проектов, где нанимают на удаленку спецов подешевле, с главным который ставит своей основной целью развести на бабки клиента и "шикарным" результатом работы, который выбрасывается в мусорку через 2-4 года, потом пишется новая версия с другой, но аналогичной командой еще 2-4 года, а этот процесс повторяется лет 10+.
Выражения: экономия ресурсов, экономичность, экономия и прочее у меня вызывают гомерический смех на основании опыта работы.
Тормозная **** на **** c выбрасыванием огромных бабок на пустоту лучше подходит под современное состояние подходов в вебе.

Ответить
0

одни сплошные свистоперделки

Согласен. Но они нужны только тогда, когда приносят реальный экономический эффект, а не «Вау, пойду дальше». Те же свистоперделки у Apple вполне окупают себя.

Ответить
3

Непонятно что тут "не как у всех", обычный сайт. Вот тут я понимаю, работа с threejs была проделана https://go.pioneer.com/cornrevolution, но кого можно трехмерной бутылкой удивить - непонятно. Хотя фронтендеру всё равно уважение, представляю как он с дизайнерами натерпелся.

Текстура грязи на фоне , кстати, входит в коммуникацию, продуманную до мелочей?

Ответить
2

Тут не в удивлении суть а в органичности подачи основного контента. Так потребителю проще почувствовать продукт, чем со статичными фото.

Ответить
1

Вряд ли это отпечатки с экрана дизайнера остались на макете, поэтому входит скорее всего)

Приятно, что сравниваете https://go.pioneer.com/cornrevolution с нами , но мы пока лишь похвастались одним из амбициозных проектов нашей студии, а не всех веб-разработчиков. Дальше будет интересней)

Ответить
0

загрузил в safari с трекпадом не работает скрол :) вот 

Ответить
0

Тестировали на маках с тачпадами. Можете написать ОС и версию браузера на info @ chipsa.ru?

Ответить
1

Нет. У вас все гуд. :) И в плане трекпада и в плане кипения процессора работает и не греется 80-85с даже на буке 12года. Я писал про сайт пионер 108 градусов и баг с трекпадом :(

Ответить
0

Оке)

Ответить
2

Молодцы, тщательная кропотливая работа. Не обращайте внимание на негатив, эти ребята и в сайте apple не увидят ничего достойного

Ответить
0

Спасибо :)

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

Ответить
1

Ребят, а как насчет нарезать кадры с видео где бутылочка крутится и привязать смену кадров к скроллу? Без WebGL

Ответить
0

Apple просто проматывает видео при прокрутке. Даже не нарезают.

Ответить
1

У эпла сиквенции, а не видео

Ответить
0

Что такое «сиквенции»?

Ответить
0

Набор последовательных кадров.

Ответить
0

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

Ответить
1

ну да, набор кадров.

https://www.apple.com/ru/airpods-pro/ - вот тут секвенции.

Ответить
0

Apple вообще кудесники в этом плане.

Ответить
0

Дельный совет. Учтем.

Ответить
0

Да, сделайте рендер и сделайте сиквенции по 10-12 кадров и вешайте на скрол.

Ответить
1

Было бы интересно сравнить конверсию сайта со спец эффектами и обычного лендинга. Есть? 

Ответить
1

Какая тут может быть конверсия? Вы про что? ) Мы же тут не услуги «сантехника» (абстрактно, мы ничего не имеем против сантехников в целом) продаем со скидкой в 50%, если успеете написать в течение 5 секунд во все всплывающие окна на сайте.

Ответить
2

Вы продаете молоко.

Конверсия - это практическая польза от ваших разработок для клиента. И далеко не факт, что дорогая разработка даст больше продаж, чем какая нибуть тильда за вечер.

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

Ответить
0

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

Ответить
2

Ну по хорошему сайт нужен исключительно для продаж. Любой.

У всех этих дизайнов и свистелок по сути одна метрика качества - конверсия.

Но к счастью не все это понимают и делают дизайн для "себя" - чтобы нравилось заказчику и исполнителю, а как оно продает - не важно )

Ответить
0

Согласны. Но продавать можно не только товар ведь, верно? Можно продавать идеи, эмоции и т.д. Да и поймите правильно, молока бутылку заказывать с сайта будут единицы, тут скорее имиджевая составляющая вопроса, чтобы в магазине эти бутылочки узнали. Тут сложно конверсией измерить этот процесс.

Ответить
0

Все можно измерить.

Все эти идеи/эмоции все равно конвертируются в CPL и количество заказов в день.

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

Идея как выделиться среди конкурентов )

Ответить
1

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

Чтобы, если так случается, человек увидел этот продукт на полке, он вспомнил, что у него уже было касание с этим продуктом в вебе, или наоборот, и купить его, а не соседа-конкурента.

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

Кто в своем уме будет заказывать молоко с сайта?!

А для тех, кто хочет купить, есть раздел, "где купить".

Это классическая схема для фмсдж.

Но вам, колхозникам, которые все конверсией мериют, видимо этого не понять.

Ответить
0

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

Ответить
0

У колхозников тоже есть имиджевые сайты.

Простой пример - статьи на VC как эта, чтобы человек покрутил разработчика со всех сторон и потом в нужный момент вспомнил.

Тут нет кнопки купить, но после удачных статей есть всплеск клиентов. И это количество можно померять и понять эффективность "имиджевой статьи как в фмсдж".

Посчитать можно все, но могут не лишь все.

Ответить
0

Еще раз.

У сайта задача другая. Вам 4 раза написали, что тут не про конверсию.

Какие статьи, какие кнопки купить, какие разработчики? Вы какую мысль -то донести хотите?

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

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

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

Ответить
0

Ну я то как раз слыхивал и говорю конкретные метрики оценки диджитал движухи. 

А вы наоборот уводите нас с конкретных метрик в сторону размытых понятий: "ну что вы тут считать пытаетесь, это же имидж, какие тут цифры" :)

Если что, задача "бренд-стратегии, коммуникации", генерировать лиды, источники которых считаются через омникальные сервисы аналитики, в которых основная метрика - количество продаж, CPL, ROI.

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

Ответить
0

Никто, никого никуда не уводит. Перечитайте сообщения. По-моему вы о чем-то своем размышляете.

Ответить
0

Посмотрим в большем разрезе времени. В любом случае мы лишь разработчики сайта, отдел маркетинга у Moremilk'a свой. Посмотрим, что они потом скажут, как наш уникальный дизайн помог в продажах) Пока доказательств нет, не так давно запустились)

Ответить
1

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

Ответить
1

Тормозит дико мобильная версия

Ответить
1

Спасибо, очень интересный кейс.

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

Ответить
1

У нас в стране, нет своего производства такого немолока и возят из за границы. Раза в 3-4 дороже чем в РФ. Приходите, я за.

Ответить
0

Но грузится неприлично долго, не дождался. Сделали бы ленивую загрузку.

Ответить
1

Ну, нам-то с вами это круто, интересно и смешно про "правильные маркетинговые слова", но кажется что на пользователях vc это все и остановится. Но красиво. Но бесполезно. Но красиво! 

Ответить
0

Если считаете, что красиво, то уже не бесполезно )

Ответить
1

Ребят, круто пишите. Всм, я про это статью. А блок на vc хиленький( С радостью читал бы больше от ваших специалистов!

Ответить
0

Спасибо, будем стараться писать чаще)

Ответить
1

Вот, кстати, сайт на заметку, интересно сделан https://go.pioneer.com/cornrevolution#science

Ответить
0

Открыл сайт в начале прочтения статьи. К концу он все еще грузится. 
Интернет 100мб. Что сказать, отличная работа.

Ответить
2

Открыл сайт после прочтения статьи. Загрузился за 3-4 секунды. Интернет меньше 100мб. Что сказать, и правда отличная работа!

Ответить
0

Пришлось монитор вытирать после вашего сайта

Ответить
–1

Сайт вовлекает во взаимодействие )

Ответить
0

+1 Единственное раздражает грязь. А так, конечно, бутылки классно получились.

Ответить
0

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

Ответить
0

Очень круто, но как-то пустовато

Ответить
0

В Опере есть бутылки, в Хроме - нет

Ответить
0

Цензура

Ответить
0

Будем очень признательны, если напишите нам версию браузера и ОС на почту info @ chipsa.ru.

Ответить
0

Отправил

Ответить
0

Спасибо

Ответить
0

Открыл сайт в Chrome и Edge (оба на одном движке)
Сказать, что медленно работает - приуменьшить (Surface book 2). Отклик долгий.
Edge - анимация испортившегося молока, которое фонтанирует из бутылки фризит под конец и так секунд 10, пока не загрузит основное меню. Контент не "листается"\прокручивается.
Chrome - анимация фризит в самом начале, контент прокручивается, но тормозит. Складывается впечатление, что громоздкий сайт, пользоваться которым пропадает желание из-за низкой оптимизации.

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

Ответить
0

Ну так если дизайнеры делают модельки в 25 Мб и им разработчики не объяснили, что для реалтайма нужно делать low-poly, то вот так оно и работает.

Ответить
0

Уверен, что ни одного комментария от вегана до сих пор не поступило, а мы так надеялись получить именно от них обратную связь :(

Ответить
0

Что за библиотеку взял разраб для сторитейлинга?

Ответить
0

Речь про скролл?
Потому что нет библиотеки для сторителлинга, есть куски, из которых все собрал наш разработчик)
https://github.com/locomotivemtl/locomotive-scroll
Вот библиотека от локомотива

Ответить
0

Чипса, а в чем разница, между стортеллингом и нарративом?

Ответить
0

А к чему этот вопрос?) 

Ответить
0

Ну вы там пишете про сторителлинг на главной. Уверены, что у вас сторителлинг, а не на нарратив?

Ответить

Комментарии

null