Разработка пака 3D-ассетов для дизайн-системы МегаФона

Главное о кейсе

Вместе с командой оператора помогли МегаФону минимизировать использование приевшихся пользователям картинок с фотостоков и перейти к 3D-иллюстрациям. Это помогает поддерживать имидж компании как супертехнологичного цифрового партнера для бизнеса и государства.

–––––––––
Together with the client’s team we helped MegaFon minimize the usage of stale stock images and transit to 3D illustrations. It helps to maintain the image of MegaFon as a high-tech digital partner for business and goverment.

Бизнес-задача и ее решение

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

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

Использовали принцип High Poly и получили полную свободу в количестве полигонов: от нескольких тысяч до миллионов. Так лучше передается детализация и плавность форм модели. И никаких тяжеловесных файлов — в продакшн идут png-иллюстрации, которые весят совсем немного.

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

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

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

Чтобы иллюстрация выглядела гармонично, а внимание пользователя было сконцентрировано 
на главном, обращались с деталями аккуратно — использовать не больше трёх-четырёх на иллюстрации.

–––––––––
Each model had the potential to be re-used: in email campaigns, presentations, on the website and in the mobile app. To keep the illustrations recognizable and within one style, we put together a number of models that can be combined and interchanged.

The style and guidelines for the 3Ds were developed in close communication between the teams. Together with MegaFon we decided on the best colours and materials to use, derived the rules for the lighting and camera angles for rendering, as well as illustration usage for different screens and devices. We even described the conditions for detailing and composition.

We used the High Poly approach — it granted us full freedom in regards to the number of polygons: from a few thousand to millions. This way, we can add even smallest details and the shapes are flowing. No heavy files though — final images are light-weight .pngs.

Self-sufficient elements are built on metaphors of 3rd or 4th level of associations. While ideas for the icons lie on the surface — to make sure they are easy to understand.

The basic material is soft-touch plastic — it allows to create all kinds of soft and smooth shapes and forms. Another material used is glass.

Прочая информация о кейсе

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

–––––––––
Creation of 3D assets for MegaFon is a gradual process: we’ve been working closely with the client for over two years now. It started with local tasks and now we have an entire pack of 3D illustrations and guidelines for the new ones.

Скриншоты