От Растишки к оригами-дракону: как трансформировать идею заказчика в креативную концепцию

Для этого проекта дизайнеры digital-агентства «Атвинта» делали оригами, а потом собирали получившиеся фигурки в 3D.

Как мы доработали задумку клиента

Заказчик: «Хотим дракона, как бы динозавра, чтобы на Растишку был похож».

Мы: «А давайте лучше…».

Так начался наш проект по разработке Цифровой платформы финансовой грамотности населения. Команде предстояло сделать сайт, на котором пользователи учатся инвестировать, копить и грамотно распределять личные финансы.

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

Первый референс от заказчика

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

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

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

Мы решили разработать более универсального персонажа, который будет отсылать к Востоку и одновременно раскрывать тему финансовой грамотности. Дизайнеры стали накидывать идеи и крутить образ динозавра. Одним из вариантов стал схематичный динозавр, собранный из треугольников.

Одна из идей дизайнеров

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

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

Концепция с оригами была наполнена правильными смыслами и ассоциациями, и мы решили презентовать ее заказчику.

Процесс создания концепции

Для согласования идеи разработали концепцию главной страницы и на первом экране разместили маскота — фигурку динозавра. Заказчик дал ему имя Финграмчик, сложив первые части слов «финансовая грамотность».

Главная страница Цифровой платформы финансовой грамотности населения Кузбасса

В предложенной концепции мы:

  • Сохранили аналогию «дракон-динозавр»
  • Продолжили идею Востока искусством оригами
  • Создали ассоциацию с купюрами через бумагу и зеленый цвет

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

Эстетику оригами планировали продлить по всему сайту и создать тизеры к разделам в той же стилистике. Финграмчик стал первым подопытным, на котором мы отрабатывали подход к созданию фигурок.

Как делали Финграмчика

Анимация Финграмчика с главной страницы

Анимированный маскот на главной странице создан на основе настоящего оригами. Каждый дизайнер проектной команды собирал своего Финграмчика по инструкциям из сети. Среди всех фигурок выбрали самую удачную, сфотографировали и начали работать с ней в 3ds Max.

Динозавр, собранный нашим дизайнером

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

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

Алексей Нибо, Арт-директор digital-агентства «Атвинта»
Разделенные элементы для анимации 

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

Разработка иконок-тизеров

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

Тематические иконки в стиле оригами

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

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

Алексей Нибо, Арт-директор digital-агентства «Атвинта»

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

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

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

Алексей Нибо, Арт-директор digital-агентства «Атвинта»

В ряде моделей благодаря 3D мы реализовали в анимации движение, которое нельзя воплотить в жизни. Это позволило делать более эффектные и подвижные тизеры. Например, у модели дома поворачивается крыша, чего невозможно добиться на цельной бумажной фигурке.

Анимация фигурок

Для анимации и рендера использовали KeyShot — работать с рендером в этой программе быстрее и удобнее, чем если постоянно открывать «тяжелый» 3D Max для правок.

Работа с текстурой

В 3D-моделях искали баланс между реалистичностью и аккуратностью. Фотографии настоящего оригами были слишком помятыми и неаккуратными. Как бы хорошо ни была собрана фигурка, приходилось делать ретушь: местами бумага рвалась, была помята или неровно согнута.

У 3D-моделей обратная проблема — они получались слишком ровными и гладкими. При этом «помять» и сделать модель более натуральной проще, чем редактировать оригами в Photoshop.

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

Алексей Нибо, Арт-директор digital-агентства «Атвинта»
До обработки
После обработки

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

Схематичные рисунки на фоне

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

Это один из многих проектов, где мы применили оригинальный подход к дизайну. Ранее мы писали про «Раймет» — еще один сайт нашего агентства с креативным визуалом. В нем мы собирали 3D-оборудование с реальных технических чертежей.

Продолжение следует

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

Интерфейс игры «Я — начинающий инвестор»

В игровой форме пользователи учатся распоряжаться бюджетом, копить, инвестировать и справляться с форс-мажорными ситуациями. Кейс о создании игры уже готов к публикации и совсем скоро появится в нашем блоге на VC. Подписывайтесь на «Атвинту», чтобы первыми увидеть продолжение истории Финграмчика.

0
30 комментариев
Написать комментарий...
Vasek Romanov

Сайты для государства редко креативные. вы молодцы. приятно смотреть. куда лучше стокового треш-картинок.
Еще бы блок с партнерами сделать все логотипы одинаковыми по объему, но это уже заказчик загрузил видимо)

Ответить
Развернуть ветку
Илья Горбаров

Спасибо.

Вообще с заказчиками и сайтами после запуска разное бывает. Сегодня зашёл на сайт, увидел вот это и поднял панику, думал сайт взломали.

А оказалось нет, заказчик попросил разместить эту... кхм штуку.

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Гохсдума )

Ответить
Развернуть ветку
Владимир Степанов

еще с детства оригами считал нереально сложным дело,не получалось и все ) а тут такой динозавр классный)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо! Мы сами удивились, что можно собрать динозавра )

Ответить
Развернуть ветку
Сергей Елисеев

очень прикольный дизайн получился, молодцы)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо!

Ответить
Развернуть ветку
Andrew F.
я дорисовывал фрагменты. Далее анимировал их в видеоредакторе.
Арт-директор

блин, страшно представить, кто у вас занимается влажной уборкой помещения--CIO?

Ответить
Развернуть ветку
Илья Горбаров

Если знаете как запретить арт-директору учавствовать руками в понравившемся ему проекте — поделитесь.

Ответить
Развернуть ветку
Данила Г.

Выглядит оригинально 👍

Ответить
Развернуть ветку
Анна Волгина

Супер, отличная идея и реализация!

Ответить
Развернуть ветку
Андрей
Ответить
Развернуть ветку
Илья Горбаров

Если вы думаете, что идея логотипа с упитанным голубем из оригами оригинальная, я вас расстрою: https://99designs.com/inspiration/logos/origami

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Еще одна интерпретация идеи оригами )

Ответить
Развернуть ветку
Alive Outside

Супер идея!

Ответить
Развернуть ветку
Александр Пикуль

Классно, было бы прикольно увидеть такие стикеры в тг

Ответить
Развернуть ветку
Атвинта digital agency
Автор

О стикерпаке не думали, но идея хорошая!

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Ссылка в начале статьи (https://xn--42-glc2a2ayn.xn--p1ai/) нерабочая, ну точнее как, 403 :)

Где можно вживую посмотреть что получилось? В поиске сайт не нашёл.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Здравствуйте! Проверили - сайт работает, попробуйте еще раз )

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Проблема была в VPN, действительно открывается

Классный динозавр у вас получился! Но, честно говоря, читая статью, думал вы его в итоге анимируете из кусочков непосредственно в браузере через JS, а более сложную анимацию оставите на рендер. Тем более что анимация не 3D. Впрочем итоговое видео не сильно тяжёлое получилось.

Ещё рекомендую посмотреть в сторону babylin.js и three.js, webGL библиотеки для рендеринга в браузере, думаю рано или поздно такие элементы станут дико популярными.

Ответить
Развернуть ветку
Илья Горбаров

Если вы можете во всеми эти технологии, приходите к нам работать. Тогда будем такое анимировать в браузере. ))

Вообще, если говорить о треднах, последнее время появляется всё больше инструментов nocode для дизайнеров, которые позволяют разные 3D штуки делать и не звать программистов.

А конкретно в этом случае взвесили все за, против, учли кроссбраузерность и остановились на видео. Как раз потому, что размер вполне себе приемлемый.

Ответить
Развернуть ветку
Дмитрий Перепёлкин

Пока развиваюсь в этом направлении.

Если с three.js всё более-менее понятно, есть ещё god mode — программирование на чистом GLSL, как здесь:
https://www.shadertoy.com/user/FabriceNeyret2

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

А если абстрагироваться от 3D, можно делать таких вот крутышей средствами html5, css и svg:
https://tympanus.net/Tutorials/AnimatedAnimals/index2.html

Ответить
Развернуть ветку
Илья Горбаров

Как бы да, но надпись "CHROME ONLY EXPERIMENT" во втором примере намекает )

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

Ну или уходить в отрыв на каких-то редких проектах, когда клиент тоже жаждет эксперементов.

Ответить
Развернуть ветку
Дмитрий Перепёлкин

В общем то решаемо проверкой браузера, как в старые добрые времена с Flash — если не установлен, показать страницу попроще.

Другое дело, что так по факту надо делать две страницы как минимум.

Ответить
Развернуть ветку
Илья Горбаров

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

Ответить
Развернуть ветку
Жельмандо

Ребят, с оригами идея классная.
Но сайт дико тормозит - лаг на анимации иконок более секунды.
При скролле страницы одни блоки фризят, другие листаются белыми и потом прогружаются (смотрю на сафари 15.5)
Этж окологос сайт и скорость работы важнее дизайна, не?

Ответить
Развернуть ветку
Жельмандо

Полез смотреть скорость загрузки на пейджспид - он и два аналогичных сервиса выдали ошибку "Сайт не отвечает".

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Проверим, а за оценку идеи - спасибо )

Ответить
Развернуть ветку
romacap

А куда Растишка делась кстати?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Действительно! Сайт работает у них вроде )

Ответить
Развернуть ветку
27 комментариев
Раскрывать всегда