Data Visualization Tool
Power BI Mockup Creator
v24 · 2026
Historia del Dashboard Audiencia · decisión · métrica ▾
Define el contexto antes de diseñar. El mockup más efectivo no empieza por los visuales — empieza por la pregunta que tiene que responder.
0%
¿Quién va a ver este dashboard?
¿Qué decisión tiene que tomar?
¿Cuál es el dato más importante?
Contexto adicional (opcional)
Canvas Formato y dimensiones ▾
Layout del Dashboard Márgenes, gap y zonas ▾
Márgenes del canvas ?Distancia entre el borde del canvas y el primer elemento. Power BI: 20–32 px.
Superior
24
Inferior
24
Izquierda
24
Derecha
24
Separación entre bloques ?Gestalt: proximidad — los elementos cercanos se perciben como un grupo.
Gap
12
m 24/24/24/24  ·  gap 12px
Header & filtros
Header ?Barra superior con título, subtítulo y acciones globales.
Fondo del header
Zona de filtros ?Posición de los controles de filtro interactivos.
Sin zona de filtros. Los usuarios no podrán interactuar con los datos directamente.
Bloques de datos
KPIs?Fila de tarjetas KPI. Máx. 6 para no sobrecargar cognitivamente.
4
Zona A?Zona A: gráficos principales (mayor jerarquía visual).
2
Zona B?Zona B: gráficos secundarios (menor jerarquía visual).
2
Título del header
Tamaño letra
18
Subtítulo del header
Tamaño letra
13
Proporciones de zonas Altura relativa por bloque ▾
Distribución de espacio
Header
9% 57px
1
KPIs
18% 113px
2
Zona A
45% 284px
5
Zona B
27% 170px
3
Gap: 12px × 3 = 36px
Estilo Visual Apariencia y geometría ▾
Radio bordes tarjetas ?Radio de esquinas de tarjetas. 0 = angular corporativo. 8–12 = moderno.
Radio
8
Radio canvas ?Radio de las esquinas del canvas completo.
Radio canvas
3
Fondo canvas ?Color de fondo del canvas.
Fondo tarjetas ?Fondo de tarjetas.
Contraste figura-fondo: Bajo ✗ (Δ6)
Borde tarjetas ?Borde de tarjetas.
Borde activo
Guía de cuadrícula ?Guías de alineación estilo Figma. Color salmón para diferenciarlo del contenido.
Mostrar guías
Patrón de lectura ?Z = lectura occidental izquierda→derecha. F = escáner digital en pantalla.
Alta atención
Media
Periferia
Tarjetas KPI Valores y mini gráficos ▾
Valor principal ?Tamaño del valor numérico principal en las tarjetas KPI.
Tamaño
28
Mini gráfico ?Mini gráfico decorativo en la tarjeta KPI (en gris neutro, sin competir con el valor).
Editar KPIs del canvas
▲ Ingresos € 2,84M ▾
▲ Unidades 48.236 ▾
▼ Ticket Medio € 58,90 ▾
▲ Margen 34,7% ▾
Tipo de Visuales Gráficos por zona ▾
Zona A · Visual 1 — principal
Barras & Columnas ▾
Líneas & Áreas ▾
Otros gráficos ▾
Análisis avanzado ▾
Zona A · Visual 2
Barras & Columnas ▾
Líneas & Áreas ▾
Otros gráficos ▾
Análisis avanzado ▾
Zona B · Visual 1
Barras & Columnas ▾
Líneas & Áreas ▾
Otros gráficos ▾
Análisis avanzado ▾
Zona B · Visual 2
Barras & Columnas ▾
Líneas & Áreas ▾
Otros gráficos ▾
Análisis avanzado ▾
Plantillas Empieza desde una base ▾
Plantillas rápidas
C-Suite KPIs + Tendencia + Tabla Pro · Máx. impacto ejecutivo
Aplicar →
Comercial Filtros + Barras H + Cascada + Lollipop · Seguimiento de ventas
Aplicar →
Analítico Sidebar + Slope + Dumbbell + Matrix · Deep-dive de datos
Aplicar →
Storytelling Área prominente + Funnel + Slope · Narrativa de datos
Aplicar →
Operacional KPIs + 3 visuales A + 2 secundarios · Operaciones diarias
Aplicar →
Guardar & Cargar (JSON)
Guarda toda la configuración del mockup como archivo .json. Puedes cargarlo en otro momento o compartirlo con tu equipo directamente.
Comparte tu plantilla en LinkedIn — la comunidad PBI en español te lo agradecerá.
Exportar como PNGAlta resolución ⌘E
Exportar como PDFVectorial ⌘P
Guardar plantilla JSONReutilizable ⌘S
Borja Mora Méndez
1280 × 720 47% 4·2·2
100%
Diseño libre · arrastra y redimensiona
Análisis Comercial · 2026
Análisis de ventas por canal y región
Exportar
⟳ Actualizar
Ingresos
€ 2,84M
+12,4% vs año ant.
Unidades
48.236
+8,1% vs año ant.
Ticket Medio
€ 58,90
-2,3% vs año ant.
Margen
34,7%
+1,2% vs año ant.
Cambiar tipo
Col. agrupadas
Col. 100%
EMMJS
Cambiar tipo
Barras
Barras agrupadas
Zona AZona BZona C
Cambiar tipo
Barras
Zona AZona BZona C
Cambiar tipo
Barras 100%
NorteSurEsteOeste
Proximidad
Elementos cercanos se perciben como grupo
✓
Proximidad correcta
Gap uniforme de 12px — las zonas se agrupan con claridad.
Qué es
El cerebro agrupa automáticamente los elementos que están más cerca entre sí. Lo que está junto se percibe como relacionado, aunque no tenga otra conexión visual.
En dashboards: En un dashboard, el gap entre zonas define qué bloques el ojo percibe como una unidad. Un gap inconsistente hace que el lector agrupe elementos equivocados, rompiendo la narrativa del dato.
Bien aplicado vs mal aplicado
✓ Correcto
Gap uniforme= grupo claro
✗ Incorrecto
Gaps distintos= grupos confusos
Diagnóstico de tu dashboard
✓
Consistencia de gaps 12px
Todos los gaps miden 12px — el ojo agrupa correctamente cada zona.
Rango óptimo: 8–20px, variación máx. ±2px
✓
Tamaño del gap 12px
Gap de 12px dentro del rango óptimo.
Óptimo: 8–20px · <8px = confuso · >28px = desconectado
✓
Simetría de márgenes 24/24/24/24px
Márgenes simétricos (T=24 B=24 L=24 R=24) — el canvas está equilibrado.
T=B y L=R para equilibrio. Asimetría intencional solo en layouts F.
✓
Gap: Header → KPIs 12px
12px — correcto.
✓
Gap: KPIs → Zona A 12px
12px — correcto.
✓
Gap: Zona A → Zona B 12px
12px — correcto.
Borja Mora Méndez
PBI Mockup Creator v22
Presentación activa ESC
Exportar