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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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