Для этого проекта дизайнеры digital-агентства «Атвинта» делали оригами, а потом собирали получившиеся фигурки в 3D.
Как мы доработали задумку клиента
Заказчик: «Хотим дракона, как бы динозавра, чтобы на Растишку был похож».
Мы: «А давайте лучше…».
Так начался наш проект по разработке Цифровой платформы финансовой грамотности населения. Команде предстояло сделать сайт, на котором пользователи учатся инвестировать, копить и грамотно распределять личные финансы.
Заказчик хотел видеть на сайте маскота, который станет символом успеха, богатства и благополучия. В качестве героя предложили использовать динозавра и приложили референс, который напоминал детского персонажа Растишку.
Стали узнавать, почему именно динозавр, и оказалось, что все не просто так. В основе идеи лежит образ дракона, который на Востоке символизирует процветание, успех и благосостояние. Вместе с этим дракон — крупное, пугающее существо, которое дышит огнем и сжигает все на своем пути.
Заказчику хотелось оставить красивую отсылку, но при этом облегчить образ маскота. Так на замену пришел динозаврик — тоже с чешуей, когтями и шипами, но уже более дружелюбный для пользователя.
Задумка интересная, но в нашем представлении детский динозавр не вязался с финансовой грамотностью и инвестициями — все-таки тема серьезная, мы планируем учить людей сколачивать капитал и уверенное будущее. При этом пользоваться платформой будут как дети, так и взрослые.
Мы решили разработать более универсального персонажа, который будет отсылать к Востоку и одновременно раскрывать тему финансовой грамотности. Дизайнеры стали накидывать идеи и крутить образ динозавра. Одним из вариантов стал схематичный динозавр, собранный из треугольников.
На обсуждении командой решили, что он похож на фигурку оригами, и поняли — вот же оно!
Оригами — это продолжение темы Востока. Фигурки собирают из бумаги, и если мы добавим зеленый цвет, то появится дополнительная отсылка к деньгам и финансам. Выполняя один шаг за другим, мы получаем результат в виде фигурки, так и финансовое благополучие создается поэтапными регулярными действиями.
Концепция с оригами была наполнена правильными смыслами и ассоциациями, и мы решили презентовать ее заказчику.
Процесс создания концепции
Для согласования идеи разработали концепцию главной страницы и на первом экране разместили маскота — фигурку динозавра. Заказчик дал ему имя Финграмчик, сложив первые части слов «финансовая грамотность».
В предложенной концепции мы:
- Сохранили аналогию «дракон-динозавр»
- Продолжили идею Востока искусством оригами
- Создали ассоциацию с купюрами через бумагу и зеленый цвет
Заказчику понравилась наша идея, и мы стали работать над дизайном дальше.
Эстетику оригами планировали продлить по всему сайту и создать тизеры к разделам в той же стилистике. Финграмчик стал первым подопытным, на котором мы отрабатывали подход к созданию фигурок.
Как делали Финграмчика
Анимированный маскот на главной странице создан на основе настоящего оригами. Каждый дизайнер проектной команды собирал своего Финграмчика по инструкциям из сети. Среди всех фигурок выбрали самую удачную, сфотографировали и начали работать с ней в 3ds Max.
Для презентации концепции заказчику мы вырезали динозавра с фотографии, а для верстки разработали анимацию — она оживляет персонажа и создает приятные впечатления от визуала.
Чтобы шевелить фигурку, я разрезал фото на шесть частей: три секции хвоста, шея, туловище и голова. Для движения эти части должны быть длиннее, чем на фото, Например, на видео выдвигается хвост, и чтобы избежать пустот, я дорисовывал фрагменты. Далее анимировал их в видеоредакторе.
На главной странице размещено оригами, не только анимированное, но и собранное в прямом смысле руками «Атвинты». Однако для следующих фигурок мы использовали другой подход.
Разработка иконок-тизеров
Кроме Финграмчика мы сделали оригами для иконок разделов сайта. Нужно было создать иконки по темам: финансовое планирование, страхование, бизнес и т.д.
Во время сборки динозавра команда пробовала разные инструменты, в том числе и 3D-модели. Оказалось, что такой подход в реализации быстрее и легче, чем сборка фигурок вручную.
Оригами-динозавр у меня не получился — бумага была неплотная, поэтому фигурка была неустойчива, и ее невозможно было сфотографировать. Тогда я попробовал на скорую руку собрать модель в 3D и понял, что остальные фигурки лучше делать в нем. Срендерить модель в правильном свете и ракурсе оказалось проще, чем обрабатывать и анимировать фотографии настоящих оригами.
Однако полностью от сборки оригами не отказались — сложные фигурки продолжали собирать вживую, чтобы их можно было рассмотреть со всех сторон и отмерить длину деталей. Это помогло отразить правильный масштаб и формы на моделях.
Изначально мы думали, что в 3D можно взять плоскость как бумажный лист и так же легко собирать из нее оригами. Но оказалось, что так не работает.
Гнуть плоскость в 3D по инструкции сборки оригами гораздо сложнее, чем лист в жизни. Поэтому мы собрали модели по готовым фигуркам без поэтапного сгибания и разгибания. Старались для каждого раздела подобрать подходящее по смыслу оригами. Так, мошенников у нас олицетворяет лиса, а накопления — кошелек.
В ряде моделей благодаря 3D мы реализовали в анимации движение, которое нельзя воплотить в жизни. Это позволило делать более эффектные и подвижные тизеры. Например, у модели дома поворачивается крыша, чего невозможно добиться на цельной бумажной фигурке.
Для анимации и рендера использовали KeyShot — работать с рендером в этой программе быстрее и удобнее, чем если постоянно открывать «тяжелый» 3D Max для правок.
Работа с текстурой
В 3D-моделях искали баланс между реалистичностью и аккуратностью. Фотографии настоящего оригами были слишком помятыми и неаккуратными. Как бы хорошо ни была собрана фигурка, приходилось делать ретушь: местами бумага рвалась, была помята или неровно согнута.
У 3D-моделей обратная проблема — они получались слишком ровными и гладкими. При этом «помять» и сделать модель более натуральной проще, чем редактировать оригами в Photoshop.
Для реалистичности на модели добавили следы от сгибов. Это хорошо видно на домике — на стене можно увидеть линии крест на крест, имитирующие процесс сборки. Также перед рендером наложили утрированно зернистую текстуру, чтобы сымитировать крафтовую бумагу.
Всего на цифровой платформе финансовой грамотности населения использовано 20 иконок в стилистике оригами. Также мы дополнили основную задумку схематичными рисунками-набросками, которые органично вписались в общую дизайн-концепцию.
На столах наших дизайнеров до сих пор лежат фигурки Финграмчика, который помогает людям копить, инвестировать и приумножать капитал.
