Облако

О клиенте

Илья Варламов — московский фотограф, известный своими репортажами из разных стран, съёмками с управляемых непилотируемых летательных устройств и архитектурной съемкой. Свои фотографии Илья Варламов регулярно выкладывает в своём жж, который пользуется бешеной популярностью в рунете.

Задача


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

Процесс


Основным источником вдохновения для нас послужило творчество Oлафура Элиассона — современного датско-исландского дизайнера, художника, архитектора и преподавателя Берлинского Университета Искусств. Нашему дизайнеру посчастливилось побывать на его выставке в Martin Gropius Bau.

Фрагмент светильника Олафура Элиассона

Светильник Олафура Элиассона

Выставка Олафура Элиассона Take Your Time.
Сан-Франциско 2007

Алексей Быстров, дизайнер:
— Разнообразные эксперименты Элиассона с пространством, его сферические светильники, собранные из осколков стекла, четкая геометрия его работ натолкнули нас на мысль о представлении Земли в виде сферы, собранной из осколков разноцветного стекла, отбрасывающих блики на стены вокруг объекта. Таким образом мы решили задачу географической привязки работ Ильи к конкретным странам и областям.

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

Прототипы, продемонстрированные заказчику

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

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

Варианты иконок

Важным технологическим этапом стала оптимизация внешнего вида глобуса, «зиготы» и окружающего пространства. Дело в том, что для плавной анимации вращения глобуса и имитации вращения камеры в пространстве нам необходимо было компоновать итоговую картинку из нескольких полупрозрачных png-свечений, сдвигающихся на экране и меняющих свои прозрачности в зависимости от положения курсора. Для отображения глобуса применялось несколько текстур: основная (со странами), текстура выделенной страны, текстура внутренней стороны сферы. Всё это существенно продлевало загрузку сайта и при вращении сферы замедляло обновление картинки на экране — количество кадров в секунду временами опускалось до 15 и анимация выглядела скачкообразно и прерывисто. Чтобы устранить этот недостаток, нам пришлось оптимизировать каждый графический файл, принимающий участие в результирующей картинке — мы сокращали размеры и количество полупрозрачных слоев со свечением, уменьшали разрешение текстур глобуса, дублировали одни и те же файлы на различных сценах и шли на ещё более хитрые решения.

Андрей Беликов, дизайнер:
— Мы даже использовали два типа сглаживания текстур на «зиготе» — одна, не сглаженная, применялась во время вращения, вторая, сглаженная, проявлялась, когда многогранник висел неподвижно. В итоге количество кадров не падает ниже 20 в секунду, что выглядит вполне плавно.

Даже без учёта всех технических трудностей, связанных с реализацией проекта посредством технологии papervision 3d, мы потратили немало времени на проработку всех деталей и эргономики интерфейса.

Определение цвета для полигонов на кликабельной модели

Процесс подбора детализации текстуры шара для сохранения плавности его вращения

Процесс создания внутреннего сияния глобуса

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

Прежде чем начать программирование дизайнеры собрали несколько прототипов с помощью Cinema4D. Мы обсудили сценарии работы пользователя с сайтом, а так же работу всех интерактивных элементов, после чего приступили к разработке фронт-энда.
При разработке непосредственного интерфейса особую сложность представляли два элемента:
— геосфера с нанесенными на нее текстурами земной поверхности;
— «зигота» с выбором группы сетов.

Прототип ядра шара под рабочим названием "ядерная зима"

Реализация внутренненего каталога

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

Результат

Полноформатные скриншоты сайта Ильи Варламова можно увидеть на нашем Flickr, но лучше всего познакомиться с сайтом.