Идея проекта
“Стоковая фотография вчера и сегодня” — первое глубокое исследование основных перемен в эстетике стоковой фотографии за последние десятилетия. Мы хотели на своем примере показать путь от постановочных съемок с обильной постобработкой до искренних и оригинальных снимков, рассказать о том, что и как на это повлияло. Для этого мы привлекли контент-кураторов и профессиональных стоковых фотографов, описали главные факторы, которые изменили индустрию и сформировали современную визуальную культуру.
Задача и поиск команды
Более 150 стоковых изображений разных периодов, стилистики и около 20 тыс. знаков исследования надо было облечь в интересную, увлекательную для аудитории форму. Мы искали дизайнеров в соответствии с поставленными задачами, эстетикой и стилем. В этом проекте изображения должны были оставаться в центре внимания, а дизайн — быть нетривиальным, но понятным. Эстетика Advanced Team идеально подходила брифу. Помимо целей, которые обсудили изначально, мы предоставили команде свободу творчества. Тема и количество контента задали вектор дизайна и привели к действительно креативным решениям. В итоге визуальная составляющая и дизайн сформировали 90% успеха этого проекта.
Стратегия и реализация
Мы хотели создать интерактивное путешествие, которое будет завлекать читателя, подстегивать его любопытство и желание узнать, что будет дальше.
Как для одностраничного, сайт достаточно большой. Чтобы не утомлять пользователей, реализовали комбинацию вертикальной и горизонтальной прокруток.
Кроме обычного меню, создали навигационную структуру, которая помогает читателю перейти к нужному разделу в один клик. Она должна была быть лаконичной, понятной и гармонично вписываться в сайт. Так возникла идея разместить навигацию справа, что похоже на обычный индикатор выполнения.
Уникальное отличие проекта — техника многогранной прокрутки. Для нее не нашли компонентов с открытым исходным кодом, поэтому дизайн-команда создала все с нуля.
Одним из необычных решений была также сцена с интерактивными фотошарами в разделе «Кредиты» и красный маркер на сайте, с помощью которого пользователи могут рисовать.
Технология
Техническая часть разработки проекта была полна интересных решений и подходов. Технический стек — это Webpack, HTML, SASS, JavaScript и Pug, который отображает статические HTML-ресурсы. На сайте также используются библиотеки three.js, GSAP и Matter.js. У сайта нет бэкенда, и каждый язык хранится в файле JSON.
С самого начала он был спроектирован максимально динамичным, three.js облегчает создание интерактивных элементов. Поскольку самой библиотеки недостаточно для разработки таких уникальных эффектов, как галерея главного экрана или всплывающие окна с изображениями, дизайн-команда создала собственные шейдеры с помощью GLSL.
Вызовы
На реализацию было всего 3 месяца. С одной стороны, было большое количество информации, которую хотелось упаковать в увлекательный интерактивный формат. С другой — было важно не перестараться и не сделать сайт слишком тяжелым как для восприятия, так и для скорости загрузки. По последним исследованиям большинство пользователей не готовы ждать загрузку страницы больше трех-пяти секунд.
Самой большой проблемой была оптимизация. Команда столкнулась с несколькими сложностями: WebGL был очень требователен к видеокарте, и при инициализации приложения нужно было загрузить более 150 фотографий. Потребовалось много времени и труда, чтобы сайт использовал как можно меньше системных ресурсов. В итоге удалось достичь желаемого результата: фотографии не занимают много места, а все сетки в three.js добавляются в их сцены только тогда, когда они нужны.
Результат
Нам удалось реализовать несколько уникальных решений и найти баланс между дизайном, функциональностью, пользовательским опытом и интерактивностью. Дизайн сайта необычный и запоминающийся, но в то же время он не существует сам по себе, а классно “взаимодействует” с контентом, то есть полностью выполняет свои задачи. Проект, запущенный в июне 2020 года, выиграл три международные премии, на которые ежедневно номинируются десятки лучших работ со всего мира.
Наши выводы
- Четко сформулируйте цели и составьте бриф: изначальное понимание, какие задачи должен выполнять дизайн, упростят работу команды и ускорят процесс.
- Потратьте время на качественный рисерч. Найдите правильную команду, чьи работы созвучны вашему видению.
- Подружите текст с дизайном, особенно если в вашем проекте много копирайта. Ищите компромисс, выбирайте решения, в результате которых они будут органично дополнять друг друга, а не соперничать за внимание аудитории.
- Экспериментируйте с формой. То, что “обычно так не делают”, не должно стоять на пути реализации. Не бойтесь, что яркий, неординарный дизайн будет отвлекать внимание от контента. При соблюдении баланса он только поможет в продвижении и послужит поводом для дополнительного промо.
- Учитывайте обратную связь в процессе работы. Обсуждайте промежуточные результаты со всем участниками проекта. Это даст некий срез пользовательских мнений, который поможет двигаться в правильном направлении.
- Учитывайте технические особенности и ищите способ максимально оптимизировать сайт: даже в эпоху скоростного интернета существуют технические ограничения, которые могут сыграть против классного дизайна.
- Подавайте проект на награды. Это послужит дополнительным промо среди аудитории и медиа.
Загрузка...
