Diseño de app de control de gastos: rediseño de un dashboard de presupuesto, antes y después

La gente abre una app de presupuesto para saber una cosa: cuánto puedo seguir gastando. El primer borrador de abajo informa de todo. El número está en la última de cuatro cajas iguales a 10 px, el gasto es un gráfico circular de ocho porciones con una leyenda de 8 px, y las transacciones son una tabla de cinco columnas a 9 px.

La corrección mantiene todas las funciones y cambia el orden. El número va primero y es enorme, el gráfico circular se convierte en una sola barra plana, y la tabla pasa a ser cuatro filas simples que se pueden leer.

La pantalla completa, antes y después

Borrador junior

Corregida

A la izquierda, nada lidera. Cuatro cajas, un gráfico circular, un gráfico de barras, una fila de filtros y una tabla tienen más o menos el mismo peso, y la respuesta a la única pregunta es una cifra de 10 px en la cuarta caja. El ojo tiene que recorrer toda la pantalla para encontrarla.

A la derecha, la pantalla responde en orden: cuánto queda, adónde fue el resto, qué pasó últimamente. Un número es grande, todo lo demás es texto simple, y hay un solo trabajo de color por elemento.

Qué cambió, medido

Corrección 1: pon primero lo que queda por gastar

Antes

Después

Cuatro cajas pequeñas iguales en fila: Ingresos $4,200 en verde, Gastos $1,916 en rojo, Ahorros $1,000 en azul y Saldo $1,284 en negro, todo a 10 px, frente a $1,284 en tipografía enorme y en negrita con quedan de $3,200 y 12 días por delante en gris debajo.

Las cuatro cajas dan a cada número el mismo tamaño, así que ninguno es la respuesta. El usuario tiene que saber que el Saldo es el que importa, y luego leerlo a 10 px.

La corrección elige uno. $1,284 va a 48 px en negrita, y la línea de debajo lleva los dos datos que le dan sentido: el presupuesto del que sale, $3,200, y los días que quedan del mes. Un número sin su presupuesto es una curiosidad. Con él, el usuario sabe si debe preocuparse.

Las cifras cuadran, así que no se inventó nada para encajar. Unos ingresos de $4,200 menos $1,000 de ahorro son el presupuesto de $3,200, y $1,916 gastados dejan $1,284. Ingresos y Ahorros pasaron a la pestaña Stats.

Regla para reutilizar: encuentra el único número por el que se abre la pantalla, hazlo lo más grande que haya en ella y escribe el contexto en una línea debajo.

Corrección 2: una barra plana en lugar de un gráfico circular

Antes

Después

Un gran gráfico circular con ocho porciones de colores etiquetadas Alquiler, Comida, Ocio, Transporte, Compras, Salud, Facturas y Suscripciones con una leyenda diminuta y porcentajes, frente a una barra apilada fina en índigo, coral, ámbar y verde azulado con un extremo pálido, una leyenda de dos por dos con Alquiler $1,100, Comida $412, Ocio $186 y Otros $218, y tres filas de presupuesto con barras finas debajo.

Un gráfico circular es difícil de leer en el mejor de los casos, porque la gente compara mal los ángulos. Ocho porciones lo empeoran. Cinco de las porciones son de unos pocos puntos porcentuales, así que son astillas, y la leyenda que las nombra es de 8 px.

La barra se lee de izquierda a derecha, como una barra de progreso, que todo el mundo ya entiende. Está dibujada a escala frente al presupuesto de $3,200, así que el extremo pálido son los $1,284 que aún quedan, y la pantalla muestra el mismo número dos veces en dos formas. Las cinco categorías pequeñas se agrupan en Otros, $218, y se abren en Presupuestos. Las porciones suman: 1,100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 es $1,916.

Los presupuestos van justo debajo como filas simples: un nombre, "$412 de $600" y una barra de 4 px. Una barra se llena hacia un límite, así que muestra cuánto se acerca el usuario a él. Un gráfico circular no puede.

Regla para reutilizar: usa una barra cuando las partes suman un todo y agrupa las partes pequeñas en Otros.

Corrección 3: cuatro filas, no una tabla

Antes

Después

Un encabezado de Transacciones con botones de filtro Todo, Ingresos y Gastos sobre una tabla de cinco columnas con Fecha, Comercio, Categoría, Método e Importe, diez filas de texto de 9 px y un botón flotante de más en coral que tapa los últimos importes, frente a un encabezado Recientes con Ver todo en coral y cuatro filas: una M verde azulada para Marlow Market, una R violeta para Reel House, una A ámbar para Alder Studio con ingreso en verde, y una C verde para Cityline Transit.

Una tabla de cinco columnas a 9 px es una hoja de cálculo. En un móvil obliga a entrecerrar los ojos y a leer en horizontal a lo largo de una fila, y el botón flotante de más se coloca encima de la columna de importes, así que las últimas cifras quedan tapadas.

Cuatro filas bastan para una pantalla de inicio. Un círculo de 36 px con la letra del comercio da al ojo algo a lo que agarrarse, el comercio va a 15, la categoría a 13 y en gris, y el importe queda a la derecha. El ingreso es el único verde de la lista, así que la nómina destaca sin etiqueta. La fecha, el método de pago y los filtros se abren desde Ver todo y desde cada fila, así que no se pierde nada.

Regla para reutilizar: una pantalla de inicio muestra los últimos pocos movimientos, no todo el historial. Pon los filtros detrás de Ver todo.

Corrección 4: haz que el mes sea el título

Antes

Después

Una fila de encabezado con un icono de menú, la palabra Penny en coral, la palabra Dashboard, un desplegable de noviembre de 2026, un icono de exportar y una campana con un punto rojo, frente a un pequeño logotipo Penny en coral sobre Noviembre en negrita de 28 puntos con un chevron, una campana con un punto rojo y un más en coral.

El encabezado del borrador junta seis cosas al mismo tamaño: menú, logotipo, una etiqueta "Dashboard" que no dice nada, un desplegable, exportar y una campana. El desplegable es el control que la gente realmente usa, y es el más pequeño.

La corrección da un título a la pantalla y el título es el control. "Noviembre" va a 28 en negrita con un chevron, el logotipo es pequeño en su propia línea, y el más pasó de botón flotante al encabezado, junto a la campana. El menú y la etiqueta Dashboard pasaron a la pestaña Perfil, y exportar pasó a Stats.

Regla para reutilizar: si el control principal es un filtro, hazlo el título.

Las correcciones menores

• Se mantiene cada función. El gráfico semanal, Ingresos y Ahorros pasan a Stats. Las cinco categorías pequeñas se agrupan en Otros y se abren en Presupuestos junto con Metas. Los filtros, las fechas y el método de pago se abren desde Ver todo y desde cada fila.
• Márgenes parejos. El borrador tiene 14 px a la izquierda y 12 px a la derecha. La corrección usa 20 a ambos lados.
• Sin cajas. La corrección no tiene tarjeta, ni tile, ni sombra. El espacio y la tipografía separan las cosas.
• Menos pestañas. Cuatro pestañas en una barra plana de 78 px con una línea fina, en lugar de cinco con iconos mezclados rellenos y de contorno.
• Escala tipográfica. El texto va de 13 a 48 px, frente a los 8 a 13 px del borrador.
• Espacio bajo el contenido. La corrección termina 67 px sobre la barra de pestañas, así que nada se corta ni se tapa. En el borrador un más flotante cubre la tabla.

Audita tu propia pantalla de presupuesto

Consigue el archivo de Figma

El archivo gratis incluye el borrador junior, la pantalla corregida y cada parte como componente.

Archivo de Figma gratis

Rediseño de pantalla de control de gastos, antes y después

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

Abrir en Figma

FAQ

¿Cómo se debe diseñar la pantalla de inicio de un control de gastos?

Abre con lo que queda por gastar, en grande, con el presupuesto y los días restantes en una línea debajo. Luego una barra plana para ver adónde fue el dinero, unas pocas filas de presupuesto simples y las cuatro transacciones más recientes, con el resto detrás de Ver todo.

¿Es mejor un gráfico circular o una barra para las categorías de gasto?

Una barra apilada plana, cuando las partes suman un todo. La gente lee la longitud más rápido que el ángulo, y las categorías pequeñas siguen visibles como un segmento de barra en vez de una astilla. Agrupa las más pequeñas en Otros.

¿Cuántas categorías debe mostrar un gráfico de presupuesto?

Tres o cuatro. En esta pantalla cinco categorías pequeñas se agrupan en Otros, $218, y se abren en Presupuestos, así que la barra sigue siendo legible.

¿Qué tamaño debe tener el número principal en una app de finanzas?

Lo bastante grande para ser lo primero que se ve. Aquí el saldo va a 48 px en negrita, frente a 28 px del título del mes y 15 px de las filas.

¿Cuántas transacciones debe mostrar una pantalla de inicio?

De cuatro a cinco filas, a 13 a 15 px, con un enlace a Ver todo para la lista completa, los filtros y el método de pago.

¿Qué debe contener la barra de pestañas de una app de presupuesto?

Bastan cuatro pestañas: Inicio, Stats, Presupuestos y Perfil. Las Metas viven dentro de Presupuestos.

Fuentes

• Ambas pantallas son nuestras, diseñadas y medidas en Figma. La app, Penny, sus comercios y sus importes son inventados. Las cifras son coherentes en ambas pantallas: ingresos de $4,200 menos ahorros de $1,000 son el presupuesto de $3,200, $1,916 gastados dejan $1,284, y 12 días por delante significa 18 de noviembre, la fecha de la transacción más reciente.
• Patrón estudiado: Copilot Money y Monarch, con un número de lo que queda por gastar, una barra para las categorías, filas simples y una barra de pestañas plana.
• Los iconos son de Phosphor (MIT). No se usan fotos.
• Publicado por primera vez como carrusel en App Brainy.