Design de app de loja de moda: redesign da tela inicial de uma loja de roupas, antes e depois

Um app de loja de moda tem um trabalho na tela inicial: fazer as pessoas desejarem as roupas. O primeiro rascunho abaixo coloca o desconto na frente. Um letreiro vermelho corre pelo topo, seis links sublinhados ficam logo abaixo, e cada card de produto empilha uma tag, estrelas, dois preços, bolinhas de cor e um botão sob uma foto minúscula.

A correção mantém todas as funções e deixa as roupas carregarem a promoção. O letreiro vira uma foto de jeans em tela cheia com a oferta em duas linhas embaixo, o cabeçalho fica limpo, e cada card ganha uma foto grande 3:4 com um único preço.

A tela inteira, antes e depois

Rascunho júnior

Corrigido

À esquerda, tudo grita no mesmo volume. O letreiro é vermelho, as tags são vermelhas, os preços são vermelhos e os botões são pretos, então o olho não tem por onde começar, e as roupas são a coisa menor da tela.

À direita, a ordem é clara: a marca, para onde ir, a oferta única, depois os produtos. As fotos são maiores, há menos texto, e o vermelho fica reservado para uma palavra, Sale.

O que mudou, medido

Correção 1: venda as roupas, não o desconto

Antes

Depois

Uma barra vermelha fina de largura total com letras brancas em caixa alta escrito Summer sale, up to 50 percent off, mais frete grátis, código SUMMER50, contra uma foto em tela cheia de uma jaqueta jeans vestida, com The Denim Edit em uma serifa grande e Up to 50% off em cinza embaixo.

Um letreiro é um banner, e as pessoas aprenderam a pular banners. Este carrega quatro mensagens a 10 px: uma estação, um desconto, frete grátis e um código. Nenhuma delas mostra uma peça de roupa, então quem abre um app de moda vê primeiro uma etiqueta de aviso.

A correção dá uma imagem à oferta. A foto é o produto em uma pessoa, recortada de baixo do queixo para que a jaqueta preencha o quadro, sem raio de borda e sem gradiente, indo de ponta a ponta. Embaixo, duas linhas de texto fazem o trabalho do letreiro: um nome de 28 px para a coleção e uma linha de 14 px para o desconto. O código e a promessa de frete foram para a página por trás do hero, onde quem tocou está pronto para ler as condições.

A conta do preço continua honesta. $178 menos 50% dá $89, o mesmo preço do rascunho.

Regra para reutilizar: mostre o que está à venda e nomeie a oferta em texto simples embaixo. Se a foto precisa de um banner para se explicar, escolha uma foto melhor.

Correção 2: um cabeçalho limpo e abas que mostram onde você está

Antes

Depois

Um cabeçalho alinhado à esquerda com ícone de menu, o logotipo OLEA, depois busca, coração e uma sacola com selo vermelho, acima de seis links sublinhados, Women, Men, Kids, New, Brands e um Sale vermelho, contra um cabeçalho com ícone de menu à esquerda, um logotipo OLEA grande centralizado e uma sacola com um pequeno selo escuro, acima de abas de texto em que Women é escura com sublinhado, Sale é vermelha, e o resto é cinza, saindo pela borda direita.

No rascunho, quatro ícones e um logotipo brigam por uma linha de 364 px, e os seis links embaixo estão todos sublinhados. Um sublinhado significa "este é o atual", então seis sublinhados não significam nada. Não existe estado selecionado algum.

A correção faz duas coisas. O logotipo vai para o centro num tamanho legível, e o cabeçalho cai para dois ícones, porque busca e coração já vivem na barra de abas. Depois as categorias perdem os sublinhados, e o sublinhado volta a significar uma coisa só: Women está escura com uma linha, as outras estão cinza, e Sale é vermelha porque é a única categoria que não é um departamento. A linha sai pela borda, o que avisa que ela rola.

Regra para reutilizar: deixe o sublinhado significar "você está aqui" e use cor uma única vez, no item que precisa de bandeira.

Correção 3: uma foto, um preço

Antes

Depois

Uma fileira de três cards de produto, cada um com uma pequena foto em retrato de uma pessoa de jaqueta jeans, uma tag vermelha de menos 50 por cento, um coração, um nome a 9 px, cinco estrelas douradas com uma nota, um preço vermelho ao lado de um preço riscado, três bolinhas de cor e um botão preto ADD TO CART, contra dois cards maiores com uma foto da própria jaqueta, um coração e um plus na foto, o nome, um preço e três amostras de cor.

Um card do rascunho carrega nove coisas: foto, tag, coração, nome, estrelas, nota, dois preços, bolinhas e um botão. Com 117 px de largura, cada uma ganha poucos pixels, e a foto é a menor parte. Rostos preenchem o quadro, então o produto mal aparece.

A correção mantém quatro: foto, nome, preço e amostras.

A foto tem 169 x 225, um 3:4 de verdade, com cantos retos, e cada uma é recortada na peça, então a textura do jeans é a imagem. O coração fica na foto. Add to Cart vira um plus no canto da foto, então a função está a um toque de distância sem uma barra preta sob cada card. Estrelas e o segundo preço vão para a página do produto, onde o comprador já decidiu olhar mais de perto.

Duas fotos por linha em vez de três também significa que cada nome cabe em uma linha a 13 px, e a barra de abas flutua sobre a próxima fileira de cards para que a rolagem nunca bata numa parede.

Regra para reutilizar: um card numa página de lista responde "eu gostei e quanto custa". Todo o resto fica um toque mais fundo.

As correções menores

• Toda função continua acessível. Add to Cart é o plus em cada foto, Filter e Sort ficam atrás do ícone de controles deslizantes, a busca é a segunda aba, o menu continua no topo à esquerda, Brands continua na linha de categorias, e os outros produtos estão mais abaixo na rolagem.
• Margens iguais. O rascunho tem 14 px à esquerda e 12 à direita. A correção usa 20 nos dois lados e 10 entre blocos.
• Fundo branco, uma tinta. Texto preto sobre branco é a única cor da interface. As fotos fornecem o resto.
• Fotos recortadas nas roupas. Cada imagem é superdimensionada e deslocada dentro de um quadro de recorte para que a jaqueta o preencha. Há pessoas nas fotos, mas a peça é o assunto.
• Uma barra de abas mais calma. Quatro ícones numa pequena barra flutuante substituem cinco abas com rótulos e ícones preenchidos e de contorno misturados.
• Uma escala tipográfica de verdade. O texto vai de 13 a 28 px, contra os 8 a 15 px do rascunho.

Audite a tela da sua própria loja

Baixe o arquivo do Figma

O arquivo gratuito tem o rascunho júnior, a tela corrigida e cada parte como componente.

Arquivo Figma gratuito

Redesign da tela inicial de uma loja de moda, antes e depois

As duas telas e cada parte como componente do Figma. Grátis, somente visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

Como deve ser projetada a tela inicial de um app de loja de moda?

Comece com uma foto em tela cheia do produto e coloque a oferta em duas linhas de texto embaixo. Siga com categorias em texto simples, depois cards em duas colunas com fotos grandes 3:4, um preço e algumas amostras de cor embaixo de cada um.

Que tamanho devem ter as fotos de produto em um app de roupas?

A proporção retrato 3:4 é o padrão para roupas. Aqui os cards têm 169 x 225 px numa tela de 390 px, dois por linha, com cantos retos e a foto recortada na peça.

Um app de moda deve mostrar um banner de promoção?

Evite um banner que não carrega produto algum. Uma foto com uma linha curta de oferta embaixo faz o mesmo trabalho, e o vermelho pode ficar numa aba Sale, para que o desconto seja fácil de achar sem dominar a tela.

Quantos detalhes um card de produto deve mostrar?

Quatro bastam numa página de lista: foto, nome, preço e amostras de cor. Avaliações, o preço antigo e tamanhos pertencem à página do produto, e Add to Cart pode ser um plus na foto.

Como deve ser a navegação por categorias em um app de compras?

Use abas de texto com uma sublinhada para mostrar a atual, cinza para as demais e uma única cor de destaque para Sale. Deixe a linha sair pela borda da tela para que as pessoas vejam que ela rola.

O que a barra de abas de um app de loja deve conter?

Quatro ícones bastam: loja, busca, salvos e perfil. A sacola fica no cabeçalho, onde a contagem fica visível.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, OLEA, seus produtos e seus preços são inventados. Os preços são consistentes nas duas telas: $178 menos 50% dá $89, e $118 menos 50% dá $59.
• Padrão estudado: os apps de moda da Zara e da SSENSE, com fundo branco, cabeçalho limpo, abas de texto, hero em tela cheia e cards 3:4 de cantos retos.
• Fotos do Pexels: o hero por Thomas Nguka, o card da jaqueta por Arturo A, e o Bleached Trucker por Kristina Polianskaia. Os ícones são da Phosphor (MIT).
• Publicado originalmente como carrossel no App Brainy.