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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

101101
30 комментариев

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

10
Ответить

Спасибо.

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

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

2
Ответить

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

5
Ответить

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

Ответить

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

3
Ответить

Спасибо!

Ответить

я дорисовывал фрагменты. Далее анимировал их в видеоредакторе.Арт-директор

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

2
Ответить