Design de app de loja de plantas: redesign da tela inicial de um ecommerce
A tela inicial de um app de loja de plantas feita por um júnior, com quatro ícones no cabeçalho, três filtros em dropdown e sete itens embaixo de cada foto, e a mesma tela corrigida. Cada mudança lado a lado, o motivo de cada uma e o arquivo grátis do Figma.
Uma loja de plantas já tem a parte fácil resolvida: os produtos ficam bem em foto. O primeiro rascunho abaixo tem plantas reais e fotos reais, e depois as enterra sob um cabeçalho lotado, três filtros em dropdown, um bloco enorme de dicas de cuidado e sete itens em cada card. A correção mantém todas as funcionalidades e dá espaço para as plantas.
A tela inteira, antes e depois
Rascunho júnior
Corrigida
À esquerda, a pessoa precisa passar por um cabeçalho, uma barra de filtros, três frases de conselho e uma pilha de detalhes de produto antes de ver uma planta inteira. À direita, as primeiras plantas aparecem logo depois de três blocos curtos, cada card é uma planta completa com preço, e o verde faz um só trabalho: marcar o que dá para tocar.
A promoção continua nas duas telas. A Pilea custa $24.99 com $31.00 riscado, e a palmeira-de-salão custa $28.00 com $35.00 riscado. A loja, os preços e as avaliações são inventados para o exercício; as plantas são reais.
| Rascunho júnior | Corrigida | |
|---|---|---|
| Ícones no cabeçalho ao lado do logo | 4 | 2 |
| Filtros | 3 dropdowns e um link de ordenar | 4 chips tocáveis |
| Dicas de cuidado | 3 frases longas | 3 fatos curtos com ícones |
| Itens sob a foto de cada card | 7 | 2, mais um botão de adicionar |
| Abas | 5 | 4 |
| Margem lateral | 14 px à esquerda, 12 px à direita | 20 px nos dois lados |
| Tamanhos de texto | 8 a 20 px | 11 a 20 pt |
Correção 1: logo, busca e carrinho, mais nada
Antes
Depois
Um menu, o logo e três ícones pequenos, contra o mesmo logo com dois botões redondos grandes.
O cabeçalho do rascunho traz um menu, o logo, busca, um coração e um carrinho. O coração é uma lista de desejos, e a tela corrigida dá a ela uma aba, Salvos, então o coração não precisa mais morar no cabeçalho. O carrinho continua ali porque é o único controle que a pessoa espera encontrar no topo de uma loja, e o selo mostra quantas coisas há nele.
Os ícones que restam são maiores: dois botões de 44 px em vez de quatro ícones pequenos. O celular é segurado com uma mão, e um alvo maior é mais fácil de acertar. O logo é o mesmo wordmark nas duas telas, e esse é o ponto: o cabeçalho foi consertado tirando coisas, não redesenhando a marca.
O selo passou de vermelho para o verde da marca. Um ponto vermelho diz que algo está errado ou urgente. Uma contagem de itens não é nem uma coisa nem outra.
Correção 2: filtros visíveis, não dropdowns
Antes
Depois
Categoria, Preço e Tamanho como dropdowns fechados mais um link de ordenar, contra Interior, Exterior, Suculentas e Pet friendly como chips, com Interior selecionado.
Um dropdown esconde suas opções. Para usar um, a pessoa toca, lê uma lista, escolhe, e a lista fecha de novo. Três dropdowns são três dessas viagens antes de qualquer planta mudar na tela. Eles também dizem que tipo de filtro existe, não o que há dentro dele.
Os chips mostram as escolhas à vista. Interior, exterior, suculentas e pet friendly são as perguntas que quem compra planta realmente tem, então um toque responde a uma delas, e o chip selecionado em verde mostra o estado atual. Os quatro chips cabem na linha de 350 px com 6 px de sobra, então nenhum é cortado e nenhum precisa de rolagem.
Correção 3: um card que é a planta inteira
Antes
Depois
Uma foto, um selo, um coração, dois nomes, um preço, estrelas, uma contagem de avaliações e um botão de largura total, contra uma foto, um nome curto, um preço e um botão redondo.
O card do rascunho empilha sete coisas sob a foto: o nome em latim da planta, o nome popular, o preço, o preço antigo, as estrelas, a contagem de avaliações e um botão Add to Cart de largura total. Sobre a própria foto ficam um selo de desconto e um coração. Tudo isso num card com metade da largura da tela.
A correção mantém duas linhas e um botão. O nome é curto ("Pilea", "Calathea") e o preço fica embaixo dele, com o preço antigo riscado quando há promoção. Um botão redondo de mais substitui a barra larga de Add to Cart, porque um mais num card de produto é um padrão que as pessoas já conhecem.
As fotos também mudaram. Os recortes do rascunho cortam as plantas e os vasos não se alinham. A correção recorta toda foto para que a planta inteira ocupe cerca de 70% da altura do quadro, centralizada, com cada vaso na mesma linha. Uma fileira de cards passa a ler como uma fileira, não como quatro imagens diferentes.
Correção 4: dicas de cuidado em três fatos
Antes
Depois
Três frases de conselho numa caixa verde, contra três ícones com um rótulo e uma palavra cada.
O rascunho diz as coisas certas, mas a pessoa precisa ler três frases para encontrá-las. Os três fatos são água, luz e se a planta é segura para pets, e cada um cabe numa palavra: semanal, indireta, segura.
A correção dá a cada fato um ícone, um rótulo pequeno e essa palavra em negrito. O card inteiro se lê num relance. Quem procura "posso deixar isso perto do meu gato?" encontra "Pets: Seguro" sem ler nada.
As correções menores
- Quatro abas, não cinco. Início, Loja, Salvos e Perfil. A lista de desejos virou Salvos, e o carrinho saiu da barra de abas e foi para o cabeçalho.
- Uma margem. O rascunho usava 14 px à esquerda e 12 px à direita. A correção usa 20 px nos dois lados e 12 a 14 px entre os blocos.
- Sem selos nas fotos. Os selos vermelho -20% e azul NEW e o coração em cada foto sumiram. A promoção continua visível, porque o preço riscado permanece.
- Uma cor de destaque. Ao verde do rascunho se juntavam selos vermelhos e azuis. A correção usa um verde da marca, #1F7A4D, para tudo o que é tocável.
- Uma escala tipográfica de verdade. O texto passou de 8 a 20 px para os tamanhos do iOS, de 11 a 20 pt.
- Um título de seção mais curto. "Popular Plants" virou "Popular", porque a tela já é toda sobre plantas.
Faça uma auditoria no seu app de loja
| Pergunta | Por que importa |
|---|---|
| O cabeçalho pode ser reduzido a logo, busca e carrinho? | Cada ícone extra compete com o que as pessoas realmente usam |
| Algum dropdown pode virar chips? | Escolhas visíveis não pedem um toque extra |
| Cada card de produto mostra um preço e uma ação? | Sete detalhes transformam um card em formulário |
| As fotos mostram o produto inteiro na mesma escala? | Recortes cortados deixam a grade desigual |
| Algum parágrafo de conselho pode virar três fatos curtos? | Quem compra escaneia, não lê |
Pegue o arquivo do Figma
O arquivo grátis tem as duas telas como componentes, cada correção como um par de antes e depois, as variáveis de cor e os estilos de texto do iOS.
Arquivo grátis do Figma
Tela inicial de loja de plantas, antes e depois
As duas telas e cada parte corrigida como componentes do Figma. Grátis, somente visualização, duplique para os seus rascunhos.
FAQ
O que a tela inicial de um app de ecommerce deve mostrar primeiro?
Um cabeçalho curto com logo, busca e carrinho, depois filtros como chips e os primeiros produtos. Mantenha pequeno tudo o que não é produto, como dicas ou banners.
Filtros devem ser dropdowns ou chips num app de loja?
Chips, para os poucos filtros que as pessoas mais usam. Chips mostram as escolhas sem um toque, e o selecionado mostra o estado atual. Deixe dropdowns ou uma folha de filtros para listas longas, como preço e tamanho.
O que um card de produto num app de compras deve mostrar?
Uma foto do produto inteiro, um nome, um preço e um botão de adicionar. Detalhes como avaliações e o nome longo podem ficar na página do produto.
Como mostrar instruções de cuidado num app?
Como alguns fatos curtos com ícones, uma palavra cada, como Água: Semanal. Frases longas podem ficar um toque mais fundo.
Quantas abas um app de compras deve ter?
Quatro ou cinco. Junte duplicatas nos lugares onde as pessoas já olham, como o carrinho no cabeçalho e a lista de desejos numa aba Salvos.
Fontes
- As duas telas são nossas, desenhadas e medidas no Figma. A loja, os preços e as avaliações são inventados; os nomes das plantas são reais.
- Fotos via Pexels de Kulbir, Gül Işık e Kaboompics.
- Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
- Publicado originalmente como carrossel no App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
