От Растишки к оригами-дракону: как трансформировать идею заказчика в креативную концепцию
Для этого проекта дизайнеры digital-агентства «Атвинта» делали оригами, а потом собирали получившиеся фигурки в 3D.
Как мы доработали задумку клиента
Заказчик: «Хотим дракона, как бы динозавра, чтобы на Растишку был похож».
Мы: «А давайте лучше…».
Так начался наш проект по разработке Цифровой платформы финансовой грамотности населения. Команде предстояло сделать сайт, на котором пользователи учатся инвестировать, копить и грамотно распределять личные финансы.
Заказчик хотел видеть на сайте маскота, который станет символом успеха, богатства и благополучия. В качестве героя предложили использовать динозавра и приложили референс, который напоминал детского персонажа Растишку.
Стали узнавать, почему именно динозавр, и оказалось, что все не просто так. В основе идеи лежит образ дракона, который на Востоке символизирует процветание, успех и благосостояние. Вместе с этим дракон — крупное, пугающее существо, которое дышит огнем и сжигает все на своем пути.
Заказчику хотелось оставить красивую отсылку, но при этом облегчить образ маскота. Так на замену пришел динозаврик — тоже с чешуей, когтями и шипами, но уже более дружелюбный для пользователя.
Задумка интересная, но в нашем представлении детский динозавр не вязался с финансовой грамотностью и инвестициями — все-таки тема серьезная, мы планируем учить людей сколачивать капитал и уверенное будущее. При этом пользоваться платформой будут как дети, так и взрослые.
Мы решили разработать более универсального персонажа, который будет отсылать к Востоку и одновременно раскрывать тему финансовой грамотности. Дизайнеры стали накидывать идеи и крутить образ динозавра. Одним из вариантов стал схематичный динозавр, собранный из треугольников.
На обсуждении командой решили, что он похож на фигурку оригами, и поняли — вот же оно!
Оригами — это продолжение темы Востока. Фигурки собирают из бумаги, и если мы добавим зеленый цвет, то появится дополнительная отсылка к деньгам и финансам. Выполняя один шаг за другим, мы получаем результат в виде фигурки, так и финансовое благополучие создается поэтапными регулярными действиями.
Концепция с оригами была наполнена правильными смыслами и ассоциациями, и мы решили презентовать ее заказчику.
Процесс создания концепции
Для согласования идеи разработали концепцию главной страницы и на первом экране разместили маскота — фигурку динозавра. Заказчик дал ему имя Финграмчик, сложив первые части слов «финансовая грамотность».
В предложенной концепции мы:
- Сохранили аналогию «дракон-динозавр»
- Продолжили идею Востока искусством оригами
- Создали ассоциацию с купюрами через бумагу и зеленый цвет
Заказчику понравилась наша идея, и мы стали работать над дизайном дальше.
Эстетику оригами планировали продлить по всему сайту и создать тизеры к разделам в той же стилистике. Финграмчик стал первым подопытным, на котором мы отрабатывали подход к созданию фигурок.
Как делали Финграмчика
Анимированный маскот на главной странице создан на основе настоящего оригами. Каждый дизайнер проектной команды собирал своего Финграмчика по инструкциям из сети. Среди всех фигурок выбрали самую удачную, сфотографировали и начали работать с ней в 3ds Max.
Для презентации концепции заказчику мы вырезали динозавра с фотографии, а для верстки разработали анимацию — она оживляет персонажа и создает приятные впечатления от визуала.
На главной странице размещено оригами, не только анимированное, но и собранное в прямом смысле руками «Атвинты». Однако для следующих фигурок мы использовали другой подход.
Разработка иконок-тизеров
Кроме Финграмчика мы сделали оригами для иконок разделов сайта. Нужно было создать иконки по темам: финансовое планирование, страхование, бизнес и т.д.
Во время сборки динозавра команда пробовала разные инструменты, в том числе и 3D-модели. Оказалось, что такой подход в реализации быстрее и легче, чем сборка фигурок вручную.
Однако полностью от сборки оригами не отказались — сложные фигурки продолжали собирать вживую, чтобы их можно было рассмотреть со всех сторон и отмерить длину деталей. Это помогло отразить правильный масштаб и формы на моделях.
Изначально мы думали, что в 3D можно взять плоскость как бумажный лист и так же легко собирать из нее оригами. Но оказалось, что так не работает.
В ряде моделей благодаря 3D мы реализовали в анимации движение, которое нельзя воплотить в жизни. Это позволило делать более эффектные и подвижные тизеры. Например, у модели дома поворачивается крыша, чего невозможно добиться на цельной бумажной фигурке.
Для анимации и рендера использовали KeyShot — работать с рендером в этой программе быстрее и удобнее, чем если постоянно открывать «тяжелый» 3D Max для правок.
Работа с текстурой
В 3D-моделях искали баланс между реалистичностью и аккуратностью. Фотографии настоящего оригами были слишком помятыми и неаккуратными. Как бы хорошо ни была собрана фигурка, приходилось делать ретушь: местами бумага рвалась, была помята или неровно согнута.
У 3D-моделей обратная проблема — они получались слишком ровными и гладкими. При этом «помять» и сделать модель более натуральной проще, чем редактировать оригами в Photoshop.
Всего на цифровой платформе финансовой грамотности населения использовано 20 иконок в стилистике оригами. Также мы дополнили основную задумку схематичными рисунками-набросками, которые органично вписались в общую дизайн-концепцию.
На столах наших дизайнеров до сих пор лежат фигурки Финграмчика, который помогает людям копить, инвестировать и приумножать капитал.
Это один из многих проектов, где мы применили оригинальный подход к дизайну. Ранее мы писали про «Раймет» — еще один сайт нашего агентства с креативным визуалом. В нем мы собирали 3D-оборудование с реальных технических чертежей.
Продолжение следует
Финграмчик стал главным героем квеста по финансовой грамотности, который мы разработали в рамках все той же платформы. Это обучающая игра, в которой пользователь играет за динозавра и помогает ему обзавестись ноутбуком, машиной и собственной пещерой.
В игровой форме пользователи учатся распоряжаться бюджетом, копить, инвестировать и справляться с форс-мажорными ситуациями. Кейс о создании игры уже готов к публикации и совсем скоро появится в нашем блоге на VC. Подписывайтесь на «Атвинту», чтобы первыми увидеть продолжение истории Финграмчика.
Сайты для государства редко креативные. вы молодцы. приятно смотреть. куда лучше стокового треш-картинок.
Еще бы блок с партнерами сделать все логотипы одинаковыми по объему, но это уже заказчик загрузил видимо)
Спасибо.
Вообще с заказчиками и сайтами после запуска разное бывает. Сегодня зашёл на сайт, увидел вот это и поднял панику, думал сайт взломали.
А оказалось нет, заказчик попросил разместить эту... кхм штуку.
Гохсдума )
еще с детства оригами считал нереально сложным дело,не получалось и все ) а тут такой динозавр классный)
Спасибо! Мы сами удивились, что можно собрать динозавра )
очень прикольный дизайн получился, молодцы)
Спасибо!
Арт-директор
блин, страшно представить, кто у вас занимается влажной уборкой помещения--CIO?
Если знаете как запретить арт-директору учавствовать руками в понравившемся ему проекте — поделитесь.
Выглядит оригинально 👍
Супер, отличная идея и реализация!
Если вы думаете, что идея логотипа с упитанным голубем из оригами оригинальная, я вас расстрою: https://99designs.com/inspiration/logos/origami
Еще одна интерпретация идеи оригами )
Супер идея!
Классно, было бы прикольно увидеть такие стикеры в тг
О стикерпаке не думали, но идея хорошая!
Ссылка в начале статьи (https://xn--42-glc2a2ayn.xn--p1ai/) нерабочая, ну точнее как, 403 :)
Где можно вживую посмотреть что получилось? В поиске сайт не нашёл.
Здравствуйте! Проверили - сайт работает, попробуйте еще раз )
Проблема была в 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)
Этж окологос сайт и скорость работы важнее дизайна, не?
Полез смотреть скорость загрузки на пейджспид - он и два аналогичных сервиса выдали ошибку "Сайт не отвечает".
Проверим, а за оценку идеи - спасибо )
А куда Растишка делась кстати?
Действительно! Сайт работает у них вроде )