Aplicación de escritorio
Diseño de dashboard de ingresos SaaS
Este diseño de dashboard de ingresos SaaS reúne métricas de suscripción, un gráfico de ingresos de 30 días, estados de cuentas y eventos recientes en una sola vista general.
Casos de uso del dashboard
- Revisiones de ingresos SaaSRevisa a la vez ingresos, cuentas, churn y latencia.
- Seguimiento de cuentasCompara nombres de cuenta, planes y estados en una sola tabla.
- Seguimiento de eventos de suscripciónLee los eventos recientes de cada cuenta junto con su hora y su plan.
Aspectos destacados del diseño del dashboard
- Cuatro métricas de resumenMRR, cuentas activas, churn y latencia P95 encabezan la vista.
- Ingresos y cuentasUn amplio gráfico de tendencia se sitúa junto a las filas de cuentas nuevas.
- Eventos recientesCuatro eventos de ejemplo ordenados por la hora mostrada.
Vista del dashboard
1 / 1Una vista general de ingresos SaaS
La pantalla lleva el encabezado “Overview · April 2026”, con un control “Last 30 days” y un botón “+ New report” en la parte superior. Debajo, cuatro paneles de métricas presentan MRR ($48.2K), cuentas activas (3,184), churn (30d) (2.1%) y latencia P95 (182 ms), cada uno con un valor de cambio secundario. Así, medidas comerciales y técnicas entran en la misma primera lectura, aunque no se explica cómo se definen esas medidas tan distintas.
El color distingue de un vistazo las cifras secundarias: tres son verdes, mientras que el “+0.4 pp” del churn es rojo. El signo por sí solo no indica si un cambio es favorable, por lo que la etiqueta y la unidad importan. Las cifras y los datos de cuenta aportados son contenido de ejemplo ilustrativo, no resultados operativos verificados.
Cómo leer los paneles de ingresos y cuentas
La siguiente fila combina “Revenue · 30 days” con “New accounts”. El CSS define esta fila con una proporción de columnas de 2:1, lo que da al gráfico de líneas más espacio que a la tabla de cuentas. Esa proporción convierte la forma de los ingresos en el elemento visual principal y mantiene plan y estado disponibles para una comprobación rápida de cuentas.
El gráfico sube en conjunto, pero con caídas visibles; comunica dirección y variación más que un valor diario preciso, ya que no se muestran etiquetas de ejes ni números trazados. La tabla contigua tiene tres campos explícitos: Account, Plan y Status. Por ejemplo, Linear tiene plan Team y está activa, mientras que Notion tiene plan Team y está en prueba. Mantener plan y estado en columnas separadas ayuda a distinguir el nivel de suscripción del estado de la cuenta.
Lectura de métricas
Compara los cuatro valores principales y sus cambios, y comprueba cada unidad y etiqueta antes de interpretar la dirección.
Revisión de cuentas
Usa la tabla de cuentas para relacionar una organización con su plan y su estado, sin tratar los nombres de plan como etiquetas de estado.
Del resumen a los eventos recientes
El orden de lectura visual va de las cuatro métricas al gráfico y la tabla de cuentas nuevas, y luego hacia abajo hasta “Recent events”. La hoja de estilos hace que esa sección de eventos ocupe toda la fila bajo los paneles de dos columnas. Su tabla usa Time, Account, Event y Plan, de modo que el lector puede conectar una acción registrada con una organización y con un plan.
Los ejemplos listados incluyen “Upgraded to Team” para Acme Co y “Cancelled subscription” para Globex. Esas filas aportan un contexto que las métricas de resumen y la tabla de estado de cuentas no ofrecen, pero la pantalla no especifica cómo se relacionan los eventos con las métricas mostradas. El orden y las marcas de tiempo de ejemplo la convierten en una vista de actividad reciente, no en prueba de un historial de auditoría completo.
| Área | Campos visibles | Finalidad de lectura |
|---|---|---|
| Paneles de métricas | Métrica, valor, cambio | Revisar las medidas principales y sus variaciones. |
| Cuentas nuevas | Cuenta, plan, estado | Comparar el nivel de la cuenta con su estado mostrado. |
| Eventos recientes | Hora, cuenta, evento, plan | Relacionar una entrada de actividad de ejemplo con una cuenta y un plan. |
Límites visibles del diseño y de sus capacidades
Este artefacto presenta un diseño de dashboard con valores de ejemplo y controles visibles. “Last 30 days” y “+ New report” parecen interactivos, pero la evidencia disponible no establece que cambien el rango de fechas, creen un informe o se conecten a un servicio en vivo. Por tanto, el gráfico, las métricas y las tablas deben leerse como contenido diseñado, no como prueba de datos en vivo, almacenamiento o acciones completadas.
El código fuente define una barra lateral de 220px junto al espacio de trabajo principal. La vista capturada se centra en el área principal: una fila de gráfico y cuentas en proporción 2:1 seguida de una tabla de eventos de ancho completo. Por debajo de 900px, el código apila esos dos paneles y pasa las tarjetas de métricas a dos columnas; no incluye un diseño de navegación completo específico para móvil.
Cómo crear un diseño de dashboard de ingresos SaaS en OpenDesign
Define la vista general y las métricas
Empieza con un encabezado de resumen con fecha y cuatro paneles de métricas. Elige medidas que tengan sentido juntas para tu audiencia y especifica qué significa cada valor y cada cambio, incluidas las unidades y los periodos de comparación. Mantén los valores de ejemplo claramente diferenciados de los datos operativos verificados.
Prompt sugeridoCrea un diseño de dashboard de ingresos SaaS con una vista general fechada, cuatro paneles de métricas para MRR, cuentas activas, churn a 30 días y latencia P95, un gráfico de líneas de ingresos de 30 días, una tabla de cuentas nuevas y una tabla de eventos recientes. Usa datos de ejemplo ilustrativos claramente identificados. Muestra los controles visibles de rango de fechas y de nuevo informe solo como elementos de diseño; no sugieras servicios operativos ni datos en vivo.
Organiza el gráfico y el contexto de las cuentas
Ajusta el equilibrio entre el gráfico de ingresos y la tabla de cuentas. Conserva la distinción entre cuenta, plan y estado, y decide si el gráfico necesita ejes o valores visibles para la tarea de lectura prevista. Comprueba que la tabla, más detallada, siga siendo legible junto a la vista de tendencia.
Conecta los eventos con su contexto
Dale a la lista de eventos campos de hora, cuenta, evento y plan, y comprueba que las filas de ejemplo comuniquen una acción sin sugerir un historial completo. Revisa la transición de las métricas de resumen al gráfico, las filas de cuentas y los eventos con el ancho de espacio de trabajo previsto.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de wireframe de dashboard de analítica
Un dashboard greybox de OpenDesign representa un espacio de trabajo de analítica mediante una barra lateral, cuatro marcadores de posición KPI, un gráfico esquemático, cinco filas de tabla y anotaciones de maquetación en azul.
Aplicación de escritorio
Diseño de aplicación de bandeja de entrada para revisiones de código
El diseño de aplicación de bandeja de entrada para revisiones de código reúne solicitudes de revisión, fallos de CI, incidencias asignadas y actividad en un espacio de trabajo fácil de revisar para la priorización diaria.
Aplicación de escritorio
Diseño de panel de rendimiento de contenido
Un panel de contenido oscuro conecta instantáneas de plataformas con inspección de gráficos, planificación de borradores y una vista más profunda de las señales de audiencia y conversión.
Aplicación de escritorio
Diseño de planificador de excursiones
Planifica seis paradas programadas en la ciudad ficticia de Solara Bay, con un mapa ilustrado, estimaciones de trayectos a pie y advertencias útiles sobre la ruta.
Aplicación de escritorio