Brand Illustrations + Lottie | Insurance Website

•

.workSHOWCASE

Client | exseg

About the project | [EN] RAPT SEO was developing the new website of the insurance company exseg, I was invited to design all the illustrations (.svg) and code-friendly animations (.lottie and .json) for the new website, following the new brand that would be launched with the new website, silvestre.work started the project creating 3 stylescapes as a way to synthesize the core elements of the brand.

The brand core:
”Explorers in search of innovation and knowledge to do different, transforming the sameness of the insurance market in the country”.

Following the brand, we designed it to appeal friendly, calm, curious, and an itch to explore the unknown, adding it up with some specific references they had, which were line work and one of the colors of the brand with a grey and white palette color scheme per section of the website. After getting to the final illustration style that would match with what they were looking for with the new brand, I designed the first header illustration and its code-friendly animation. In total, we developed 56 brand illustrations and 8 code-friendly animated headers.

Sobre o projeto | [PT/BR] A RAPT SEO estava desenvolvendo o novo site da seguradora exseg, e me convidaram para projetar todas as ilustrações (.svg) e as animações amigáveis ao código (.lottie e .json) para o novo site, seguindo a nova marca que seria lançada junto ao site , silvestre.work iniciou o projeto criando 3 stylescapes como forma de sintetizar os elementos centrais da marca.

O núcleo da marca:
”Exploradores em busca de inovação e conhecimento para fazer diferente, transformando a mesmice do mercado segurador no país”.

Seguindo a marca, projetamos ela para ter um apelo amigável, calmo, curioso e com vontade de explorar o desconhecido além de algumas referências específicas que eles tinham, que eram o trabalho da linha e uma das cores da marca com um esquema de cores da paleta cinza e branco por seção do site. Depois de chegar ao estilo de ilustração final que combinasse com o que eles procuravam para a nova marca, projetei a primeira ilustração do cabeçalho e sua animação amigável ao código. No total, no projeto, desenvolvemos 56 ilustrações de marcas e 8 cabeçalhos animados amigáveis ao código.

silvestre.work was responsible for designing

- Brand Illustrations

- Code-friendly animations (.json and .lottie)

.Stylescapes | Early Sketches

.Chosen stylescape direction and exploration

.Homepage | Final Illustration | Animated Header

.56 Illustrations + 8 Animated Headers | Sketch to final

[EN] My illustration design process starts with Adobe Photoshop through a rough draft, just to get an idea of the elements and composition I will design later with vectors in Adobe Illustrator.

[PT/BR] Meu processo de design de ilustração começa com Adobe Photoshop através de um rascunho, só para ter uma ideia dos elementos e da composição que irei desenhar posteriormente com vetores no Adobe Illustrator.

.Homepage Animated Header | Desktop and Mobile

.Homepage animation details

[EN] All animations were created on Adobe After Effects mostly with shape and path animation to be the lightest weight possible when converting it to a .lottie and .json file through bodymovin plugin.

[PT/BR] Todas as animações foram criadas no Adobe After Effects principalmente com animação de forma e caminho para serem o mais leves possível ao converter para um arquivo .lottie e .json através do plugin bodymovin.