Diseño de apps bancarias: rediseño de la pantalla de inicio, antes y después

La pantalla de inicio de una app bancaria tiene que responder una pregunta en menos de un segundo: ¿cuánto dinero tengo? El primer borrador de abajo es una tarjeta con un degradado muy vistoso, pero el número de tarjeta es lo más grande después del saldo, las acciones vienen en seis colores y casi todos los movimientos están en rojo. Parece un anuncio de tarjeta de crédito.

La corrección mantiene el morado de la marca y todas las funciones. Gasta el color en el número que importa y calla todo lo demás.

La pantalla completa, antes y después

Borrador junior

Corregido

A la izquierda, la tarjeta es una tarjeta: saldo, un número enmascarado, el nombre del titular, la fecha de caducidad y un logo de VISA, todo sobre un mismo degradado. Debajo vienen seis círculos de acción en seis colores, y luego una lista plana de movimientos donde el rojo aparece en cada gasto y cada comercio tiene su propio color de logo.

A la derecha, la tarjeta es un saldo. Tiene el nombre de la cuenta, el número en dólares, una línea que dice cómo cambió este mes y los últimos cuatro dígitos escondidos en la esquina. Todo lo de debajo es más calmado, así que el saldo es el primer lugar donde cae la mirada.

Corrección 1: gasta el morado en el saldo

Antes

Después

"Saldo total" con un icono de ojo y $12,450.80 en un solo tamaño, una fila de asteriscos y 4821, Titular y Caduca, y un logo de VISA sobre un degradado brillante, frente a "Cuenta principal" y 4821 en la esquina, $12,450 con el .80 más pequeño y una píldora "+$320.50 este mes" sobre un morado más profundo.

El borrador usa el degradado de la marca en una tarjeta que parece una tarjeta, así que la primera lectura es "esto es una tarjeta de crédito". El saldo es el texto más grande, pero el número de tarjeta, el titular, la caducidad y el logo de VISA compiten por la misma zona de la tarjeta. Casi todo eso es información que la persona ya sabe o que solo necesita para pagar online.

La corrección mantiene la misma familia de morado y azul y la pone detrás de una sola idea. Los dólares son de 42 pt y los centavos de 22 pt, porque $12,450 es el número que lees y .80 es el detalle. Una píldora muestra qué cambió este mes, que es la segunda pregunta que la gente se hace sobre un saldo. El número de tarjeta se reduce a un "4821" enmascarado en la esquina, suficiente para saber de qué cuenta se trata.

Regla para reutilizar: cuando el color de tu marca es estridente, dale un solo trabajo.

Corrección 2: tres acciones, no seis

Antes

Después

Seis iconos redondos en azul, verde, naranja, rosa, morado y gris: Enviar, Solicitar, Recargar, Pagar facturas, Cambiar y Más, frente a tres botones anchos: un Enviar relleno, y luego Solicitar y Recargar en blanco simple.

Seis colores en seis acciones dicen "todas son igual de importantes y todas distintas". No son ni lo uno ni lo otro. Las tres que se quedan son las que toda cuenta necesita: Enviar, Solicitar y Recargar. Pagar facturas, Cambiar y Más desaparecen de esta pantalla, y la nueva pestaña Pagos da a ese tipo de acciones un hogar propio.

La corrección también da una jerarquía a las tres. Enviar va relleno con el color de la marca, porque es la acción a la que la gente viene. Solicitar y Recargar son simples, así están ahí sin gritar. Los botones son anchos, por lo que son fáciles de pulsar, y la etiqueta va junto al icono en lugar de debajo.

Corrección 3: agrupa los movimientos por día y usa el color con sentido

Antes

Después

Una lista plana de cinco movimientos, cada uno con un círculo de marca de color, una marca de tiempo larga como "22 oct 2026 a las 09:41" e importes en rojo o verde, frente a dos grupos, Hoy y Ayer, cada uno en una tarjeta blanca con fichas moradas con letra, una categoría bajo cada nombre, importes en negro y un único +$2,500.00 en verde.

El rojo significa alto. Una app bancaria que pinta cada gasto de rojo convierte la vida normal, una suscripción, un viaje, un café, en una fila de pequeñas alarmas. La corrección deja el dinero que sale en texto simple y usa el verde para lo único que es buena noticia: el dinero que entra.

Las marcas de tiempo también cambiaron. Una fecha y hora completas en cada fila es sobre todo información repetida. Agrupar bajo "Hoy" y "Ayer" dice la fecha una sola vez, y la segunda línea de cada fila dice para qué fue el pago: "Suscripción", "Transporte", "Nómina". Esa es la pregunta que la gente realmente se hace al escanear una lista.

Los comercios también perdieron sus colores de marca. Una N roja, una U negra, una S verde y una A naranja se ven animadas, pero convierten la lista en un arcoíris sin nada que decir. Una sola ficha teñida con una letra mantiene las filas parejas, de modo que lo que lees son los importes y los nombres.

Corrección 4: cuatro pestañas, sin plus flotante

Antes

Después

Inicio, Tarjetas, un gran botón flotante de más, Estadísticas y Perfil, frente a Inicio, Tarjetas, Pagos y Perfil con la pestaña activa en morado.

El botón flotante de más pregunta "¿añadir qué?". En una app bancaria podría significar enviar, solicitar, añadir una tarjeta o recargar, y la persona tiene que abrirlo para averiguarlo. Además se sienta encima del contenido y parte la barra de pestañas en dos.

La corrección lo sustituye por una pestaña llamada Pagos, que dice qué hay detrás. Estadísticas sale de la barra de pestañas, y la tarjeta de saldo ahora lleva el único número de ella que la gente ve cada día: el cambio de este mes.

Las correcciones menores

• Una cabecera con un solo icono. El borrador tiene un código QR, una campana y un icono de ajustes junto al saludo. La corrección conserva solo la campana.
• Un avatar de iniciales de verdad. El círculo morado con "AM" es morado de marca sólido, así que destaca sobre el fondo.
• Un margen y una escala de espaciado. Las filas se apoyan en un margen de 20 puntos, con huecos sacados de una lista corta.
• Un saludo más calmado. "¡Buenos Días, Alex Moreno!" con mayúscula y exclamación pasó a "Buenos días" y un nombre.
• Tarjetas que agrupan. Los movimientos de cada día están en un contenedor blanco, con un divisor fino entre filas y ninguno entre grupos.

Audita tu propia app bancaria

Consigue el archivo de Figma

El archivo gratis incluye ambas pantallas, cada parte corregida como componente de antes y después, las variables de color de la UI, los estilos de texto de iOS y un léeme con los créditos.

Archivo gratis de Figma

Pantalla de inicio bancaria, antes y después

Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.

Abrir en Figma

FAQ

¿Qué debe mostrar primero la pantalla de inicio de una app bancaria?

El saldo, grande, con una línea corta sobre cómo cambió este mes. Las acciones rápidas van después, y luego los movimientos recientes.

¿Cuántas acciones rápidas debe tener una app bancaria?

Tres funcionan bien: Enviar, Solicitar y Recargar. Haz que la más común vaya rellena y las otras simples, y lleva las acciones menos habituales a una pestaña Pagos.

¿Deben los gastos ir en rojo en una app bancaria?

No. El rojo se lee como una advertencia, y el gasto normal no lo es. Deja los importes que salen en texto simple y usa el verde solo para el dinero que entra.

¿Cómo debe aparecer el número de tarjeta en la pantalla de inicio de una app bancaria?

Enmascarado y pequeño, solo con los últimos cuatro dígitos, para que la gente sepa qué cuenta está viendo. Los datos completos pertenecen a la pantalla de Tarjetas.

¿Debe una app bancaria tener un botón flotante de más?

Normalmente no. Un plus no dice qué añade, así que sustitúyelo por una pestaña con etiqueta como Pagos.

Fuentes

• Ambas pantallas son propias, diseñadas y medidas en Figma. Los nombres de comercios son ejemplos genéricos.
• Publicado por primera vez como carrusel en App Brainy.