Formato profesional: colores, tipografía, espaciado

Un dashboard con datos correctos pero diseño pobre pierde credibilidad. En esta lección, aprenderás los principios de diseño profesional que transforman visualizaciones funcionales en reportes que impresionan y comunican con claridad.

Por qué importa el diseño visual

Considera estos dos escenarios:

Dashboard A:

• Colores aleatorios del tema predeterminado
• Títulos genéricos como "Gráfico1"
• Elementos amontonados sin respiración
• Cada visual compite por atención

Dashboard B:

• Paleta de colores corporativa coherente
• Títulos descriptivos con jerarquía clara
• Espacio en blanco que guía la mirada
• Un punto focal claro que destaca

¿Cuál inspira más confianza?

La diferencia no es solo estética. Un buen diseño:

• Reduce el tiempo para encontrar insights
• Aumenta la credibilidad del análisis
• Facilita la toma de decisiones
• Refleja profesionalismo

Teoría del color para dashboards

El poder del color

Los colores no son decoración. En visualización de datos, cada color debe tener un propósito:

Propósito	Uso del color
Categorizar	Distinguir grupos (regiones, productos)
Secuenciar	Mostrar progresión (bajo → alto)
Divergir	Indicar positivo/negativo
Destacar	Llamar atención a un elemento
Alertar	Señalar problemas o éxitos

Tipos de paletas de colores

1. Paleta categórica (cualitativa)

Usar cuando: Diferentes categorías sin orden inherente.

Ejemplo: Regiones de venta
┌─────────────────────────────────────────┐
│  ■ Norte     ■ Sur      ■ Este         │
│  #3498db    #e74c3c    #2ecc71         │
│                                         │
│  ■ Oeste     ■ Centro                   │
│  #f39c12    #9b59b6                     │
└─────────────────────────────────────────┘

Principios:
- Colores con saturación y luminosidad similar
- Suficiente contraste entre colores adyacentes
- Máximo 5-7 colores distintos
- Evitar rojo/verde juntos (daltonismo)

2. Paleta secuencial

Usar cuando: Valores de bajo a alto.

Ejemplo: Intensidad de ventas
┌─────────────────────────────────────────┐
│  Bajo                          Alto     │
│  ░░░░░░░░ → ▒▒▒▒▒▒▒▒ → ████████        │
│  #f7fbff   #6baed6   #08519c            │
└─────────────────────────────────────────┘

Principios:
- Un solo tono que varía en luminosidad
- Claro = valores bajos, Oscuro = valores altos
- Ideal para mapas de calor, escalas

3. Paleta divergente

Usar cuando: Hay un punto medio significativo (positivo/negativo, meta cumplida/no cumplida).

Ejemplo: Variación vs presupuesto
┌─────────────────────────────────────────┐
│  Negativo      Neutro       Positivo    │
│  ████████  →   ░░░░░░   →  ████████    │
│  #d73027      #ffffbf      #1a9850      │
└─────────────────────────────────────────┘

Principios:
- Dos tonos distintos con punto medio neutral
- Igual intensidad en ambos extremos
- Centro claro o neutral

Reglas de oro para colores

Regla 1: Menos colores = mejor

❌ ANTES: 12 colores para 12 meses
   - Difícil recordar qué significa cada color
   - Aspecto caótico

✅ DESPUÉS: 1 color con variación de intensidad
   - O agrupar trimestres (4 colores)
   - Aspecto profesional y legible

Regla 2: Reserva colores de alerta

Convención universal:
- Rojo = Problema, negativo, urgente
- Amarillo/Naranja = Precaución, atención
- Verde = Éxito, positivo, en meta

NO uses rojo para una categoría normal
(el usuario asumirá que algo está mal)

Regla 3: Considera el daltonismo

8% de los hombres tienen algún tipo de daltonismo. Evita depender solo de rojo/verde.

✅ Soluciones:
- Agregar patrones además de color
- Usar azul/naranja en lugar de verde/rojo
- Incluir etiquetas de texto
- Probar con simuladores de daltonismo

Configurar colores en Power BI

Método 1: Colores de tema

1. Vista > Temas > Personalizar tema actual
2. Colores > Define tus colores principales
3. Aplica a todo el reporte

Método 2: Colores condicionales

1. Selecciona visual > Formato > Colores de datos
2. Formato condicional (fx)
3. Define reglas basadas en valores

Método 3: Medidas DAX para color

Color_Indicador =
IF([Ventas] >= [Meta], "#1a9850",
   IF([Ventas] >= [Meta] * 0.8, "#f39c12", "#d73027"))

Tipografía efectiva

Por qué importa la tipografía

La tipografía correcta:

• Mejora legibilidad
• Establece jerarquía
• Proyecta profesionalismo
• Reduce fatiga visual

Principios de tipografía para dashboards

1. Jerarquía de tamaños

┌─────────────────────────────────────────┐
│  TÍTULO DEL DASHBOARD           24-28pt │
│  ════════════════════                   │
│                                         │
│  Título de sección                18pt  │
│  ──────────────────                     │
│                                         │
│  Título de visual                 14pt  │
│                                         │
│  Etiquetas y datos              10-12pt │
│                                         │
│  Notas al pie                    8-9pt  │
└─────────────────────────────────────────┘

Regla: Máximo 3 tamaños de fuente diferentes por dashboard.

2. Peso de fuente

BOLD (negrita): Títulos, KPIs principales, datos destacados
Regular: Cuerpo de texto, etiquetas
Light: Subtítulos, información secundaria

3. Fuentes recomendadas

Sans-serif (para datos):

• Segoe UI (predeterminada de Power BI)
• Arial
• Helvetica
• DIN

Por qué sans-serif:

• Mejor legibilidad en pantalla
• Aspecto moderno y limpio
• Funciona bien en tamaños pequeños

Evitar:

• Comic Sans (nunca profesional)
• Fuentes decorativas
• Más de 2 familias de fuentes

Configurar tipografía en Power BI

Cambiar fuente de títulos:

1. Selecciona el visual
2. Formato > Título > Fuente
3. Ajusta familia, tamaño y color

Cambiar fuente de etiquetas:

1. Formato > Etiquetas de datos
2. Configura fuente, tamaño, color

Establecer fuente predeterminada:

1. Vista > Temas > Personalizar tema
2. Texto > Define fuentes predeterminadas

Espacio en blanco y composición

El poder del espacio vacío

El espacio en blanco (o negativo) no es espacio desperdiciado. Es una herramienta de diseño que:

• Agrupa elementos relacionados
• Separa secciones distintas
• Da "respiración" visual
• Guía el ojo del usuario

Principios de composición

1. Proximidad

Elementos relacionados deben estar cerca. Elementos no relacionados, separados.

✅ CORRECTO:
┌──────────────────────────────────────────┐
│  [KPI Ventas]  [KPI Margen]  [KPI Meta]  │  ← Grupo: KPIs
│                                          │
│  ─────────────────────────────────────   │  ← Separación
│                                          │
│  [Gráfico tendencia ventas]              │  ← Grupo: Detalle
│  [Tabla top productos]                   │
└──────────────────────────────────────────┘

❌ INCORRECTO:
┌──────────────────────────────────────────┐
│  [KPI Ventas]  [Gráfico]  [KPI Margen]   │
│  [Tabla]  [KPI Meta]  [Filtro]           │
│  (Todo mezclado sin lógica de grupo)     │
└──────────────────────────────────────────┘

2. Alineación

Crea líneas invisibles que conectan elementos.

✅ Alineación de borde izquierdo:
┌────────────────────────────────┐
│ ▌Título del dashboard          │
│ ▌                              │
│ ▌[Visual 1]    [Visual 2]      │
│ ▌                              │
│ ▌[Visual 3]    [Visual 4]      │
└────────────────────────────────┘

❌ Elementos desalineados:
┌────────────────────────────────┐
│   Título del dashboard         │
│                                │
│    [Visual 1]  [Visual 2]      │
│  [Visual 3]      [Visual 4]    │
└────────────────────────────────┘

3. Cuadrícula (Grid)

Power BI usa una cuadrícula implícita. Aprovéchala.

Recomendación: Divide tu canvas en:
- 12 columnas (como Bootstrap)
- Filas según necesidad

Ejemplo de layout:
┌───────────────────────────────────────┐
│ Fila 1: Filtros y KPIs (altura: 15%) │
├───────────────────────────────────────┤
│ Fila 2: Visuales principales (60%)    │
├───────────────────────────────────────┤
│ Fila 3: Tablas y detalle (25%)        │
└───────────────────────────────────────┘

4. Márgenes consistentes

Configuración recomendada:
- Margen entre visuales: 10-16px
- Padding interno de visuales: 8-12px
- Margen del canvas: 20-32px

Activa la cuadrícula:
Vista > Ajustar a la cuadrícula
Vista > Mostrar líneas de cuadrícula

Crear jerarquía visual

El principio del "F-Pattern"

Los usuarios escanean dashboards en patrón de F:

┌─────────────────────────────────────────┐
│ █████████████████████████████  ← Lee    │
│ █████████████████████          primero  │
│ █████████████████████████████           │
│ █████████████████                       │
│ █████████████                           │
│ ████████████████████                    │
│        ↓                                │
│    Escanea hacia abajo                  │
└─────────────────────────────────────────┘

Implicación: Coloca lo más importante
arriba a la izquierda

Técnicas de jerarquía

1. Tamaño

Lo más grande atrae más atención.

┌─────────────────────────────────────────┐
│  ┌───────────┐   ┌───┐  ┌───┐  ┌───┐   │
│  │           │   │   │  │   │  │   │   │
│  │   KPI     │   │ $ │  │ % │  │ # │   │
│  │  GRANDE   │   └───┘  └───┘  └───┘   │
│  │           │                          │
│  └───────────┘                          │
│                                         │
│  El KPI principal es 4x más grande      │
└─────────────────────────────────────────┘

2. Color

Los colores brillantes o saturados destacan.

Técnica de "un color de acento":
- 90% del dashboard en tonos neutros (gris, blanco)
- 10% en color de acento para destacar lo importante

Ejemplo:
- Fondo: #F5F5F5 (gris muy claro)
- Textos: #333333 (gris oscuro)
- Acento: #AE4291 (color de marca) solo en KPIs clave

3. Contraste

Alto contraste = más prominencia.

┌─────────────────────────────────────────┐
│  ██████████  ← Fondo oscuro, texto claro│
│  ░░░░░░░░░░  ← Fondo claro, texto oscuro│
│              ← El oscuro destaca más     │
└─────────────────────────────────────────┘

4. Posición

Arriba y a la izquierda = más importante.

Layout de prioridad:
┌───────────────────────────────────────┐
│ [1. Más importante]  [2. Importante]  │
├───────────────────────────────────────┤
│ [3. Contexto]       [4. Detalle]      │
└───────────────────────────────────────┘

Aplicar formato en Power BI: Paso a paso

Configurar el fondo del reporte

1. Clic en área vacía del canvas (deselecciona todo)
2. Formato > Fondo de página
3. Color: Elige un gris claro (#F5F5F5 o #FAFAFA)
4. Transparencia: 0%

Configurar visuales individuales

Paso 1: Fondo del visual

Formato > Efecto > Fondo
- Color: Blanco (#FFFFFF)
- Transparencia: 0%

Paso 2: Borde y sombra

Formato > Efecto > Borde visual
- Color: Gris claro (#E0E0E0)
- Radio: 4-8px (esquinas redondeadas)

Formato > Efecto > Sombra
- Posición: Inferior
- Color: Negro al 10%
- Desplazamiento: 2px

Paso 3: Título del visual

Formato > Título
- Texto: Descriptivo (no "Chart1")
- Fuente: Segoe UI Semibold, 14pt
- Color: #333333
- Alineación: Izquierda

Crear tarjeta KPI profesional

Antes (predeterminado):
┌─────────────────┐
│     45678       │
│                 │
└─────────────────┘

Después (profesional):
┌─────────────────────────────┐
│  Ventas Totales             │
│                             │
│      $456,780               │
│    ▲ +12.5% vs mes anterior │
└─────────────────────────────┘

Pasos:

1. Usa visual de Tarjeta (Card)
2. Formato > Etiqueta de categoría > Activar
3. Formato > Valor del contenido > Fuente 32pt, Bold
4. Agrega visual de texto para contexto adicional

Antes y después: Transformación completa

Dashboard antes del formato

┌──────────────────────────────────────────────────────┐
│ Chart1        Chart2        Chart3        Chart4    │
│ ┌──────┐     ┌──────┐     ┌──────┐     ┌──────┐    │
│ │  /\  │     │ ████ │     │  ●   │     │12345│    │
│ │ /  \ │     │ ███  │     │ ● ●  │     │     │    │
│ │/    \│     │ ██   │     │● ● ● │     │     │    │
│ └──────┘     └──────┘     └──────┘     └──────┘    │
│                                                      │
│ Colores: aleatorios, sin consistencia                │
│ Títulos: genéricos                                   │
│ Espacio: elementos amontonados                       │
│ Jerarquía: todo igual de prominente                  │
└──────────────────────────────────────────────────────┘

Dashboard después del formato

┌──────────────────────────────────────────────────────────────┐
│  Dashboard de Ventas - Enero 2026                            │
│  ═══════════════════════════════════════                     │
│                                                              │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐            │
│  │ Ventas      │ │ Margen      │ │ Clientes    │            │
│  │ $1.2M       │ │ 32.5%       │ │ 1,847       │            │
│  │ ▲ +15%      │ │ ▼ -2.1%     │ │ ▲ +8%       │            │
│  └─────────────┘ └─────────────┘ └─────────────┘            │
│                                                              │
│  ┌────────────────────────────┐ ┌────────────────────────┐  │
│  │ Tendencia de Ventas        │ │ Ventas por Región      │  │
│  │                            │ │                        │  │
│  │       /\    /\             │ │ Norte   ████████ 35%   │  │
│  │      /  \  /  \            │ │ Sur     ██████   28%   │  │
│  │     /    \/    \           │ │ Este    █████    22%   │  │
│  │                            │ │ Oeste   ████     15%   │  │
│  └────────────────────────────┘ └────────────────────────┘  │
│                                                              │
│  Paleta: Consistente con marca                               │
│  Títulos: Descriptivos y claros                              │
│  Espacio: Agrupación lógica con respiración                  │
│  Jerarquía: KPIs prominentes arriba                          │
└──────────────────────────────────────────────────────────────┘

Checklist de formato profesional

Antes de publicar tu dashboard:

Colores:

□ Paleta limitada a 5-7 colores máximo
□ Colores consistentes en todo el reporte
□ Rojo/verde usados solo para positivo/negativo
□ Suficiente contraste para legibilidad
□ Considerado daltonismo (no depender solo de color)

Tipografía:

□ Máximo 2 familias de fuentes
□ Máximo 3 tamaños diferentes
□ Jerarquía clara (títulos > subtítulos > datos)
□ Tamaño mínimo legible (10pt para datos)
□ Negrita usada con moderación

Espaciado:

□ Márgenes consistentes entre elementos
□ Espacio en blanco suficiente
□ Elementos relacionados agrupados
□ Alineación en cuadrícula
□ Visual no amontonados

Jerarquía:

□ Un punto focal claro
□ KPIs principales arriba/izquierda
□ Información secundaria menos prominente
□ Flujo lógico de lectura

Puntos clave de esta lección

1. El diseño afecta la credibilidad - Un dashboard bien formateado inspira confianza
2. Colores con propósito - Cada color debe comunicar algo, no solo decorar
3. Máximo 5-7 colores - Menos colores = más claridad
4. Tipografía jerárquica - Máximo 3 tamaños, 2 familias de fuentes
5. El espacio en blanco es tu amigo - Agrupa, separa y da respiración
6. F-Pattern - Lo más importante arriba a la izquierda
7. Consistencia es clave - Mismos estilos en todo el reporte

Próxima lección

En la siguiente lección, aprenderás a agregar interactividad a tus dashboards: drill-down, tooltips personalizados, bookmarks y navegación. Convertirás reportes estáticos en experiencias exploratorias.

---

Quiz de comprensión

Pregunta 1

¿Qué tipo de paleta de colores usarías para mostrar valores de bajo a alto (ej: mapa de calor de ventas)?

A) Paleta categórica B) Paleta secuencial C) Paleta divergente D) Colores aleatorios

Ver respuesta

Respuesta: B) Paleta secuencial

Una paleta secuencial usa un solo tono que varía en luminosidad (claro para valores bajos, oscuro para valores altos). Es ideal para mostrar progresión de valores sin un punto medio significativo.

Pregunta 2

¿Cuál es la cantidad máxima recomendada de tamaños de fuente diferentes en un dashboard?

A) 2 B) 3 C) 5 D) Sin límite

Ver respuesta

Respuesta: B) 3

Tres tamaños de fuente son suficientes para establecer jerarquía clara: títulos grandes, subtítulos/labels medianos, y datos/notas pequeños. Más tamaños crean confusión visual.

Pregunta 3

Según el patrón de lectura "F-Pattern", ¿dónde deberías colocar la información más importante?

A) Centro del dashboard B) Abajo a la derecha C) Arriba a la izquierda D) Distribuida uniformemente

Ver respuesta

Respuesta: C) Arriba a la izquierda

Los usuarios escanean dashboards en patrón de F: primero horizontal arriba, luego bajan por el lado izquierdo. Por eso los KPIs principales deben estar arriba a la izquierda donde serán vistos primero.

Pregunta 4

¿Por qué se recomienda evitar depender solo de rojo/verde para indicar positivo/negativo?

A) Son colores feos juntos B) Aproximadamente 8% de los hombres tienen daltonismo rojo-verde C) No funcionan bien en pantallas OLED D) Power BI no los renderiza correctamente

Ver respuesta

Respuesta: B) Aproximadamente 8% de los hombres tienen daltonismo rojo-verde

El daltonismo rojo-verde es común. Por eso es importante agregar otras señales visuales (iconos, texto, patrones) además del color para que la información sea accesible para todos los usuarios.