Contexto.
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. Além de permitir a criação de curtos vídeos dessas imagens editadas.
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.
Resumo da processo.
01
Descoberta
Definição do escopo, entendimento do problema e pesquisa de soluções similares.
Roadmap / Benchmarking /
02
Ideação
Geração de ideais, esboços do layout e definição da identidade da marca.
Moodboard / Wireframe
03
Prototipação
Exploração refinada de layout, color system, imagens, ícones.
Visual / Protótipo Navegável / UI Kit
04
Hand off
Reuniões com o time de engenharia, criação de documentos de apoio.
Documentação / Style Guide
Empresa.
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.
Drag or drop the image here.
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.
Settings
General
Notifications
Current plan
Current plan
Starter
5 Tokens
2 Masks by image
1 Quick rendering free
Purchase history
4 Jun, 2025 at 10:21am
Purchase of 10 token pack
16 Mai, 2025 at 6:33pm
Purchase of 20 token pack
Plan upgrade now
ICON LIBRARY
Iconsax
Image
Video
Describe your scene
1 video
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.
Image
Video
Describe your change
1 image
Editar imagem
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
Projetar o Layervibe me trouxe grandes aprendizados sobre como projetar produtos complexos em um espaço de tempo curto. Em apenas quatro semanas, precisei tomar decisões estratégicas rápidas, priorizar funcionalidades com impacto real e aceitar tradeoffs sem perder a coerência de tudo! (Trabalho frenético, mas maravilho 😅).
Esse projeto reforçou muito minha visão sobre a importância de clareza conceitual antes da interface, especialmente ao projetar um produto de IA, onde o controle e a previsibilidade da experiência são fundamentais.
Margarida Barata
Co-fundadora do LayerVibe
Ler todo feedback
© 2026 Arley Gomes. Todos os direitos reservados.