Design de app de clima: redesign da tela inicial, antes e depois

As pessoas abrem um app de clima para responder a uma pergunta: como está lá fora e o que vai acontecer a seguir? O primeiro rascunho abaixo responde, e depois continua falando, porque mostra tudo o que a previsão devolve: o nome completo do lugar, um horário até o segundo, nove blocos em 9 px e dez dias de ícones coloridos. A correção mantém os mesmos dados e decide para que serve a tela inicial.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, o primeiro card traz um nome de lugar, um horário, um seletor de unidade, uma temperatura, uma condição e mais quatro fatos em uma linha pequena. Abaixo há três caixas brancas de texto miúdo. À direita, o topo da tela tem três coisas: a cidade, o número e o céu. Tudo abaixo é um card sobre o mesmo azul.

Todo card à direita começa na mesma margem esquerda de 20 px, e o ícone da condição, um sol amarelo atrás de uma nuvem branca, fica à direita do primeiro bloco, oposto ao número.

Correção 1: a cidade e um número grande

Antes

Depois

Um nome de lugar com estado e país, um horário, um seletor e uma linha pequena de fatos, contra a cidade, um número grande, o céu e a variação do dia.

O primeiro card do rascunho é um formulário de dados da previsão. "New York, NY, United States" são três nomes para um lugar em que a pessoa já sabe que está. "Updated 10/24/2026 09:41:12" é preciso até o segundo e inútil para a pessoa: ninguém decide o que vestir a partir de um horário. O seletor de unidade fica no canto do card mais importante.

A correção diz "New York" e "72°" e deixa o número com 84 px, a maior coisa da tela, porque ele é a resposta à pergunta. O céu vem em seguida, em palavras, "Partly cloudy", depois a variação do dia, "H 75° L 61°". Sensação térmica e chance de chuva saíram deste bloco: o número da sensação térmica desceu para os detalhes, onde ganhou um card só dele.

A regra para reaproveitar: o topo de uma tela inicial é para a resposta única. Coloque um degrau abaixo os dados que a pessoa consulta em segundo lugar.

Correção 2: seis horas, um card, espaço para ler

Antes

Depois

Oito colunas estreitas numa faixa com borda, contra seis largas com um título em linguagem simples.

O rascunho espreme oito horas numa linha, então cada coluna é fina e o texto é minúsculo. A correção mostra seis: Now, 10 am, 11 am, 12 pm, 1 pm e 2 pm. Com duas colunas a menos, cada hora ganha um ícone maior e um número maior.

O título do card mudou de um rótulo para uma frase: "Sunny spells until 3 pm". Ele diz ao leitor o que as seis colunas somam, então não é preciso examinar cada ícone para descobrir quando o tempo muda.

A regra para reaproveitar: uma linha de dados deve ter um título que diga o que tirar dela.

Correção 3: quatro detalhes, cada um com um número grande

Antes

Depois

Nove blocos pequenos num card branco, contra quatro cards maiores com o número em fonte grande.

Nove blocos em 9 px tratam todos os detalhes como iguais, e nenhum pode ser lido de relance. Pressão, ponto de orvalho e visibilidade são dados reais, mas não são o que a correção coloca em primeiro lugar.

A correção mantém quatro: sensação térmica, umidade, vento e índice UV. Cada um ganha um card, um ícone, um rótulo pequeno e um número muito maior que o do rascunho. "6 High" e "8 mph NW" se leem à distância de um braço. Os outros seis, pressão, visibilidade, ponto de orvalho, nascer do sol, pôr do sol e qualidade do ar, não estão nesta tela inicial.

Um app de clima completo ainda precisa de um lugar para eles, como uma tela de detalhes, e este redesign não desenha uma.

Essa é a troca honesta. A tela inicial fica mais rápida de ler, e o resto dos dados precisa de uma segunda casa.

Correção 4: três dias com uma barra para cada variação

Antes

Depois

Dez linhas de texto com porcentagem de chuva e máxima e mínima, contra três linhas com uma barra para a variação de cada dia.

Dez linhas de "75° / 61°" são dez contas que o leitor precisa comparar de cabeça. Qual dia é o mais quente? Onde esfria? A resposta está nos números, e o olho precisa escavá-la.

A barra faz a comparação. A mínima e a máxima de cada dia ficam numa escala compartilhada de 50° a 78°, então uma barra mais longa ou mais à direita significa um dia mais quente ou mais amplo, e a cor vai de um azul frio a um amarelo quente ao longo da barra. A porcentagem de chuva saiu das linhas. Sábado, 24 de outubro, é "Today"; os dois dias seguintes vêm depois.

A regra para reaproveitar: quando a pergunta é como uma série se compara, desenhe a comparação.

As correções menores

• Uma margem esquerda. O rascunho usava 14 px à esquerda e 12 px à direita, e seus blocos não se alinhavam. Todo bloco da correção começa na margem de 20 px, com 12 px entre os cards.
• Um azul mais profundo. O céu é um degradê de #1D4ED8 a #3B82F6, com o azul do próprio rascunho como extremo mais claro. Os cards ficam sobre um véu azul-marinho de 24% (#1E3A8A), então parecem parte do céu e não caixas brancas sobre ele.
• Texto branco sobre azul que dá para ler. O texto branco de 9 px sobre #3B82F6 do rascunho é o par mais fraco da tela. Texto maior sobre cards mais escuros resolve.
• Uma escala tipográfica de verdade. O texto foi de 8 a 13 px para os tamanhos do iOS de 13 a 28 pt, com a temperatura de 84 px no topo.
• Quatro abas, não cinco. A correção remove uma aba.
• Sem seletor de unidade no card principal. A chave F e C saiu do primeiro card.

Audite seu próprio app de clima

Pegue o arquivo do Figma

O arquivo gratuito traz 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 gratuito do Figma

Tela inicial de clima, antes e depois

As duas telas e cada parte corrigida como componentes do Figma. Grátis, só visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

O que a tela inicial de um app de clima deve mostrar primeiro?

A cidade e uma temperatura grande, depois o céu e a máxima e a mínima do dia. Todo o resto fica um degrau abaixo: as próximas horas, alguns detalhes e uma previsão curta.

Quantos detalhes um app de clima deve mostrar na tela inicial?

Quatro bastam para a maioria das pessoas: sensação térmica, umidade, vento e índice UV. Coloque pressão, visibilidade, ponto de orvalho e nascer ou pôr do sol numa tela de detalhes.

Como um app de clima deve mostrar a previsão por hora?

Seis horas, mais ou menos, num card, com ícones e números grandes e um título que diga o que as horas somam, como "Sunny spells until 3 pm".

Como mostrar uma previsão de vários dias em um app?

Três dias na tela inicial, cada um com uma barra da mínima à máxima do dia numa escala compartilhada. Listas mais longas pertencem à sua própria tela.

Que tamanho de fonte um app de clima deve usar?

Use a escala de texto da plataforma, como os tamanhos de texto do iOS, e mantenha a temperatura muito maior que qualquer outra coisa. A tela corrigida vai de 13 a 28 pt, com uma temperatura de 84 px.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O lugar, as temperaturas e as datas são inventados para o exercício.
• Contraste verificado com a fórmula de contraste do WCAG 2.2: o texto branco tem 4,6:1 ou mais em todos os cards corrigidos, e o texto branco de 9 px do rascunho sobre #3B82F6 tem 3,7:1.
• Apple Human Interface Guidelines: Typography, para os tamanhos de texto do iOS usados na tela corrigida.
• Publicado primeiro como carrossel no App Brainy.