{"id":9185,"title":"\u0427\u0435\u0440\u043d\u0438\u043b\u0430 \u0438\u0437 \u0432\u044b\u0445\u043b\u043e\u043f\u043d\u044b\u0445 \u0433\u0430\u0437\u043e\u0432: \u043c\u0438\u0444 \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c?","url":"\/redirect?component=advertising&id=9185&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-bizhuteriya-iz-chaynogo-griba&placeBit=1&hash=a88533bf78285d41072084482619c82803fd6598d1bcc2e142642ff721574ad7","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 комментариев
О прекрасном: графовая аналитика в 3D

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

«Яндекс» попросил ЦБ «принять меры» из-за фальшивого сайта «Яндекс-банка» Статьи редакции

Домен зарегистрировало частное лицо на следующий день после объявления о переименовании «Акрополя».

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

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

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

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

Kornia - Python библиотека для обработки изображений в задачах CV

В этой статье я хотел бы познакомить читателей с библиотекой для ЯП python — Kornia, имеющей богатый функционал в области computer vision. Библиотека написана с использованием pytorch, в ее основе лежат готовые решения, такие как torchvision, PIL, skimage, tf.image, OpenCV. В Kornia реализована возможность выполнения вычислений не только с…

Яндекс такси не проставил статус золото водителю

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

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

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

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

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

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

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

null