Contexto.
Desafios.
→ Criar uma experiência simples de edição de imagens com IA para usuários não técnicos.
→ Construir um layout que permita a criação de múltiplas variações de uma mesma imagem sem ter inúmeras interações.
Meta de alto nível.
Desenvolver uma ferramenta de edição de imagem com IA generativa, voltada para a testar variações visuais de produtos com eficiência e liberdade criativa. Além de permitir a criação de curtos vídeos dessas imagens editadas.
Resumo da processo.
Começamos definindo o roadmap. Como o projeto de UI tinha apenas 4 semanas, foi essencial estabelecer prioridades e decidir o que seria entregue e o que ficaria como tradeoff.
Em seguida, realizei um benchmarking para mapear concorrentes e identificar lacunas de experiência, proposta de valor, design visual e tom de voz. Com tudo isso documentado, criei um style guide com cores, tipografia e ícones que refletissem a proposta da marca e da solução.
Na sequência, parti para os wireframes e, logo depois, os protótipos de alta fidelidade. Todo o processo foi conduzido com reuniões pontuais, garantindo alinhamento em cada etapa de entrega.
Cliente.
Layervibe
Tipo do projeto.
SaaS
Setor.
Inteligêcia Artificial
Colaborações de destaque.
UI UX Design
Dark & Light mode
Prompt design
Objetivos do LayerVibe
Permitir edições precisas.
Permitir múltiplas edições simultaneamente.
Criar vídeos a partir de fotos.
Durante as primeiras reuniões para definirmos a proposta de valor da solução, ficou muito claro que o ponto central era ser uma AI que possibilitasse não apenas editar uma imagem, mas também realizar uma edição minuciosa e muito precisa que não comprometesse o restante da composição.
Com essa decisão tomada, toda a UI se baseou em demonstrar que o LayerVibe não é uma AI qualquer, mas uma que foca em alteração específicas de fotos, como a cor de um produto, textura de um fundo, rosto de um modelo, mantendo a integridade da iluminação, ângulo, cenário e modelo original.
ESCALA DA PRIMARY COLOR
ESCALA DE CINZA
FONTE
Inter é uma família de fontes variáveis elaborada e projetada para telas de computador. Diversos recursos OpenType também são oferecidos, como alternativas contextuais que ajustam a pontuação conforme o formato dos glifos ao redor.
Para termos uma UI que demonstrasse ser focada em edições minuciosas, introduzimos o conceito de múltiplas máscaras, permitindo que o usuário selecione áreas específicas da imagem para aplicar as edições. Essa abordagem surgiu da necessidade de criar um fluxo mais eficiente, permitindo múltiplas alterações em uma mesma imagem sem repetir o fluxo do zero.
Com isso, o usuário pode, por exemplo, alterar a cor de um item e, em seguida, modificar outro objeto na mesma imagem, tudo dentro de um único fluxo. No final, oferecemos duas possibilidades:
→ Editar sem usar máscara, ou seja, podendo editar a imagem inteira ou um grande objeto que ocupa quase a imagem inteira.
→ Usar máscaras para focar apenas nos elementos desejados, garantindo controle e flexibilidade no processo.
Uma vez que já tínhamos a funcionalidade principal definida, precisávamos ir além da edição. Era essencial dar ao usuário um ambiente onde ele pudesse acompanhar, revisar e organizar tudo o que estava fazendo na plataforma. Foi aí que desenhei as telas do menu lateral:
→ Explore
→ My Medias
→ Trash
→ Prices
Como já tínhamos todos os fluxos definidos, pois uma das primeiras etapas foram justamente para definir o fluxo e a estrutura das páginas com wireframes, partimos direto para o design visual dessas demais páginas.
Medias
Prices
Profile
Mais texto
Margarida Barata
Co-fundadora do LayerVibe
Ler todo feedback
© 2025 Arley Gomes. Todos os direitos reservados.