Design de App de Calendário: Redesign da Tela do Dia, Antes e Depois

Uma tela de dia de calendário tem um trabalho só: dizer o que vem a seguir e quanto do dia ainda resta. O primeiro rascunho abaixo conhece o dia inteiro, mas pinta cinco eventos em cinco cores berrantes, adiciona uma grade do mês e põe um alerta vermelho no topo, então nada parece mais importante que o resto. Uma reunião daqui a 19 minutos tem o mesmo peso que o almoço.

A correção mantém todas as funções e muda o peso. Reuniões longas parecem longas, tempo livre fica simplesmente vazio, e a única reunião que importa agora ganha sua própria linha calma.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

Na esquerda, o olho não tem onde pousar. O cabeçalho, quatro botões, um banner vermelho, uma grade do mês e uma pilha de cartões saturados brigam pelo primeiro olhar. Os cartões de evento são a coisa mais barulhenta da tela, e todos são igualmente barulhentos. O vermelho é usado duas vezes: uma para um alerta e outra para um evento, então o vermelho deixa de significar qualquer coisa.

Na direita, a tela tem uma ordem clara de cima para baixo: onde estou na semana, o que vem a seguir e como é o resto do dia. A cor é discreta e usada para uma coisa só, distinguir os eventos.

O que mudou, em números

Correção 1: transforme os cartões em uma linha do tempo

Antes

Depois

Cinco cartões de cor cheia empilhados, azul, vermelho, laranja, verde e roxo, todos da mesma altura, cada um com sino, avatares e tags, contra uma linha do tempo com rótulos de hora, uma reunião passada cinza, uma linha vermelha às 9:41 e quatro blocos pálidos com uma barra de cor fina, em que o almoço e a call com o cliente são mais altos que o one a one.

Uma lista de cartões diz "aqui estão cinco coisas" e mais nada. Um check-in de uma hora e um workshop de três horas ocupam o mesmo espaço, e as lacunas entre eles, que são a parte do calendário que as pessoas realmente querem ver, ficam invisíveis.

Uma linha do tempo dá forma ao dia. Uma reunião de 45 minutos é um bloco curto, uma longa é um bloco alto, e o tempo livre é um espaço em branco que você enxerga. A cor saiu do cartão inteiro para uma barra fina à esquerda e um tom pálido ao fundo, então o texto é lido de imediato e a cor ainda distingue uma call de trabalho do almoço.

Dois pequenos toques carregam significado. O Team Standup é cinza porque já acabou. Uma linha vermelha marca 9:41, para você ver exatamente onde está no dia.

Regra para reutilizar: mostre o tempo como espaço e guarde a cor berrante para a única coisa que está acontecendo agora.

Correção 2: uma linha calma para o que vem a seguir

Antes

Depois

Um banner vermelho com um sino e a frase Você tem 5 eventos hoje. Próximo evento em 19 minutos, contra uma linha branca com Roadmap Review, depois Em 19 min em vermelho com Zoom ao lado, três pequenos avatares e um botão amarelo Participar.

O alerta do rascunho tenta dizer três coisas numa frase: quantos eventos existem, que um é o próximo, e quando. Soa como um erro. Ninguém precisa da contagem de eventos de hoje, porque a tela os mostra.

A correção responde à única pergunta que as pessoas têm ao abrir um calendário: o que vem a seguir, e posso entrar? O nome vem primeiro, "Em 19 min" em vermelho é o único vermelho da tela, e um botão Participar de 36 px fica onde o polegar alcança. Os horários batem: a barra de status diz 9:41 e a Roadmap Review começa às 10:00.

O padrão é o mesmo que o Notion Calendar usa no botão de entrar: a reunião, a contagem regressiva e uma ação.

Regra para reutilizar: troque um banner que descreve o dia por uma linha que ajuda no próximo passo.

Correção 3: troque o mês por uma semana

Antes

Depois

Uma grade do mês completa, cinco linhas de números com pequenos pontos coloridos sob muitos deles e hoje em um pequeno círculo amarelo, contra uma única linha de semana com uma letra acima de cada número, um grande círculo amarelo sólido na terça, dia 3, e a linha Terça-feira, 3 de novembro logo abaixo.

Uma grade do mês responde a uma pergunta que a tela do dia não está fazendo. Ela gasta 158 px do celular para mostrar 30 dias de pontos coloridos, e os pontos se parecem com os cartões logo abaixo, então a tela tem dois resumos concorrentes da mesma coisa.

Uma faixa da semana mantém o que a visão do dia precisa: hoje e os dias ao lado. Um círculo sólido marca hoje e a data completa fica logo abaixo, em palavras. O mês continua lá: Novembro no cabeçalho volta para a visão do mês, e um deslize na faixa move uma semana.

Regra para reutilizar: mostre o nível de zoom de que a tela trata. Uma tela de dia precisa de uma semana, não de um mês.

Correção 4: reduza quatro botões a um menu

Antes

Depois

Um cabeçalho com Novembro de 2026, duas setas, um logotipo, um chip Hoje, ícones de busca e configurações, e abaixo quatro botões iguais com contorno: Dia, Semana, Mês e Ano, contra um cabeçalho com uma seta de voltar e Novembro, um pequeno menu Dia com uma seta, um ícone de busca e um ícone de mais.

Quatro botões iguais dizem que as quatro visões são igualmente prováveis. Não são: as pessoas ficam em uma visão e raramente trocam. Os botões ocupam uma linha inteira e se parecem com os cartões que ficam abaixo deles.

A correção os reduz a um pequeno menu que mostra a visão atual. Semana, Mês e Ano ficam a um toque. Busca e adicionar viram ícones simples de 24 px, Configurações fica na barra de abas, e o logotipo sai, porque a tela é o produto e o Apple Calendar também não tem um.

Regra para reutilizar: quando as opções são usadas de forma desigual, mostre a atual e esconda o resto atrás dela.

As correções menores

• Toda função continua. As setas viram um deslize na faixa da semana. O sino, as tags e o local de cada evento abrem junto com o evento.
• Os mesmos eventos. Os cinco eventos estão nas duas telas, cada um mantendo a cor antiga como tom. O Team Standup é cinza porque acabou, e a Roadmap Review é o amarelo da marca porque é a próxima.
• Uma barra de abas flutuante. Com 62 px e o dia passando por baixo, a tela usa a altura toda e a barra de abas deixa de parecer uma caixa separada.
• Sem botão flutuante. O mais de 52 px ficava sobre o último cartão e suas pessoas. Agora é um ícone no cabeçalho.
• Margens iguais. O rascunho tem 14 px à esquerda e 12 px à direita. As linhas corrigidas vão de ponta a ponta numa só grade.
• Zoom nas duas. A Roadmap Review é no Zoom nas duas telas, então Participar significa algo.

Audite a sua própria tela de calendário

Pegue o arquivo do Figma

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

Arquivo Figma gratuito

Redesign da tela do dia de calendário, 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 visão do dia de um app de calendário?

Como uma linha do tempo em que a altura do bloco equivale à duração da reunião, com tons suaves e uma barra de cor fina, tempo livre deixado vazio e uma linha para a hora atual. Coloque a próxima reunião em uma linha acima dela.

Como mostrar a próxima reunião em um app de calendário?

Em uma linha com o nome da reunião, uma contagem regressiva como "Em 19 min", as pessoas e um botão Participar quando houver chamada. Evite um banner que conta os eventos do dia.

Um app de calendário deve mostrar uma grade do mês na tela do dia?

Normalmente não. Uma faixa da semana com um círculo sólido em hoje dá o contexto que a visão do dia precisa, e o mês fica a um toque, no cabeçalho.

Quantos botões de visualização um app de calendário precisa?

Um. Mostre a visão atual em um pequeno menu, aqui Dia, e coloque Semana, Mês e Ano dentro dele.

Por que cartões de evento de cor cheia são ruins em um calendário?

Quando todo evento é saturado, todo evento parece urgente e a cor deixa de separá-los. Um tom pálido com uma barra de cor fina mantém a categoria e deixa o texto legível.

Que cor deve ter o botão de participar de um calendário?

A cor da marca, como o único botão preenchido da tela, e guarde o vermelho só para a contagem regressiva.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Sundial, as pessoas e os eventos são inventados. Os horários são coerentes: a barra de status diz 9:41, a Roadmap Review começa às 10:00 e 3 de novembro de 2026 é uma terça-feira.
• Verificações de texto e contraste: tinta #1B1A17 sobre o marigold #FFC233 é 10,8 para 1. O texto dos eventos sobre seu tom é 8,1 (amarelo), 6,5 (laranja), 6,8 (verde) e 8,4 (roxo) para 1. O "Em 19 min" vermelho, #D70015, sobre branco é 5,4 para 1.
• Padrão estudado: a visão do dia do Apple Calendar (voltar ao mês no topo à esquerda, busca e adicionar como ícones simples, uma faixa da semana com um único hoje sólido, blocos em tom com barra de cor, espaço vazio como tempo livre) e o botão de participar do Notion Calendar.
• Logotipo na tela do antes: Playfair Display Bold. Fotos de avatar do Pexels: Peter Platou, Son Hoa Nguyen, Luthfi Ramaditya e Carlos Gutierrez.
• Publicado originalmente como carrossel no App Brainy.