Identidad visual y diseño
Una buena educación al jugador debe ser tan legible y estar tan cuidadosamente diseñada como el resto de tus comunicaciones. Este módulo cubre el modelo de identidad adaptable, los distintos tratamientos visuales del Tier 1 y el Tier 2, y los requisitos de accesibilidad y las convenciones de diseño que usa el sistema de marca.
Operator note: Sustituye
{{PROGRAM_NAME}}por el nombre de tu programa en todo el texto. La paleta predeterminada, el sistema tipográfico y las reglas de nivel forman parte del sistema de marca y no deben modificarse. Lo que sí personalizas — tus colores, tus fuentes, tu logotipo — es exactamente lo que el modelo de identidad adaptable está diseñado para dejarte cambiar. Los guiones del narrador deben grabarse en la voz Tier 1 de Playbook salvo que una sección esté marcada como Tier 2.
Programa: Brand Foundations | Duración: ~20 min | Requisitos previos: Fundamentos del JR
Índice rápido
| Sección | Qué cubre | Tiempo |
|---|---|---|
| Objetivos de aprendizaje | Lo que sabrás tras este módulo | — |
| Sección 1: Principios del sistema visual | Identidad adaptable, color, tipografía, iconos, fotografía | ~7 min |
| Sección 2: Reglas visuales Tier 1 vs Tier 2 | En qué se diferencian visualmente los dos niveles, revisar un diseño en su contexto | ~7 min |
| Sección 3: Requisitos de accesibilidad | Línea base WCAG 2.1 AA, modo oscuro, lista de verificación previa a la publicación | ~4 min |
| Prueba del módulo | 5 preguntas calificadas, 80 % para aprobar | ~2 min |
| Puntos clave | Resumen | — |
| Referencias | Enlaces a recursos de marca de Playbook | — |
Objetivos de aprendizaje
Al completar este módulo, podrás:
- Usar el modelo de identidad adaptable para dar instrucciones a un diseñador sobre un nuevo despliegue en un operador
- Aplicar las reglas visuales Tier 1 vs Tier 2 a cualquier pieza — incluidos los casos en que cambian a mitad de recorrido
- Comprobar en piezas reales los requisitos de contraste de WCAG y las convenciones de Playbook sobre el tamaño de las áreas táctiles y la tipografía
Sección 1: Principios del sistema visual
Lectura
La educación al jugador debe recibir el mismo cuidado que el resto de las comunicaciones del operador. Una jerarquía clara, información útil y una tipografía legible importan más que añadir efectos decorativos.
El modelo de identidad adaptable mantiene una estructura común y, a la vez, deja sitio a la identidad propia del operador:
- Los operadores pueden personalizar la paleta, las fuentes de títulos y de cuerpo, el logotipo, el co-branding y el estilo fotográfico.
- Los patrones de diseño, el espaciado, la jerarquía de la información, el sistema de iconos de doble grosor y la estructura de los componentes se mantienen coherentes.
La identidad predeterminada de Playbook usa el marino #1B2838 para la estructura principal, el verde azulado #10B981 para el énfasis y las acciones, y el naranja #FF6B35 como acento opcional del Tier 1. El material actual puede usar solo una parte de esa paleta. El naranja no es obligatorio en cada pieza educativa.
- Marino #1B2838Fondos principales, títulos e identidad
- Verde azulado #10B981Énfasis y acciones, con el contraste comprobado
- Naranja #FF6B35Acento opcional del Tier 1
Los colores de estado tienen otra función. Éxito (#00C853), advertencia (#FFB300), peligro (#FF3D00) e información (#2979FF) comunican un estado. Mantén estos significados coherentes al adaptar la identidad, e incluye palabras u otra señal para que el color nunca sea la única pista. Verifica el contraste del texto sobre cada fondo.
El sistema tipográfico de referencia usa Inter para títulos y controles, Source Sans 3 para el texto de cuerpo y Source Code Pro para los datos y los ejemplos de números de contacto. Source Code Pro permite distinguir los caracteres parecidos. El material publicado actualmente puede usar Inter en todo; la grabación describe el sistema de referencia, no cada exportación actual.
El sistema de iconos usa dos grosores de trazo. A su tamaño nativo de coordenadas, la estructura exterior usa trazos de 2 unidades y el detalle interior, trazos de 1 unidad. Al ampliar un SVG también se amplían sus trazos, así que no son medidas fijas en píxeles de pantalla para cualquier tamaño de visualización. Usa iconos solo donde ayuden a identificar un control o a explicar el contenido.
La fotografía y la ilustración deben apoyar el mensaje. Evita imágenes que sugieran un éxito garantizado, que glamuricen el juego de altas apuestas o que distraigan del apoyo. El texto sobre una fotografía necesita un tratamiento de fondo controlado y un contraste medido; añadir un degradado no demuestra, por sí solo, que el contraste sea suficiente.
Guion del narrador
Narrator: [transition slide] El sistema visual de {{PROGRAM_NAME}} empieza con tres colores de marca. El marino es el primario — confianza y autoridad. El verde esmeralda es el secundario — elementos interactivos, enlaces, llamadas a la acción. El naranja intenso es el acento — energía para el material Tier 1, y desaparece por completo en el Tier 2.
[show three-color palette] Junto a esos hay un conjunto aparte de colores semánticos — éxito, advertencia, peligro, información. Mantén esos estándar aunque cambies todo lo demás, porque los jugadores los aprenden en cada producto que usan.
[show type system] Tres fuentes, tres trabajos. Inter para los títulos, Source Sans para el cuerpo y Source Code Pro para los números de ayuda — porque evita que un cero parezca una O cuando alguien necesita marcar para pedir ayuda.
[show iconography] El conjunto de iconos lleva la misma idea: dos grosores de trazo — estructura firme, detalle ligero — una sola biblioteca coherente en todos los operadores.
[pause 3s] Todo el sistema es deliberadamente contenido. El ruido visual es el enemigo de la educación al jugador.
Sección 2: Reglas visuales Tier 1 vs Tier 2
Lectura
El Tier 1 abarca la educación rutinaria. Puede usar la paleta completa, fotografías, ilustración y animación con un propósito. Elige los elementos que necesita el mensaje; un diseño educativo sencillo también puede ser Tier 1.
El Tier 2 abarca la comunicación de apoyo y de crisis. Mantén clara la vía: color contenido, una sola columna legible, espaciado generoso y acciones sencillas. Elimina las imágenes promocionales, los chistes y los efectos de celebración.
Las plantillas Tier 2 actuales de Playbook usan una superficie clara con neutros y verde azulado. Sigue esta convención de diseño y comprueba, además, el contraste real, el orden de lectura y la vía de apoyo.
Revisa el diseño en su contexto. ¿Encaja con el resto del material del operador? ¿Tiene una calidad de producción comparable? ¿La jerarquía sirve para esta tarea? ¿Se puede leer y manejar? Estas comprobaciones no sustituyen las de destino, contenido, accesibilidad y cumplimiento local antes de publicar.
Guion del narrador
Narrator: [transition slide] El Tier 1 y el Tier 2 usan la misma calidad de marca. La diferencia es la contención, no la calidad.
[show tier 1 sample board] El Tier 1 recibe el sistema visual completo. Fondos marinos, acentos verde azulado, resaltados naranja intenso, iconos lúdicos, ilustración de marca. Aquí es donde vive la personalidad.
[show tier 2 sample board] El Tier 2 lo reduce todo. El naranja desaparece. La decoración desaparece. La paleta baja a neutros más verde azulado para las acciones esenciales. El diseño pasa a columna única, el espacio en blanco se abre, y el Tier 2 siempre se muestra en modo claro — aunque el jugador tenga activado el modo oscuro.
[pause 3s] Cuando alguien necesita ayuda, cada elemento visual de más es fricción.
Sección 3: Requisitos de accesibilidad
Lectura
Comprueba el texto, los controles y el orden de lectura reales; una página visualmente ordenada puede seguir siendo inaccesible.
Requisitos de contraste de WCAG 2.1 AA: el texto normal necesita al menos 4,5:1; el texto grande, al menos 3:1. Grande significa al menos 18 puntos (24 px CSS), o 14 puntos en negrita (unos 18,67 px CSS). Los componentes de interfaz no textuales y los objetos gráficos pertinentes necesitan 3:1, con las excepciones que prevé el criterio.
Convenciones de diseño adicionales de Playbook: procura que los controles midan al menos 44 × 44 px CSS y que el texto de cuerpo sea de al menos 16 px CSS. No los presentes como requisitos de WCAG 2.1 AA. El área táctil de 44 píxeles figura en el criterio 2.5.5 de WCAG 2.1 AAA, con excepciones; el criterio 2.5.8 de WCAG 2.2 AA usa un mínimo de 24 píxeles o las excepciones de espaciado y de otro tipo que especifica. El tamaño de letra, por sí solo, no garantiza la legibilidad ni la conformidad.
El blanco sobre el marino #1B2838 mide unos 14,92:1; el verde azulado #10B981 sobre ese marino, unos 5,88:1. Estas mediciones valen para estos colores sólidos exactos. Comprueba cada combinación real, incluidos los estados al pasar el puntero, con foco, desactivado y de error. El texto sobre fotografías debe probarse contra el fondo que realmente ocupa.
Comprobaciones del modo oscuro: #6B6B8A sobre #1A1A2E mide unos 3,33:1. Eso queda por debajo del umbral para texto normal, aunque en tu monitor parezca legible. Usa un color más claro para el texto de cuerpo normal. Comprueba las imágenes y los colores de estado en el tema que se despliega; no supongas que una sola regla, como «usa siempre texto oscuro», hará que todas las combinaciones aprueben.
Antes de dar el visto bueno:
- Maneja cada acción con el teclado. Comprueba que el foco sea visible, que el orden sea lógico y que no haya trampas de teclado.
- Lee la página con tecnología de asistencia. Usa encabezados, etiquetas y avisos de estado con sentido.
- Da a las imágenes informativas alternativas útiles y a las decorativas, alternativas vacías. No dupliques sin necesidad el texto adyacente.
- Mantén el significado disponible sin depender solo del color, el movimiento o el audio.
- Comprueba el zoom, la redistribución y el área táctil real en pantallas estrechas y bajas.
- Verifica los requisitos locales en tus políticas internas.
Normas: W3C, contraste mínimo, WCAG 2.1, tamaño del área táctil, AAA y WCAG 2.2, tamaño mínimo del área táctil, AA.
Guion del narrador
Narrator: [transition slide] La accesibilidad no es opcional. Es el fundamento de una educación al jugador inclusiva.
[show WCAG checklist] El contraste de color cumple el WCAG doble A — cuatro coma cinco a uno para el texto de cuerpo, tres a uno para el texto grande. Las áreas táctiles miden al menos cuarenta y cuatro píxeles. Cada diseño funciona por teclado y se lee con claridad para un lector de pantalla. Nunca uses el color por sí solo para transmitir significado. Cada imagen recibe texto alternativo. Y el Tier 2 siempre se muestra en modo claro, porque el modo oscuro puede sentirse aislante en una crisis.
[pause 3s] El objetivo es simple: cada jugador, sea cual sea su capacidad, puede acceder a cada pieza de material.
[transition to exercise] Antes del test, seis decisiones de diseño esperan sobre tu escritorio. Para cada una, decide: publicar o corregir. Cada respuesta sale directamente de las reglas que acabas de aprender. Recórrelas y luego continúa.
Exercise: ¿Publicar o corregir?
Type: scenario
Instructions: ¿Publicar o corregir? Juzga solo el tratamiento visual. Los contactos, enlaces y avisos se revisan aparte. Usa las medidas indicadas, no la imagen a escala.
| Elemento | Categoría correcta | Retroalimentación si es correcto | Retroalimentación si es incorrecto |
|---|---|---|---|
| Revisa el tratamiento de este póster Tier 1 para el local. | Publicar | Una jerarquía clara, una tipografía coherente y cifras ligadas a las reglas encajan en esta pieza Tier 1. El naranja y la fotografía son opcionales. | Publicar. La jerarquía y las cifras ligadas a las reglas funcionan, y el Tier 1 no necesita naranja ni una foto. |
| Revisa esta tarjeta de exhibición para un expositor junto al material comercial del operador. | Corregir | Sin identidad compartida, y con un eslogan donde debería haber información sobre probabilidades. Usa la plantilla actual de tarjeta de exhibición y datos ligados a las reglas. | Corregir. El estilo genérico queda por debajo del material comercial de al lado, y el eslogan no da ningún dato sobre probabilidades. |
| Revisa esta pantalla de pausa de la cuenta como comunicación Tier 2. | Corregir | El confeti, un titular promocional y una acción naranja compiten con una decisión de apoyo. Dale un tratamiento contenido, no clínico, y no des a entender que la pausa ya ha empezado. | Corregir. El confeti y el naranja celebran una decisión de apoyo Tier 2. Usa el tratamiento contenido de apoyo y no des a entender que la pausa ya ha empezado. |
| Revisa el tratamiento visual de esta pantalla de entrada al apoyo y las especificaciones indicadas. | Publicar | La columna única, la acción clara, el contraste medido y el área táctil de 48 píxeles encajan con la tarea de apoyo. | Publicar. La contención es deliberada en el Tier 2, y el contraste de 5,88:1 y el área táctil de 48 píxeles superan las comprobaciones de este módulo. |
| Revisa el cuestionario para móvil y las medidas indicadas de sus áreas táctiles. | Corregir | Las áreas táctiles de 36 × 36 px CSS no llegan a los 44 píxeles que fija Playbook. WCAG 2.1 sitúa 44 px en AAA, no en AA. Agrándalas. | Corregir. Un buen contraste del texto no compensa áreas táctiles de 36 píxeles. Playbook fija 44 × 44 px CSS: AAA en WCAG 2.1, no AA. |
| Revisa estos dos mensajes de estado de la cuenta. | Corregir | Son estados de la cuenta, no acentos de campaña: necesitan los colores estándar de éxito y advertencia. Conserva también las etiquetas de texto. | Corregir. Estos mensajes toman prestados el naranja y el marino de la marca. Los estados de la cuenta necesitan los colores estándar de éxito y advertencia, con sus etiquetas de texto. |
Prueba del módulo
Narrator: [transition slide] Es hora de comprobar lo que has aprendido. Cinco preguntas que cubren el sistema visual, las reglas visuales del Tier 1 y el Tier 2, y el piso de accesibilidad. Necesitas un 80 % — es decir, cuatro de cinco — para dar por completado este módulo. Tómate tu tiempo. Si no apruebas al primer intento, puedes repasar el material y volver a hacer la prueba.
Question 1
Assesses: Objetivo de aprendizaje 1
Stem: ¿Cuál es la «regla de calidad visual» para el contenido de {{PROGRAM_NAME}}?
| Opción | Texto |
|---|---|
| A | El contenido de {{PROGRAM_NAME}} debería usar una estética distintiva y clínica para diferenciarse del contenido comercial |
| B | El contenido de {{PROGRAM_NAME}} debe igualar la calidad de producción del marketing comercial del operador |
| C | El contenido de {{PROGRAM_NAME}} debería ser minimalista para no competir con la marca del operador |
| D | El contenido de {{PROGRAM_NAME}} debería seguir las normas de diseño de comunicación sanitaria gubernamental |
Correct: B
Explanation: La educación que parece más barata que las promociones de al lado se trata como letra pequeña. Iguala el cuidado; la utilidad y la accesibilidad necesitan sus propias comprobaciones.
Source: Visual System
Question 2
Assesses: Objetivo de aprendizaje 1
Stem: ¿Qué es el «modelo de identidad adaptable»?
| Opción | Texto |
|---|---|
| A | Un sistema donde {{PROGRAM_NAME}} se ve idéntico en todos los operadores |
| B | Un sistema donde los operadores conservan la identidad estructural de {{PROGRAM_NAME}} (diseño, jerarquía, iconos) pero aplican sus propios colores y fuentes |
| C | Un sistema que cambia automáticamente según el segmento del jugador |
| D | Un sistema que usa IA para generar diseños personalizados por mercado |
Correct: B
Explanation: Mantener coherentes el diseño, la jerarquía, los iconos y el espaciado permite reconocer {{PROGRAM_NAME}} en todos los operadores, mientras cada uno conserva sus colores y fuentes.
Source: Visual System
Question 3
Assesses: Objetivo de aprendizaje 2
Stem: ¿Qué orientación debería guiar la revisión de este borrador de apoyo Tier 2?
| Opción | Texto |
|---|---|
| A | Usar rojo y colores de advertencia en todo para señalar urgencia |
| B | Hacerlo visualmente escaso — sin ningún estilo de marca |
| C | Misma calidad de marca pero reduciendo a lo esencial: diseño limpio, espacio en blanco generoso, contraste máximo, cero ruido visual |
| D | Usar un sistema de diseño completamente distinto del Tier 1 |
Correct: C
Explanation: Nada debe competir con la información de apoyo. El Tier 2 conserva la calidad de la marca y elimina la decoración: con contención, no clínico, sobre fondo claro.
Source: Visual System
Question 4
Assesses: Objetivo de aprendizaje 3
Stem: ¿Qué ratio de contraste mínimo de WCAG 2.1 AA se aplica al texto de cuerpo regular de 16 px CSS de esta especificación?
| Opción | Texto |
|---|---|
| A | 2:1 |
| B | 3:1 |
| C | 4,5:1 |
| D | 7:1 |
Correct: C
Explanation: Un texto regular de 16 px CSS es texto normal, así que necesita 4,5:1. El texto grande (3:1) empieza en 24 px CSS, o unos 18,67 px en negrita.
Source: Accessibility
Question 5
Assesses: Objetivo de aprendizaje 1
Stem: ¿Por qué {{PROGRAM_NAME}} usa Source Code Pro para los números de ayuda?
| Opción | Texto |
|---|---|
| A | Se ve más moderna que otras fuentes |
| B | Es la fuente primaria de la marca |
| C | Distingue caracteres similares — 0/O y 1/l/I son visualmente distintos |
| D | La exigen los reguladores del juego |
Correct: C
Explanation: Confundir 0 y O, o 1 y l, podría significar marcar mal el número de ayuda. Source Code Pro los mantiene distintos.
Source: Visual System
Puntos clave
- Iguala la calidad de producción del resto de las comunicaciones del operador. Usa una jerarquía clara, una tipografía legible e información adecuada a la tarea.
- Los operadores pueden adaptar los elementos de identidad y mantener coherentes el diseño, el espaciado y el comportamiento de los componentes.
- La paleta predeterminada es marino, verde azulado brillante y naranja opcional. Mantén coherentes los colores funcionales de estado y sus etiquetas de texto.
- El Tier 1 puede usar el sistema visual más amplio. Las plantillas Tier 2 actuales usan superficies claras, color contenido y vías de apoyo sencillas.
- Revisa la pieza real en su contexto. La aprobación visual no sustituye las comprobaciones de contenido, destino, accesibilidad y publicación local.
- El contraste de WCAG AA para texto normal es 4,5:1. Playbook especifica además áreas táctiles de 44 × 44 px CSS y texto de cuerpo de 16 px CSS. Comprueba el uso con teclado, el acceso con tecnología de asistencia y la redistribución.
Fundamento documental
No hace falta que los leas, pero son los estándares publicados y la investigación que respaldan las reglas del módulo — por si un colega pregunta.
- World Wide Web Consortium (2018). Web Content Accessibility Guidelines (WCAG) 2.1. Recomendación del W3C. Por qué está aquí: los criterios de contraste y de interacción. El criterio de tamaño del área táctil de 44 × 44 px CSS es de nivel AAA en WCAG 2.1; Playbook lo adopta como convención de diseño adicional.
- Arditi, A. & Cho, J. (2005). Serifs and font legibility. Vision Research, 45(23), 2926–2933. Por qué está aquí: la evidencia de legibilidad detrás de las elecciones tipográficas funcionales, como la distinción de caracteres — por qué una fuente que separa 0/O y 1/l/I no es una preferencia estética.
- Robins, D. & Holmes, J. (2008). Aesthetics and credibility in web site design. Information Processing & Management, 44(1), 386–399. Por qué está aquí: evidencia experimental de que la calidad de producción visual determina si las personas juzgan el contenido como creíble — el respaldo empírico de la regla de calidad visual.
Referencias
| Recurso | Para qué usarlo |
|---|---|
| Visual System | Identidad adaptable, paleta, tipografía, iconografía, fotografía |
| Accessibility | Línea base WCAG, tablas de contraste, reglas de modo oscuro, lista de verificación |
| Collateral templates | Especímenes Tier 1 y Tier 2 para dar instrucciones y comparar |