Colores, tipografía y branding

El color y la tipografia no son solo decoracion. Son herramientas de comunicacion que guian la atencion, transmiten significado y refuerzan la credibilidad de tu dashboard. En esta leccion aprenderas a usarlos estrategicamente.

Teoria del color para dashboards

El color comunica significado

Los colores tienen asociaciones universales que debes aprovechar (y respetar):

Color	Significado comun	Uso en dashboards
Verde	Positivo, crecimiento, exito	Metricas que suben, metas cumplidas
Rojo	Negativo, peligro, urgencia	Metricas que bajan, alertas
Amarillo/Naranja	Advertencia, atencion	Valores cercanos a limites
Azul	Confianza, estabilidad, neutro	Color base, elementos informativos
Gris	Neutro, secundario	Texto secundario, lineas de referencia

No reinventes la rueda

Mal uso del color:

┌────────────────────────────────────────┐
│   Ventas: $1.2M  ↑ 15%                │  (en ROJO)
│   Costos: $800K  ↓ 5%                 │  (en VERDE)
└────────────────────────────────────────┘

Confuso: rojo para algo positivo, verde para reduccion de costos

Buen uso del color:

┌────────────────────────────────────────┐
│   Ventas: $1.2M  ↑ 15%                │  (en VERDE)
│   Costos: $800K  ↓ 5%                 │  (en VERDE - costos bajos es bueno)
└────────────────────────────────────────┘

Claro: verde significa "esto va bien" en ambos casos

Construyendo una paleta efectiva

La regla del 60-30-10

Una paleta equilibrada sigue esta proporcion:

┌────────────────────────────────────────────────────────┐
│                                                        │
│   60% Color dominante (fondo, areas grandes)          │
│   ████████████████████████████████████████████████    │
│                                                        │
│   30% Color secundario (secciones, encabezados)       │
│   ████████████████████████████                        │
│                                                        │
│   10% Color de acento (highlights, CTAs)              │
│   ██████████                                          │
│                                                        │
└────────────────────────────────────────────────────────┘

Paleta recomendada para dashboards de negocio

PALETA CORPORATIVA NEUTRAL
─────────────────────────────────────────

Primarios:
┌─────────────────────────────────────────────────┐
│  #1A1A2E   │  #16537E   │  #F8F9FA             │
│  Texto     │  Acento    │  Fondo               │
│  principal │  principal │  claro               │
└─────────────────────────────────────────────────┘

Semanticos:
┌─────────────────────────────────────────────────┐
│  #28A745   │  #DC3545   │  #FFC107   │  #6C757D │
│  Positivo  │  Negativo  │  Advertencia│  Neutro │
└─────────────────────────────────────────────────┘

Series de datos:
┌─────────────────────────────────────────────────┐
│  #4E79A7   │  #F28E2B   │  #E15759   │  #76B7B2 │
│  Serie 1   │  Serie 2   │  Serie 3   │  Serie 4 │
└─────────────────────────────────────────────────┘

Paletas para series de datos

Cuando necesitas diferenciar multiples categorias, usa paletas disenadas para visualizacion:

Categorica (hasta 10 valores):

• Tableau 10
• ColorBrewer Set1
• Google Charts default

Secuencial (valores ordenados):

• Azul claro a azul oscuro
• Gris claro a negro
• Un solo tono, variando saturacion

Divergente (valores con punto medio):

• Rojo - Blanco - Verde
• Naranja - Blanco - Azul
• Ideal para variaciones vs. promedio

Accesibilidad en color

El daltonismo afecta al 8% de hombres

Aproximadamente 1 de cada 12 hombres tiene alguna forma de daltonismo. Tus dashboards deben funcionar para todos.

Problemas comunes

Combinaciones problematicas:

EVITAR:
┌─────────────────────────────────────┐
│  Rojo vs Verde (daltonismo comun)  │
│  ████████  ████████                │
│                                     │
│  Azul vs Purpura (dificil distinguir)│
│  ████████  ████████                │
└─────────────────────────────────────┘

Soluciones de accesibilidad

1. No dependas solo del color:

Buena practica:
┌─────────────────────────────────────┐
│   Ventas: $1.2M  ▲ +15%  (verde)   │
│   Costos: $800K  ▼ -5%   (rojo)    │
└─────────────────────────────────────┘

Las flechas comunican direccion aunque no veas el color

2. Usa patrones ademas de color:

Grafico de barras accesible:
████████████████  Categoria A (solido)
░░░░░░░░░░░░░░░░  Categoria B (rayado)
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  Categoria C (punteado)

3. Asegura suficiente contraste:

• Texto sobre fondo: ratio minimo 4.5:1
• Elementos graficos: ratio minimo 3:1
• Herramienta: WebAIM Contrast Checker

Verificar tu paleta

Antes de finalizar:

1. Ve tu dashboard en escala de grises
2. Usa simuladores de daltonismo (Sim Daltonism, Color Oracle)
3. Si no se distinguen los elementos, ajusta tu paleta

Tipografia en dashboards

Menos es mas

La regla de oro: maximo dos familias tipograficas

JERARQUIA TIPOGRAFICA
─────────────────────────────────────────

Fuente 1: Titulos (Sans-serif moderna)
┌─────────────────────────────────────┐
│  Inter, Roboto, Open Sans           │
│  Pesos: Bold para titulos           │
└─────────────────────────────────────┘

Fuente 2: Datos/Cuerpo (Sans-serif legible)
┌─────────────────────────────────────┐
│  La misma o una complementaria      │
│  Pesos: Regular para texto,         │
│         Medium para numeros         │
└─────────────────────────────────────┘

Escala tipografica

Usa una escala consistente para crear jerarquia:

Elemento	Tamano	Peso	Ejemplo
Titulo dashboard	24-28px	Bold	DASHBOARD DE VENTAS
Titulo seccion	18-20px	Semibold	Rendimiento Mensual
Titulo grafico	14-16px	Medium	Ventas por Region
KPI valor	32-48px	Bold	$1.2M
KPI label	12-14px	Regular	Ingresos Totales
Texto de tabla	12-14px	Regular	Producto A
Nota/leyenda	10-12px	Regular	*Datos hasta 2024-01

Formatos para numeros

Los numeros requieren atencion especial:

FORMATO DE NUMEROS
─────────────────────────────────────────

Valores monetarios:
✓ $1.2M       (abreviado para KPIs)
✓ $1,234,567  (completo para tablas)
✗ $1234567.00 (sin formato, dificil leer)

Porcentajes:
✓ 15.2%       (un decimal es suficiente)
✓ +15.2%      (incluye signo para cambios)
✗ 15.234%     (demasiados decimales)

Unidades:
✓ 2.4K usuarios
✓ 45 min promedio
✗ 2400 usuarios (dificil escanear)

Alineacion de numeros en tablas

Los numeros en columnas deben alinearse a la derecha para facilitar comparacion:

MAL (izquierda):          BIEN (derecha):
┌────────────────┐        ┌────────────────┐
│ Producto │ $   │        │ Producto │   $ │
│ A        │ 100 │        │ A        │ 100 │
│ B        │ 1500│        │ B        │1500 │
│ C        │ 23  │        │ C        │  23 │
└────────────────┘        └────────────────┘

Creando temas en Looker Studio

Looker Studio permite crear temas personalizados para mantener consistencia.

Acceder a temas

1. Theme and Layout panel (barra lateral derecha)
2. O Theme > Customize theme

Elementos del tema

Configuraciones disponibles:

TEMA PERSONALIZADO
─────────────────────────────────────────

Colores base:
├── Primary color (acento principal)
├── Secondary color (acento secundario)
├── Background color (fondo paginas)
└── Font color (texto por defecto)

Colores de graficos:
├── Chart background
├── Grid color
├── Series colors (1-20)
└── Conditional colors

Tipografia:
├── Title font
├── Body font
└── Font sizes por elemento

Bordes y sombras:
├── Border radius
├── Border color
└── Shadow settings

Crear un tema de marca

Paso 1: Obtener colores de la marca

• Color primario de la empresa
• Color secundario
• Colores de texto aprobados

Paso 2: Definir paleta de datos

• Empezar con color primario de marca
• Derivar colores complementarios
• Verificar accesibilidad

Paso 3: Configurar tipografia

Si la marca usa Google Font:
  - Aplicar directamente en Looker

Si usa fuente propietaria:
  - Buscar alternativa similar en Google Fonts
  - Inter ≈ SF Pro
  - Roboto ≈ Helvetica
  - Open Sans ≈ Arial

Paso 4: Guardar como tema

• Nombre descriptivo: "MiEmpresa - Dashboard 2024"
• Aplicar a todos los dashboards nuevos

Consistencia entre dashboards

Beneficios de la consistencia

Aspecto	Beneficio
Reconocimiento	Usuarios identifican tus dashboards instantaneamente
Confianza	Look profesional aumenta credibilidad
Eficiencia	Menos tiempo decidiendo colores/fuentes
Mantenimiento	Cambios globales con un solo tema

Checklist de consistencia

Antes de publicar, verifica:

• Colores siguen la paleta definida
• Tipografia usa solo las fuentes aprobadas
• Tamanos de fuente siguen la escala
• Numeros tienen formato consistente
• Colores semanticos son coherentes (verde=bueno, rojo=malo)
• Logo y branding estan en posicion estandar

Errores comunes a evitar

1. Demasiados colores

Mal:  10 colores diferentes para 10 productos
Bien: 5-7 colores maximo, agrupar "otros"

2. Colores de marca inapropiados

Mal:  Usar rojo de la marca para valores positivos
Bien: Usar rojo de marca para branding, semanticos estandar para datos

3. Fondos que dificultan lectura

Mal:  Texto gris claro sobre fondo gris medio
Bien: Alto contraste, minimo 4.5:1

4. Tipografia decorativa

Mal:  Script fonts para titulos "elegantes"
Bien: Sans-serif limpia y profesional

Puntos clave

• Los colores tienen significado: verde = positivo, rojo = negativo; no rompas estas convenciones

• La regla 60-30-10 crea paletas equilibradas: dominante, secundario, acento

• La accesibilidad no es opcional; usa simbolos ademas de color y verifica contraste

• Maximo dos familias tipograficas: una para titulos, otra (o la misma) para contenido

• Los numeros deben formatearse consistentemente y alinearse a la derecha en tablas

• Los temas de Looker Studio permiten mantener consistencia automaticamente entre todos tus dashboards

En la siguiente leccion aprenderemos storytelling con datos: como estructurar tu dashboard para contar una historia convincente.