Mockups Clay: molduras de dispositivo minimalistas em qualquer cor
Atualizado em 30 de outubro de 2026
Um mockup Clay coloca sua captura de tela em um formato de dispositivo suave e fosco, de uma única cor. Ele não tem câmera, reflexos de vidro nem bordas de metal. É reconhecido como “um celular” ou “um tablet” sem ser um modelo específico. As molduras Clay mantêm a atenção no seu app, e você pode combinar a moldura com a cor da sua marca.
O que faz um mockup ser “Clay”
O nome vem dos renders “clay” (argila) da modelagem 3D: um objeto mostrado em um único material liso e fosco, para que se veja a forma sem os detalhes da superfície. Um mockup de dispositivo Clay funciona do mesmo jeito.
- Uma cor, fosca. A moldura inteira tem uma única cor, com um sombreamento suave da luz e sem brilho nem reflexos.
- Forma simplificada. Ela tem as proporções de um celular ou tablet: cantos arredondados, um corpo um pouco maior que a tela, um pouco de profundidade. Detalhes pequenos, como os recortes da câmera, ficam de fora.
- Sem ligação com um modelo. Ela não diz ser um iPhone ou iPad específico, então ninguém a vê como o aparelho do ano passado.
Quando uma moldura Clay funciona melhor que uma realista
Você quer combinar com a sua marca
Os dispositivos reais vêm em poucos acabamentos fixos. Uma moldura Clay pode ter qualquer cor, então pode ser a cor da sua marca, um tom da cor de destaque do seu app ou um neutro que some no fundo. Em um conjunto de capturas para a App Store ou em uma série de posts, uma única cor Clay em todas as imagens faz o conjunto parecer desenhado, e não montado.
Posts e slides minimalistas
No feed, um celular detalhado, com reflexos e botões visíveis, compete com a sua interface. Uma moldura fosca em uma cor suave é mais discreta, então as pessoas olham para a sua tela. O mesmo vale para slides e documentação, onde o dispositivo só está lá para dizer “isto roda em um celular”.
Ela não envelhece
Molduras realistas envelhecem. Uma captura no modelo do ano passado pode fazer seu app parecer mais antigo do que é, e você vai querer refazer as imagens quando saírem celulares novos. Um celular Clay não pertence a nenhum ano, então as imagens que você faz agora continuam certas no ano que vem.
Ela serve para qualquer tamanho de tela
Às vezes sua captura de tela não corresponde a um dispositivo atual: uma captura do simulador, um aparelho antigo ou um celular que ainda nem foi anunciado. Uma moldura realista seria o modelo errado ou ainda nem existiria. Uma moldura Clay ganha a forma da captura, então se encaixa no que você tiver sem sugerir nenhum hardware específico.
Quando usar uma moldura realista
Clay nem sempre é a escolha certa. Se o seu app depende de um dispositivo específico, como um recurso para o iPhone mais novo ou um layout só para iPad, uma moldura realista mostra isso num relance. Anúncios de produto e imagens para imprensa também costumam ficar melhores com o hardware real. Muita gente usa os dois: molduras realistas nas imagens de lançamento e Clay nos posts do dia a dia.
Como escolher a cor Clay
- Comece pelo fundo. A moldura e o fundo são as duas grandes áreas de cor. Escolha primeiro o fundo, depois uma cor de moldura um tom mais clara ou mais escura da mesma família. Cinza-claro sobre branco, azul-escuro sobre azul-marinho e pêssego sobre creme funcionam.
- Deixe a tela ser o ponto mais claro. Se o seu app tem interface clara, uma moldura um pouco mais escura destaca a tela. Para uma interface escura, uma moldura mais clara faz o mesmo.
- Use a cor da marca com cuidado. Uma cor de marca saturada na moldura pode ofuscar a tela. Uma versão suavizada, com mais branco ou mais cinza, costuma ficar melhor e continua sendo sua.
- Seja consistente. Use uma cor de moldura em todo o conjunto de imagens. Varie o fundo ou o layout.
- Confira o contraste. Com uma moldura muito parecida com a cor do fundo, o dispositivo pode sumir. Uma sombra suave ajuda a separá-los.
Como criar mockups Clay no FeatureFrame
O FeatureFrame tem dois dispositivos Clay: o Celular Clay, com o formato de um iPhone moderno, e o Tablet Clay, com o formato de um iPad mini. Nenhum dos dois tem Dynamic Island ou câmera desenhadas. Cada um ganha a forma da sua captura de tela, então se encaixa em qualquer tamanho de tela.
- Adicione sua captura de tela. Arraste para a janela ou cole. Capturas com formato de celular vão para o Celular Clay, e as com formato de tablet, para o Tablet Clay.
- Escolha Clay no menu Dispositivo se a captura estiver em uma moldura de dispositivo real.
- Escolha uma cor. Há 14 predefinições: Branco, Preto, Nuvem, Pedra, Areia, Terracota, Grafite, Rosado, Pêssego, Manteiga, Menta, Céu, Lavanda e Sálvia. Para usar qualquer outra cor, como a da sua marca, digite o valor hexadecimal ou use o seletor de cores.
- Incline. As molduras Clay são 3D como os dispositivos reais, então os ângulos predefinidos e os controles de inclinação funcionam do mesmo jeito. Uma leve inclinação mostra o sombreamento suave na borda.
- Monte a cena. Escolha um fundo (sólido, gradiente, papel de parede do macOS ou uma imagem sua), uma sombra e o tamanho do quadro. Adicione uma segunda ou terceira captura para um layout.
- Copie ou exporte. Copie a imagem para colar em um post, arraste-a para fora ou exporte em PNG ou JPEG.
O Celular Clay e o Tablet Clay em Branco e Preto são grátis. As outras cores, as cores personalizadas, as molduras de dispositivos reais, a exportação em PNG e a sua própria marca d’água vêm com o FeatureFrame Pro, por US$ 19,99 uma vez ou US$ 9,99 por ano.
Uma receita simples para começar
Para um conjunto limpo de capturas para a App Store ou um post nas redes:
- Use a moldura Nuvem ou Céu sobre um fundo bem claro da mesma família.
- Adicione uma leve inclinação e uma sombra suave.
- Mantenha a mesma cor e o mesmo ângulo em todas as imagens do conjunto.
- Use um quadro 4:5 para feeds, ou 16:9 para uma página de lançamento ou um slide.
Se estiver criando capturas para a App Store, confira os tamanhos que a Apple pede no nosso guia de tamanhos de capturas de tela da App Store.
Leia também
- A biblioteca de molduras de dispositivos: todas as molduras reais de iPhone e iPad do FeatureFrame.
- Tamanhos de imagem para compartilhar capturas de tela de apps.
Mais guias
- Imagens para as redes sociais no lançamento do seu app: um checklist
- Build in public: como compartilhar capturas de tela do seu progresso
- Como colocar marca d’água nas suas capturas de tela
- Imagens Open Graph para o site do seu app
- Como fazer uma captura de tela no Mac sem a sombra da janela
- Tamanhos de capturas de tela da App Store para iPhone, iPad e Mac
- Molduras de mockup de iPhone e iPad grátis