Раздел «Шторы» на сайте «Мастердома»

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

Каких размеров узоры будут на готовой шторе? Насколько плотная ткань, и сколько света она будет пропускать? Какая у ткани фактура— глянцевая или матовая?

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

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

Выясняем, что, как правило, люди отталкиваются от следующих критериев: помещение (шторы в детскую или на кухню), желаемый цвет и/или рисунок. А зачастую даже приносят фото интерьера. Вне зависимости от предпочтений, в магазине покупатели перебирают все возможные образцы тканей, включая и те, которые совсем не подходят под изначальные условия.

Вооружившись этими знаниями, начинаем проектировать:

Прототипы утверждены. Но, прежде чем приступить к дизайну, нужно придумать, как показывать ткани. Чтобы был понятен размер рисунка, поведение ткани (шторы разной плотности по-разному образуют складки), и светопропускание — нужны фотографии готовых штор. А их нет — есть только фабричные каталоги с небольшими фрагментами материалов.

Как показывать ткани?

Думаем над вариантами. Можно сделать стенд с окном, пошить шторы разных конфигураций из каждой ткани, а затем все отснять и обработать фото. Но тканей много, и такое мероприятие грозит затянуться на долгие месяцы. Можно все замоделить. Но как? Начинаем изучать вопрос. Пробуем вариант с универсальными сценами для разных видов штор:

Консультируемся с 3D-моделером, объясняем задачу, получаем первый результат:

Клиенту решение нравится. Получаем пачку комментариев от дизайнеров «Мастердома» и добавляем свои:

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

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

Продолжаем работу над рендером классических штор. Дизайнеры «Мастердома» объясняют технологию пошива штор и физику поведения ткани, а мы стараемся учесть все эти факторы в финальном рендере. В формате переписки всё выглядит примерно так:

Визуализация постепенно эволюционирует и, наконец, обретает достойный вид:

Точно так же добиваемся реалистичной визуализации для пяти оставшихся видов штор. Эта работа занимает около месяца, но результат того стоит:

Параллельно дизайнеры «Мастердома» готовят текстуры тканей для наших сцен, фотографируя образцы живых тканей. Смотрим, что получается.

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

Решаем проблему комплексно. Делаем для дизайнеров «Мастердома» гайдлайны и пресеты по съемке и обработке фотографий:

Осталась самая малость — зарендерить первую партию из 1 800 сцен (300 тканей x 6 видов штор) в фотографическом качестве. Выясняем, что на сервере заказчика одна сцена рендерится 2 часа. То есть, на выполнение всего объема понадобится примерно полгода. Решаем использовать рендер-ферму — она позволит управиться за несколько дней. Для дизайнеров «Мастердома» создаем видео-руководство по подготовке файлов к рендеру:

Отлично — процессы по созданию визуализаций тканей мы выстроили. Теперь сотрудники «Мастердома» без труда могут пополнять онлайн-каталог сами. Получаем первые результаты:

Параллельно работаем над дизайн-концепцией сайта:

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

Собираем дизайн-концепцию и готовим экраны:

Анимируем некоторые интерфейсы, чтобы наглядно показать их принцип работы:

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

Прорабатываем поведение элементов интерфейса, состояния управляющих элементов и пр:

Верстаем, программируем, тестируем, правим, выпускаем. Готово!

Трудились:

Староста
Андрей Калибабин
Арт-директор и дизайнер
Георгий Давитая
Старший художник
Мария Тишина
3D-моделлинг
Кирилл Мусиенко
Главный инженер
Дмитрий Кельми
Инженеры
Алексей Земляков Виталий Воробьев Андрей Шахбанов