3D для Финтех-проекта
Меня пригласили работать над внешним проектом для стартапа в сфере брокерских услуг. В силу NDA детали самого проекта раскрыть не могу, но с удовольствием поделюсь ранними 3D-концептами, над которыми работал с большим интересом.
3D для Финтех-проекта
Меня пригласили работать над внешним проектом для стартапа в сфере брокерских услуг. В силу NDA детали самого проекта раскрыть не могу, но с удовольствием поделюсь ранними 3D-концептами, над которыми работал с большим интересом.
01 / 03
Задача проекта
На сайте уже существовал концепт главной страницы с 3D-иллюстрацией и готовой UI-библиотекой.

Моей задачей стало оформление остальных страниц и наполнением контентом, учитывая, что отсутствует визуализация самого приложения. Решили с командой использовать абстрактные 3D-иллюстрации.
02 / 03
Процесс работы
Начальный концепт на главной был лишь упрощенной иллюстрацией, и чёткие стилистические приёмы еще не были определены. Вначале я провел анализ конкурентов, выделив слабые и сильные стороны их иллюстраций, чтобы выработать стилистические рамки и смысловые акценты для нашего проекта.

Примеры недостатков иллюстраций у конкурентов:

Сайт https://www.xtb.com/

  • Плоский вид за счёт фронтального ракурса.
  • Равномерно заполненное пространство без выделенного центра композиции.

Сайт https://admiralmarkets.com/

  • Слишком много мелких элементов.
  • Некорректно использованы цветовые акценты.
  • Несогласованные цветовые сочетания и разнородные "подиумы" для элементов от иллюстрации к иллюстрации.

Хорошие примеры от Тинькофф и МТС

  • Сбалансированная цветовая гамма и композиция.
  • Точные акценты, без излишних деталей.
  • Чёткий ракурс для объектов, создающий единство стиля, объём и динамику.

Материалы и формы

Определился с цветами и текстурами:

  • Основные цвета: белый, черный и акцентный синий — с текстурой пластика.
  • Так как в стилистике всего проекта присутствует глассоморфизм, добавил текстуру стекла, оно символизирует прозрачность процессов в компании.
  • Металлические текстуры символизируют надёжность и устойчивость.
  • Лёгкая текстура камня оттеняет белый цвет.

Обилие округлых форм в UI-библиотеки определило форму "подиумов" и других декоративных элементов.

03 / 03
Результат
Разделил иллюстрации на два типа для разных задач:

Тип 1:
Атмосферные 3D-изображения с множеством элементов для крупных Hero-изображений и баннеров.

Тип 2:

Компактные иллюстрации, для небольших карточек. Они больше похожие на иконки, чем на иллюстрации и состоят из меньшего количества элементов.

Пример работы иллюстраций на странице

Пример сайта и тексты - "рыбные".


Заключение

К сожалению, сам проект показать не могу, но иллюстрации — да, поскольку в итоге мы решили отказаться от 3D и переопределили стиль сайта.