iKtotam
Когда я устраивался работать в Ванаду, мне дали тестовое задание. Коммерческое тестовое, что приятно вдвойне. Заказчиками оказались ребята из ООО «Хорошие Штуки» и рассказали о своем девайсе.
«И кто там?» — умный видеодомофон, который позволяет по нажатию на кнопку домофона отправлять видео с камеры на мобильную технику хозяина, будь это телефон или даже планшет.
Проект мне безумно понравился, как и подход ребят к своему делу, а такие проекты получаются особенными.
Задача
Познакомить аудиторию с устройством, рассказав о его преимуществах и детально презентовать «железку». Для заинтересованных покупателей предоставить возможность сделать предварительный заказ.
Решение
После нескольких обсуждений в Скайпе, у меня были неплохие стартовые данные. Пример лендинга, который нравился клиенту. Также мне достался целый набор «референсов» для дизайнера, что меня нехило удивило и снова порадовало. С таким качественным контентом я работал впервые.
В силу сжатых сроков было решено отказаться от варфреймов. Первые примеры компоновки страницы не сильно отличались от результата, кроме первых двух блоков.
Кратко о блоках:
1. Приветственный (Hero) блок с названием устройства, где предлагается ознакомиться с ним, посмотрев видео
2. Игровой блок. Интерактив данного блока позволяет по клику на одно из «превью», увидеть в iPhone, и кто же там?
3. Возможности устройства, подлетающие с плавной on-load анимацией
4. Стори-теллинг блок, где рассказывается об идее проекта
5. Технические характеристики с on-load анимацией
6-7. Блок с отзывами и контактами с обратной связью
Все блоки рисовались под одну высоту — 768 пикселей, с расчетом на самые невысокие носители (нетбуки, ноутбуки). Блоки автоматически подстраиваются под высоту окна вашего браузера
Вырезано
Интерактива могло быть еще больше. У меня в голове был взрыв идей, хотелось сделать многое, но на следующий день пришлось отказываться, чтобы не перегрузить сайт. Это был суровый 2013, когда такие лэндосы были еще не очень популярны в России, как «душераздирающие» лэндосы от БМ
Например, в блоке с «Возможностями», отобразить секвенцию устройства при движении мыши слева-направо и обратно. Для этого пришлось попросить 3Dшника нарезать секвенции с 12 разных ракурсов
Рендеры были неплохие, но альфа каналов с железкой не было, и тень перемещалась слишком некрасиво, поэтому пришлось доводить секвенцию до ума в фотошопе, переделав тень. В финальной версии от этой идеи отказались
Также как и шапка, вот ее первый вариант
Правки вносились незначительные и этап дизайна прошел очень гладко. Хочу выразить огромную благодарность фронт-энд разработчику за терпение и труд, вложенный в проект.
Спустя определенное время, мною также была нарисована первая версия приложения для iOS:
Спасибо за внимание!
iKtotam
