Mockups Clay: molduras de dispositivo minimalistas em qualquer cor

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.

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

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.

  1. 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.
  2. Escolha Clay no menu Dispositivo se a captura estiver em uma moldura de dispositivo real.
  3. 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.
  4. 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.
  5. 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.
  6. 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:

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

Mais guias