← Projetos · Case

Case · Design Gráfico · Mobifans

Estampas
MobiStudio.

2026
Illustrator SVG Design Gráfico Identidade Visual
Estampas MobiStudio — catálogo de artes para o personalizador de capinhas
ferramenta · catálogo · variedade

O MobiStudio — personalizador de capinhas da Mobifans — precisava de um catálogo de artes prontas para complementar a ferramenta. As estampas precisavam ser vetoriais (SVG) para suportar colorização dinâmica via código, funcionar em qualquer escala e manter qualidade na impressão física.

O desafio era criar +10 artes únicas que fossem visualmente diversas entre si — sem repetir conceitos — mas que compartilhassem consistência técnica suficiente para funcionar corretamente com o motor de colorização SVG da ferramenta.

Catálogo de estampas para o MobiStudio — ferramenta interna da Mobifans para personalização de capinhas. As artes precisavam ser vetoriais e compatíveis com colorização dinâmica por CSS/JS.

Criar artes únicas com personalidade própria que ainda seguissem um padrão técnico rígido (SVG com paths coloríveis e fundo separado).

Ampliar o valor percebido da ferramenta com um catálogo rico — 11 cores × +10 artes = mais de 110 combinações disponíveis ao cliente.

ilustração · spec técnica · teste
Responsabilidade

Criação de Arte

Pesquisa de referências, rascunho à mão e digitalização de +10 artes únicas no Illustrator — cada uma com conceito e estilo próprios.

Responsabilidade

Direção Visual

Definição da paleta de 11 cores e curadoria de quais combinações de arte + cor funcionavam melhor visual e tecnicamente para a ferramenta.

Responsabilidade

Spec SVG

Exportação e estruturação dos SVGs conforme a spec técnica do MobiStudio — paths com fill correto, fundo separado — e teste de aplicação nas capas.

pesquisa · desenho · exportação SVG
Escolha das estampas e seleção inicial Passo 01 · Seleção
Pesquisa de referências e moodboard Passo 02 · Pesquisa e Referências

O processo começou com uma curadoria ampla de referências — streetwear, grafismo, cultura pop — para garantir que o catálogo tivesse variedade real. Cada arte passou por rascunho antes de ir para o Illustrator, mantendo a linha orgânica do traço mesmo no vetor final.

A restrição técnica mais importante: cada SVG precisava ter exatamente dois elementos de cor separados (fundo e arte), para que o motor de colorização do MobiStudio pudesse pintar ambos independentemente. Isso exigiu uma estrutura específica no Illustrator durante a exportação.

// Spec SVG — estrutura obrigatória para compatibilidade com buildColoredEstampa() <svg> <!-- camada 1: fundo — um único rect ou path fechado --> <rect id="bg" fill="#FFFFFF" width="100%" height="100%" /> <!-- camada 2: arte — todos os paths com fill="#000000" --> <path id="art" fill="#000000" d="M..." /> <path fill="#000000" d="M..." /> </svg> // Paleta: 11 cores — bg e fg independentes cores = ['#1A1A1A', '#FFFFFF', '#E63946', '#F4D35E', '#06B6D4', '#10B981', '#8B5CF6', '#F97316', '#EC4899', '#64748B', '#78350F']
Desenhos feitos e artes digitalizadas DESENHOS · DIGITALIZADOS
Seletor de cores com 11 opções PALETA · 11 CORES
Teste e aplicação das estampas na capa TESTE · CAPA APLICADA
catálogo · ao vivo · combinações

+10

Artes únicas

11

Cores por arte

Mais de 110 combinações disponíveis no catálogo. As estampas foram integradas ao MobiStudio e estão em produção no personalizador, ampliando a oferta de capas personalizadas para os clientes da Mobifans. O padrão técnico SVG estabelecido durante este projeto tornou-se a referência para futuras adições ao catálogo.