История одной популярной, но не принятой концепции

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

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

О проекте

Проект находится под грифом «секретно», поэтому говорить о нем будем в общих чертах. Клиент хотел, чтобы мы разработали сайт для входящей в один из самых крупных it-конгломератов России компании, занимающейся консалтингом в digital-сфере.

Что хотелось клиенту

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

Какие идеи мы предложили на этапе подбора референсов

Скрытое под скатертью https://www.shutterstock.com/ru/g/archreactor
Скрытый образ в тени https://www.behance.net/gallery/43470997/Hidden-Beasts-Tennis-Series

Скрытый образ, подсвеченный в темноте

https://dribbble.com/shots/6085053-Experiments-A
Заблюренный образ, текст https://dribbble.com/shots/4704870-CREATITY

Плюсы рассмотренных идей:

+ Передает скрытость и поиск

+ Каждая идея имеет свою визуальную «фишку»

Минусы рассмотренных идей:

- Перечисленные идеи показывают скрытность, но не показывают реализацию потенциала.

Как пришли к УФ-лампе

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

Мозгоштурм во плоти

Почему клиент не принял концепцию

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

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

Дальнейшая судьба ультрафиолетовой лампы

Лампа получила фейковое название Spectrum и отправилась в наши социальные сети. Она очень зашла аудитории: подписчики хотели узнать как такое можно реализовать. При этом сами мы не дошли до этапа верстки этого проекта. В итоге, когда концепт стал реально приносить фолловеров и поститься в крупные аккаунты о веб-дизайне (Welovewebdesign, Interfacely, Dailywebdesign) мы решили, что сверстать его всё-таки стоит. К тому же, необходимо использование нашего любимого WebGL для работы с интерактивными трехмерными объектами. В данном случае это свет лампы, который мы выводим с помощью данного API. У нас, кстати, недавно вышла ещё одна статья о проекте, где мы также работаем с 3D. Если интересно, почитать можно здесь. Сайт взял два серебра в конкурсе «Рейтинга Рунета» и сайт дня на CSSDA.

Spectrum с точки зрения разработки

Используемые технологии:

Three.js. Используется исключительно для простоты и низкой точки входа для разработчиков, его задача — простое создание шейдера «освещения» от лампы. Здесь может быть любая другая библиотека для работы с WebGL либо нативный WebGL API. Почему вообще WebGL: можно было бы это реализовать на обычном 2D канвасе, но производительность имеет критическое значение, и использование видеокарты вместо GPU хорошо решает данный вопрос. При этом всем очень не хотелось усложнять реализацию, поэтому в WebGL вынесено не все — все остальное сделано на стандартных CSS и JS.

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

CSS-маски. Согласно концепции, слово Hidden должно быть скрыто до тех пор, пока его не «подсветит» лампа. Данный эффект реализован с помощью CSS-маски.

Сложности

С какими сложностями столкнулись (комментарий нашего frontend-разработчика):

  • Сначала было принято решение реализовать лампу и ее свечение через CSS-фильтр blur, но CSS-фильтры во всех браузерах, кроме тех, что основаны на движке Chromium, очень медленные с точки зрения производительности в рантайме. Причина в том, что Chromium-браузеры оптимизировали фильтры, вынеся их работу на видеокарту, освободив ресурсы CPU (статья из блога Chromium https://blog.chromium.org/2012/06/accelerated-css-filters-landed-in.html). Я ощущал просадку на 10-15 фпс просто при попытке подвигать лампу с блюрами через translate. Нужно было искать другое решение, поэтому я решил реализовать данный эффект просто статичной картинкой с прозрачностью. Так как динамика здесь не нужна — это хорошее, производительное решение.
  • Нужен был эффект свечения слова Hidden. Очевидное решение — использование блюра, но, как я выше сказал, кроссбраузерная производительность оставляет желать лучшего, поэтому я заменил блюр на text-shadow.
  • Бленд-моды тоже нехило влияют на производительность, надо быть осторожным с их чрезмерным использованием.

Вывод

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

И кстати, мы решили начать публиковать не только свои работы, но и крутые концепции подписчиков. Поэтому смело присылайте нам ссылку на вашу работу в директ или на [email protected], и мы поможем вам её продвинуть в нашем Instagram.

0
Комментарии
-3 комментариев
Раскрывать всегда