{"id":13506,"url":"\/distributions\/13506\/click?bit=1&hash=27fcb5113e18b33c3be66ae079d9d20078d1c30f1b468cdc86ecaeefa18446c2","title":"\u0415\u0441\u0442\u044c \u043b\u0438 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u0442\u0432\u043e \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438? \u0410 \u0435\u0441\u043b\u0438 \u043d\u0430\u0439\u0434\u0451\u043c?","buttonText":"\u0423\u0436\u0435 \u043d\u0430\u0448\u043b\u0438","imageUuid":"2c16a631-a285-56a4-9535-74c65fc29189","isPaidAndBannersEnabled":false}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Алексей Нибо
Разделенные элементы для анимации 

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

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

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

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

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

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

Алексей Нибо

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

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

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

Алексей Нибо

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

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

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

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

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

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

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

Алексей Нибо
До обработки
После обработки

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

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

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

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

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

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

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

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

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

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

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

Спасибо.

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

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

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

Гохсдума )

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

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

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

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

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

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

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

Спасибо!

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

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

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

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

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

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

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

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

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

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

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

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

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

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

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

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

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

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

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

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

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

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

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

Если с 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" во втором примере намекает )

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

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

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

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

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

Ответить
Развернуть ветку
Роман Капустин

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

Ответить
Развернуть ветку
Digital-агентство Атвинта
Автор

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

Ответить
Развернуть ветку
Читать все 29 комментариев
null