Diseño de apps del clima: rediseño de la pantalla de inicio, antes y después
Una pantalla de inicio de app del clima hecha por un junior, con nueve tarjetas de detalle a 9 px y una lista de diez días, y la misma pantalla corregida. Cada cambio lado a lado, la razón detrás de cada uno y el archivo gratis de Figma.
La gente abre una app del clima para responder una pregunta: ¿cómo está el tiempo afuera y qué va a hacer después? El primer borrador de abajo la responde, y luego sigue y sigue, porque muestra todo lo que devuelve el pronóstico: el nombre completo del lugar, una marca de tiempo al segundo, nueve tarjetas a 9 px y diez días de iconos de colores. La corrección conserva los mismos datos y decide para qué sirve la pantalla de inicio.
La pantalla completa, antes y después
Borrador junior
Corregida
A la izquierda, la primera tarjeta contiene un nombre de lugar, una marca de tiempo, un interruptor de unidades, una temperatura, una condición y cuatro datos más en una línea pequeña. Debajo hay tres cajas blancas con texto diminuto. A la derecha, la parte superior de la pantalla tiene tres cosas: la ciudad, el número y el cielo. Todo lo de abajo es una tarjeta sobre el mismo azul.
Cada tarjeta de la derecha empieza en el mismo borde izquierdo de 20 px, y el icono de la condición, un sol amarillo detrás de una nube blanca, va a la derecha del primer bloque, frente al número.
| Borrador junior | Corregida | |
|---|---|---|
| Temperatura | 52 px | 84 px |
| Tarjetas de detalle | 9 | 4 |
| Filas de pronóstico | 10 | 3 |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px izquierda, 12 px derecha | 20 px en ambos lados |
| Tamaños de texto | 8 a 13 px | 13 a 28 pt |
Corrección 1: la ciudad y un número grande
Antes
Después
Un nombre de lugar con estado y país, una marca de tiempo, un interruptor y una línea pequeña de datos, frente a la ciudad, un número grande, el cielo y el rango del día.
La primera tarjeta del borrador es un formulario con los datos del pronóstico. "New York, NY, United States" son tres nombres para un lugar donde la persona ya sabe que está. "Updated 10/24/2026 09:41:12" es exacto al segundo e inútil para la persona: nadie decide qué ponerse a partir de una marca de tiempo. El interruptor de unidades está en la esquina de la tarjeta más importante.
La corrección dice "Nueva York" y "72°" y pone el número a 84 px, lo más grande de la pantalla, porque es la respuesta a la pregunta. Después viene el cielo en palabras, "Parcialmente nublado", y luego el rango del día, "M 75° m 61°". La sensación térmica y la probabilidad de lluvia salieron de este bloque: la sensación térmica bajó a los detalles, donde tiene su propia tarjeta.
La regla para reutilizar: la parte superior de una pantalla de inicio es para la única respuesta. Los datos que alguien consultaría en segundo lugar van un escalón más abajo.
Corrección 2: seis horas, una tarjeta, espacio para leer
Antes
Después
Ocho columnas estrechas en una tira con borde, frente a seis anchas con un título en lenguaje claro.
El borrador aprieta ocho horas en una sola fila, así que cada columna es delgada y el texto diminuto. La corrección muestra seis: Ahora, 10 am, 11 am, 12 pm, 1 pm y 2 pm. Con dos columnas menos, cada hora tiene un icono más grande y un número más grande.
El título de la tarjeta pasó de ser una etiqueta a ser una frase: "Ratos de sol hasta las 3 pm". Le dice al lector qué suman las seis columnas, así que no necesita revisar cada icono para encontrar cuándo cambia el tiempo.
La regla para reutilizar: una fila de datos debe tener un titular que diga qué sacar de ella.
Corrección 3: cuatro detalles, cada uno con un número grande
Antes
Después
Nueve tarjetas pequeñas sobre una tarjeta blanca, frente a cuatro tarjetas más grandes con el número en tipografía grande.
Nueve tarjetas a 9 px tratan cada detalle como igual, y ninguna se puede leer de un vistazo. La presión, el punto de rocío y la visibilidad son datos reales, pero no son lo que la corrección pone primero.
La corrección conserva cuatro: sensación térmica, humedad, viento e índice UV. Cada una tiene una tarjeta, un icono, una etiqueta pequeña y un número mucho más grande que el del borrador. "6 Alto" y "8 mph NO" se leen a un brazo de distancia. Las otras seis, presión, visibilidad, punto de rocío, amanecer, atardecer y calidad del aire, no están en esta pantalla de inicio.
Una app del clima completa todavía necesita un lugar para ellas, como una pantalla de detalles, y este rediseño no la dibuja.
Ese es el intercambio honesto. La pantalla de inicio se lee más rápido, y el resto de los datos necesita un segundo hogar.
Corrección 4: tres días con una barra para cada rango
Antes
Después
Diez filas de texto con un porcentaje de lluvia y una máxima y una mínima, frente a tres filas con una barra para el rango de cada día.
Diez filas de "75° / 61°" son diez cuentas que el lector tiene que comparar de cabeza. ¿Qué día es el más cálido? ¿Dónde se pone más frío? La respuesta está en los números, y el ojo tiene que desenterrarla.
La barra hace la comparación. La mínima y la máxima de cada día están en una escala compartida de 50° a 78°, así que una barra más larga o más a la derecha significa un día más cálido o más amplio, y el color va de un azul frío a un amarillo cálido a lo largo de la barra. El porcentaje de lluvia salió de las filas. El sábado 24 de octubre es "Hoy"; los dos días siguientes van después.
La regla para reutilizar: cuando la pregunta es cómo se compara una serie, dibuja la comparación.
Las correcciones menores
- Un solo borde izquierdo. El borrador usaba 14 px a la izquierda y 12 px a la derecha, y sus bloques no se alineaban. Cada bloque de la corrección empieza en el borde de 20 px, con 12 px entre tarjetas.
- Un azul más profundo. El cielo es un degradado de #1D4ED8 a #3B82F6, con el azul del propio borrador como extremo más claro. Las tarjetas se apoyan sobre un velo azul marino de 24% (#1E3A8A), así que se leen como parte del cielo y no como cajas blancas encima.
- Texto blanco sobre azul que sí se puede leer. El texto blanco de 9 px del borrador sobre #3B82F6 es el par más débil de la pantalla. Tipografía más grande sobre tarjetas más oscuras lo arregla.
- Una escala tipográfica de verdad. El texto pasó de 8 a 13 px a los tamaños de iOS de 13 a 28 pt, con la temperatura de 84 px por encima.
- Cuatro pestañas, no cinco. La corrección quita una pestaña.
- Sin interruptor de unidades en la tarjeta principal. El selector F y C salió de la primera tarjeta.
Audita tu propia app del clima
| Pregunta | Por qué importa |
|---|---|
| ¿Cuál es la única respuesta arriba, y es lo más grande? | El primer vistazo debería bastar |
| ¿Hay alguna marca de tiempo o etiqueta con la que la persona nunca hace nada? | Precisión no es lo mismo que utilidad |
| ¿Cada fila de datos tiene un titular que dice qué sacar de ella? | Los lectores no deberían buscar el cambio |
| ¿Los detalles tienen un número grande y una etiqueta pequeña clara? | Nueve tarjetas iguales se ignoran por igual |
| ¿Se puede convertir una lista de días en una barra por rango? | El ojo compara formas más rápido que sumas |
Consigue el archivo de Figma
El archivo gratis incluye ambas pantallas como componentes, cada corrección como un par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo gratis de Figma
Pantalla de inicio del clima, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo a tus borradores.
FAQ
¿Qué debería mostrar primero la pantalla de inicio de una app del clima?
La ciudad y una temperatura grande, luego el cielo y la máxima y la mínima del día. Todo lo demás va un escalón más abajo: las próximas horas, algunos detalles y un pronóstico corto.
¿Cuántos detalles debería mostrar una app del clima en la pantalla de inicio?
Cuatro bastan para la mayoría de la gente: sensación térmica, humedad, viento e índice UV. Pon la presión, la visibilidad, el punto de rocío y el amanecer o atardecer en una pantalla de detalles.
¿Cómo debería mostrar una app del clima el pronóstico por horas?
Unas seis horas en una tarjeta, con iconos y números grandes, y un título que diga qué suman esas horas, como "Ratos de sol hasta las 3 pm".
¿Cómo se muestra un pronóstico de varios días en una app?
Tres días en la pantalla de inicio, cada uno con una barra de la mínima a la máxima del día en una escala compartida. Las listas más largas merecen su propia pantalla.
¿Qué tamaño de fuente debería usar una app del clima?
Usa la escala de texto de la plataforma, como los tamaños de texto de iOS, y mantén la temperatura mucho más grande que todo lo demás. La pantalla corregida va de 13 a 28 pt con una temperatura de 84 px.
Fuentes
- Ambas pantallas son propias, diseñadas y medidas en Figma. El lugar, las temperaturas y las fechas son inventados para el ejercicio.
- Contraste comprobado con la fórmula de contraste de WCAG 2.2: el texto blanco tiene 4.6:1 o más en cada tarjeta corregida, y el texto blanco de 9 px del borrador sobre #3B82F6 tiene 3.7:1.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- Publicado por primera vez como carrusel en 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
