{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}
Дизайн
Chipsa

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

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

Жаль, что в нашей версии мира эта концепция ушла в стол. Но к счастью, мы не стали ждать многовековой пыли, которая могла образоваться на этой работе, запостили её в свои соцсети и собрали две сотни тысяч просмотров и пару тысяч подписчиков. По этой причине мы решили сверстать данный экран «за свой счёт» и опубликовать исходный код на 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.
  • Бленд-моды тоже нехило влияют на производительность, надо быть осторожным с их чрезмерным использованием.

Вывод

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

И кстати, мы решили начать публиковать не только свои работы, но и крутые концепции подписчиков. Поэтому смело присылайте нам ссылку на вашу работу в директ или на pr@chipsa.ru, и мы поможем вам её продвинуть в нашем Instagram.

0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

Минэкономразвития РФ приняло предложения РСПП по совершенствованию рынка интеллектуальной собственности

На актуализации плана дорожной карты ТДК (трансформация делового климата) «Интеллектуальная собственность» в соответствии с пожеланиями бизнес-сообщества настоял первый заместитель председателя правительства Андрей Белоусов.

Онлайн-санаторий для сотрудников: как помочь команде справиться с выгоранием

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

Илон Маск отправил сотрудникам письмо о риске банкротства SpaceX из-за медленного производства двигателей — CNBC Статьи редакции

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

Корпоративный проект в Казахстане

Юридическая фирма «Надмитов, Иванов и Партнеры» успешно представляла интересы приобретателя по сделке приобретения 100% долей в уставном капитале общества, крупного производителя битумных материалов в Казахстане, регулируемой по российскому праву.

На сайтах с эквайрингом от ПСБ появился Yandex Pay

Покупатели с аккаунтом «Яндекса» смогут оплачивать покупки, не вводя данные карты.

И снова Яндекс такси

Не первый год регулярно беру машину в аренду

И вот снова Яндекс веселит

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

Бакальчук резко ответила на жалобы продавцов Wildberries во время сессии форума "Россия зовет"
О прекрасном: графовая аналитика в 3D

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

null