Что можно сделать
из линии?

Single обратились к нам за помощью, чтобы рассказать потенциальным клиентам историю о своих ценностях и особенностях сервиса.

Вдохновение

Что нам позволит бюджет и срок?

Мы никогда не приступаем к работам, пока не поймем, что сроки, бюджеты, задачи в представлении заказчика и в нашей голове синхронизированы на все сто процентов. Вот и в этот раз — перед тем, как пуститься в путь, мы подготовили и презентовали заказчику несколько концепций, которые решат поставленную задачу и подготовили календарные планы на их реализацию. После нескольких часов активных обсуждений было решено совместить два концептуальных представления в один промо-сайт. Сумасшедшая идея с 3D-игрушкой очень понравилась заказчику и нам, и она определенно должна была увидеть свет.

Проектирование и дизайн

Информационная часть

Чтобы рассказать о различных особенностях сервиса, мы придумали целую анимированную историю, которая складывается из фирменной линии Single и заканчивается формой для сбора данных, предназначенной для уведомления потенциальных клиентов о запуске сервиса. Мы продумали все мелочи, все переходы; нарисовали все иконки, кнопки, образы для сайта.

Игра в вопросы

Сумасшедшая идея с 3D-игрой обрела реализацию. Мы придумали, как связать её с основными пунктами всего сервиса, а также придумали систему метрик, которая позволила организовать рейтинг. Задача сделать игру увлекательной была решена и, как следствие, результатами игры стало интересно делиться с друзьями в социальных сервисах.

Как сложить образ

Для каждого из пяти уровней игры был выбран один из ключевых образов. Образ является тонкой нитью, на первый взгляд абсолютно хаотично расположенной в пространстве. Есть только одна точка, взгляд
с которой открывает суть.

Не существует неразрешимых задач

Скетчи образов

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

Основа для искажений

Нам были нужны четкие и масштабируемые картинки, для этого мы аккуратно перенесли их в векторный формат.

Создаем хаос

Затем в 3D-редакторе мы исказили наши образы, просто внеся случайные погрешности в координаты по одной из осей.

Делаем мультик

У нас есть видео, в котором камера плавно облетает вокруг образа. Но ведь нам нужна игра, а не мультик. Из 3D-редактора мы получили растровые раскадровки для каждого образа.

2 ГБ

— ровно столько занимают раскадровки для пяти уровней игры. Загрузить это в браузер просто не реально. Мы переделываем раскадровки с гигантским разрешением и скармливаем их скрипту для перевода в векторный формат.

Технологи просят материалы

Технологам для дальнейшей работы нужны векторные файлы — наши кривые на экране им не сильно помогут. ОК, делаем экспорт в SVG.

500 файлов

Раскадровка для каждого образа состоит более чем из 500 файлов. Склеиваем все файлы в один.

Все равно очень много!

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

Немного магии

Немного JavaScript и серверной магии — и все готово!

Три вещи, которыми мы гордимся

Этот сайт стал для нас настоящим вызовом как с точки зрения простого, очень чистого, понятного дизайна, так и с точки зрения технического воплощения. Мы гордимся результатом, но есть особо значимые для нас вещи, чуть ниже их можно увидеть живьем.
Игра работает в большом количестве браузеров и на огромном количестве устройств. Для ситуаций, когда воплощение было технически невозможно, мы подготовили облегченные версии игры, поэтому в нее может быть вовлечено максимальное количество потенциальных клиентов.
Загрузка...
Придумать сбалансированную систему для оценки «крутости» игрока оказалось не так уж и просто. Собирать всю информацию в процессе и отображать результаты тоже не легкая техническая задача.
Максимальные координаты, по горизонтали и вертикали
Расстояние пройденное
курсором
Простой, на первый взгляд, момент: форма для сбора контактных данных — ему мы уделили огромное количество внимания, чтобы сделать её максимально доступной и понятной.
Отправить

Thank you!

Мы свяжемся с вами как только будет готов сервис Single.

Готово к любым экранам

Растровая графика
Векторная графика

И любым устройствам

Смартфоны с ОС Android
Планшеты с ОС Android
Даже самый первый iPad
iPhone
iPad с Retina-экраном

А что под капотом?

Разрабатывая сайт и игру мы активно применяли HTML5, в результате они используют все самые современные возможности браузеров.
Мы применили современные возможности CSS, чтобы все анимации были плавными и использовали аппаратное ускорение.
Сайт работает под управлением Drupal — CMS с открытым исходным кодом. Систему развивает большое сообщество разработчиков.
Все графические материалы представлены в векторном формате. Они адаптированы для использования на любых экранах.

Развитие и поддержка

Мы сделали все возможное, чтобы команде Sinlge было просто развивать свой сайт и дальше. Мы создали шаблоны дизайна для блога, установили, настроили и запустили сайт на одной из самых популярных CMS. Сайт доступен на разных языках, но, несмотря на это, управление всем контентом собрано в одном месте. Для появляющихся новых особенностей и функций предусмотрена система добавления новых образов и описаний.

Марина Акперова

Руководитель направления электронные услуги

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

Первая презентация рассеяла все сомнения и показала, что с командой SoftWear можно реализовать самые смелые UX-фантазии.

Сайт
Игра