Unidesa Gaming · Comunicación Corporativa

unidesagaming.com documento de partida

Estructura, contenido y sistema para la nueva web. Reúne las siete plantillas maestras, la identidad visual del manual de marca 2026, el sistema de diseño con el que deben construirse las páginas, el modelo de contenido que las alimenta y el cronograma con el reparto de responsabilidades.

Los wireframes fijan qué información contiene cada página y en qué orden. El diseño visual, la composición fina y la biblioteca de componentes son trabajo de la agencia, dentro de las reglas que recoge el apartado de sistema.

MarcaUnidesa Gaming Dominiounidesagaming.com IdentidadGuía de estandarización 2026 v1.0 Publicación17 de diciembre de 2026
Pilar 01

Conocemos a nuestros clientes

Más de cuarenta años en el mismo mercado, con el mismo interlocutor. El producto está pensado para el local español real: sus metros, su barra, su instalación y su normativa.

Cómo se demuestraPermanencia, cobertura territorial y producto diseñado desde el local, no desde la planta.
Pilar 02

Producimos las mejores máquinas

Sólidas y con poco mantenimiento. La durabilidad es un atributo del producto, no una consecuencia del servicio, y es lo que hace que la máquina siga rentando años después.

Cómo se demuestraLongevidad: máquinas de hace quince años todavía en explotación. El archivo es la prueba.
Pilar 03

Transformamos el sector con productos eficientes

Es el único pilar verificable de forma objetiva. Consumo, espacio ocupado, tiempo de puesta en marcha y rendimiento del salón con sistemas y link.

Cómo se demuestraCifras comparables y registro de lo que se introdujo antes que nadie.

El servicio, en su sitio

El servicio posventa es un hecho, no el hilo del relato. Si vertebra la narración, el subtexto es que hace falta; como garantía funciona al revés, refuerza la confianza sin sembrar la duda.

Aparece como compromiso enunciado en pocas palabras, repetido donde alguien decide: franja de la portada, ficha de producto y área de cliente. Encaja con el acompañamiento que la propia misión de marca recoge como parte de la propuesta.

Plantilla 01

Inicio

Catorce bloques en scroll. Los tres primeros sitúan y comprometen; el cuarto captura contacto; del séptimo al décimo desarrollan un pilar cada uno, con el archivo como prueba compartida; el resto resuelve lo que hoy obliga a llamar por teléfono.

unidesagaming.com
1Barra fija96 px · logotipo vertical
logo 1:1
ProductosMueblesSistemasCompañíaSoporte
ES ▾Mi cuenta
2Hero cinemático100 vh · vídeo en bucle
render o vídeo a sangre · máquina retroiluminada sobre Ublack
Ver productosDónde verlos↓ scroll

Claim que sintetice los tres pilares en una frase. Única pieza de copy imprescindible antes de maquetar.

3Franja de compromisoun dato por pilar + garantía
desde 1982
máquinas en explotación
consumo por máquina
años de recambios

El cuarto dato es la garantía: un plazo público de disponibilidad de recambios obliga al competidor a igualarlo o a callarse.

4¿Ya tienes una Unidesa Gaming?objetivo principal de captación

Regístrala y accede a garantía, manuales, actualizaciones y avisos de recambio

Nº de serieRegistrar
escanea el código
de tu máquina
5 · Novedadescarrusel horizontal, arrastre libre
Orizon
Manhattan Premium
Manhattan Magic
6 · Elige tu canalbifurcación del catálogo
Hostelería
Salón
Bingo y casino
Sistemas
5Pilar 01 · Diseñadas desde el localscroll sticky
el bar y el salón españoles,
no la planta

Metros, barra, instalación eléctrica, normativa autonómica: el producto nace de restricciones reales

Conocimiento del negocio del cliente, nunca del jugador. Formularlo como capacidad de retención chocaría con el discurso de juego responsable.

8 · Pilar 02 · Hechas para durarscroll sticky
materiales y montaje
ciclos de prueba
quince años después

Horas de prueba antes de producción y algún caso real de máquina antigua todavía en explotación.

9 · Pilar 03 · Eficiencia demostrableabsorbe Sistemas
esquema de interconexión, link y progresivos
Consumo
Espacio ocupado
Puesta en marcha

Cifras comparables. Es el único pilar verificable desde fuera, así que es el que más rendimiento da si hay números.

6El archivo desde 1982prueba de los pilares 2 y 3
línea de décadas · lo que había antes y lo que vino después
Entrar al archivo¿Sigue funcionando alguna? Cuéntanoslo
11 · Garantía y respaldouna línea y tres accesos
Soporte técnicoRecambiosDocumentación
12 · Juego responsable y RSCsección con peso propio
fotografía editorial
Nuestro compromiso
13 · Contacto segmentadoformulario ramificado

¿Qué te trae por aquí?

Tengo una máquinaQuiero una en mi localSoy operadorDistribuidorPrensaEmpleo
14 · Pielogotipo vertical · legal · calidad · línea ética

Plantilla 02

Catálogo de productos

El catálogo lista productos, no juegos sueltos. Cada producto es un conjunto de juegos sobre un mueble concreto y con unas mecánicas definidas. Los filtros tienen que llevar al operador, en un paso, a lo que puede instalar en su comunidad y en su tipo de local.

unidesagaming.com/productos
Productos
64 productos · 18 disponibles en Catalunya
Ordenar: novedad ▾
1Comunidad
Catalunya ▾

Canal

☑ Hostelería
☐ Salón
☐ Bingo y casino

2 Mueble

☐ Manhattan
☐ Elite Compact
☐ Elite Next
☐ Vitrina mural

Mecánica

☐ Link o jackpot
☐ Multijuego
☐ Rodillos clásicos

Estado

☐ Novedad
☐ Próximo lanzamiento

3 Filtros en la URL, para compartir selecciones

Catalunya ✕Hostelería ✕Limpiar
render 1:1
Manhattan · 12 juegos
Manhattan Premium
Dónde verlo
render 1:1
Manhattan · 10 juegos
Manhattan Magic
Dónde verlo
render 1:1
Elite Compact · 8 juegos
Omega Link
Dónde verlo
render 1:1
Elite Next · 14 juegos
Orizon
Dónde verlo
render 1:1
Manhattan · 9 juegos
Manhattan Mirage
Dónde verlo
4 carga progresiva

Plantilla 03

Ficha de producto

La página donde el operador decide, y la que recibe la búsqueda de quien ha visto la máquina en un local. Reúne el paquete de juegos, las variantes de mueble, la eficiencia y la homologación, en ese orden: primero qué es y qué trae, después cuánto rinde y dónde se puede instalar.

unidesagaming.com/productos/manhattan-premium

Productos · Hostelería · Manhattan Premium

render grande sobre Ublack
+ vídeo de pantalla en juego
Manhattan Premium

Hostelería · mueble Manhattan · multijuego con link · 12 juegos

Dónde verloRegistrar mi máquina
Ficha técnica PDF
Disponibilidad
Homologado en Catalunya · cambiar comunidad
1Juegos incluidosel paquete completo, con su arte
juego
juego
juego
juego
+8

Cada juego con su nombre, arte y mecánica. Es el bloque que hoy no existe y el que más pesa en la decisión.

2Variantes de mueblesolo si el producto tiene más de una
Manhattan
Elite Compact
Salón x3 topper
Vitrina mural

Bloque condicional: desaparece en los productos que existen en un solo mueble.

3Eficienciapilar 03
Consumo
Espacio
Puesta en marcha

Comparado con la media del mercado o con el producto anterior. Un número solo no dice nada.

4 · Especificacionescampo estructurado, no texto libre
Pantallas
Aceptadores
Dimensiones
Sistema o link
5 · Homologacionespor comunidad y variante
tabla con comunidad, fecha y expediente
4Linajepilar 02
familia Manhattan
sustituye a…
en el archivo
5Garantía y documentaciónacceso mixto
Garantía · recambios disponibles · cobertura SAT
Ficha comercialManual · requiere cuenta
8 · Productos relacionadosmismo mueble o misma mecánica
Manhattan Premium
barra pegajosa al hacer scroll
PDFDónde verlo

Plantilla 04

Página de máquina

Cada unidad instalada lleva un código impreso en una pegatina discreta que abre su propia página. Se accede sin credenciales, porque quien escanea suele ser un técnico de campo o el hostelero, y ninguno tendrá nunca cuenta. La página no se indexa ni aparece en el mapa del sitio: solo llega quien tiene la máquina delante.

unidesagaming.com/m/{código}

unidesagaming.com/m/7fq2k9

foto del producto
Manhattan Premium

Máquina verificada · instalada 03/2024 · en garantía

¿Quién eres?

Operador o técnico
El local que la aloja
Solo tengo curiosidad
Asistencia para esta máquina
Guía rápidaAvisar al SAT

Juego responsable · ayuda al jugador · esta página no permite jugar

Operador o técnico

Añadir a mi cuenta
Manual y firmware
Pedir un recambio
Ver garantía

El local

Kit con el nombre del bar
Material de señalización
Quién es tu operador
Contacto directo

Curiosidad

Ficha del producto
El archivo desde 1982
Cómo se fabrica
Juego responsable

Plantilla 05

Mi cuenta

El área privada del operador. Se organiza alrededor de sus máquinas: cuáles tiene, en qué estado están y qué documentación puede descargar de cada una. Todo lo que muestra sale de las máquinas que el cliente ha registrado, de modo que la documentación llega filtrada y no hay que buscarla en un catálogo general.

unidesagaming.com/mi-cuenta
Recreativos del Turia, S.L.
Sesión iniciada · último acceso 28/08
Añadir máquinaSalir
1Secciones

Resumen
Mis máquinas
Documentación
Recambios
Datos de empresa
Usuarios

2Resumenestado del parque de un vistazo
máquinas registradas
en garantía
avisos abiertos
documentos nuevos
3Avisosgenerados desde el parque registrado
Actualización de firmware disponible · Manhattan Premium
Recambio recomendado por antigüedad · 2 máquinas
Garantía que vence en 60 días · UD‑4471
4Mis máquinasbuscador, filtro y exportación
BuscarProducto ▾Estado ▾Exportar
Manhattan PremiumUD‑4471 · Bar NouEn garantía Documentos
Manhattan MagicUD‑3980 · Salón CentroFuera de garantía Documentos
Omega LinkUD‑4102 · Bar NouEn garantía Documentos
5Máquina desplegadadocumentación de esa unidad

UD‑4471 · Manhattan Premium · instalada 03/2024 · variante Manhattan

Manual de instalación
Esquema eléctrico
Firmware vigente
Certificado de homologación
Ver recambiosAvisar al SATEditar alias
6Documentaciónfiltrada a los productos del cliente
Solo mis productos ✓Ver todo el catálogoTipo ▾
Manual de instalaciónManhattan Premiumv3 · 04/2026 · PDFDescargar
Esquema eléctricoMueble Manhattanv2 · 11/2025 · PDFDescargar
FirmwareManhattan Premium2.4.1 · 06/2026Descargar

Plantilla 06

Conócenos

La versión larga de los tres pilares. Convence a quien ya ha visto la máquina y quiere saber quién hay detrás, y es lo que un distribuidor enseña para justificar por qué elige Unidesa Gaming. La apuesta es enseñar el trabajo: la planta, los oficios y las decisiones de diseño.

unidesagaming.com/compania/conocenos
1Apertura80 vh · plano de planta
fábrica de Sant Cugat en funcionamiento
2Los hechoscifras verificables
1982
m² de planta
personas
productos homologados
3 · Pilar 01 · Más de cuarenta años aquíversión larga
el local español a lo largo del tiempo

Cómo ha cambiado el local, la normativa y el producto, y cómo hemos cambiado con ellos

4 · Cómo nace un productoscroll sticky · 5 pasos
visual por paso

I+D · diseño industrial · producción · homologación · instalación

3Pilar 02 · Hecha para durarmateriales, pruebas y ciclos
materiales y montaje
banco de pruebas
ciclos y horas

Horas de banco antes de producción y criterios de selección de componentes.

4Por qué una máquina se siente asíbloque de voz propia
el tacto del botón
la curva de luz
el sonido del premio
7 · Los oficiosretratos y testimonios
montaje
software
sonido
homologación
8 · Pilar 03 · Lo que trajimos antes que nadiehitos con fecha
qué había antes y qué después

Sin fechas y sin el antes y el después, «transformamos el sector» es un adjetivo.

9 · El archivoentrada desde la portada
1982 — 1990 — 2000 — 2010 — hoy
Recorrer por décadas
10 · Dónde estamosmercados y delegaciones
mapa: España, Italia, Latinoamérica

Delegaciones con dirección y contacto directo

Ver delegaciones
11 · Compromisosacceso a las subpáginas
Juego responsable
RSC
Calidad y medio ambiente
Certificaciones
12 · Cierredos salidas, ninguna de venta
Trabaja con nosotrosHablar con nosotros

Plantilla 07

Arquitectura del sitio

Seis secciones públicas, el área privada y una ruta por máquina accesible solo mediante código. El producto es el nivel principal del catálogo; el mueble y el juego son entidades de apoyo que lo describen.

mapa del sitio
  • Productos
    • Catálogo con filtros: comunidad, canal, mueble, mecánica
    • Ficha de producto · juegos incluidos, variantes, eficiencia, linaje
    • Hostelería · Salón · Bingo y casino (vistas prefiltradas)
  • Muebles
    • Manhattan · Elite Compact · Elite Next · Vitrina mural
    • Ficha de mueble: medidas, instalación, productos disponibles
  • Sistemas
    • Links y progresivos
    • Gestión de salón
    • Eficiencia comparada · prueba del pilar 03
  • Compañía
    • Conócenos · los tres pilares en versión larga
    • El archivo desde 1982
    • Responsabilidad Social Corporativa
    • Juego responsable
    • Delegaciones y mercados
    • Trabaja con nosotros
    • Sala de prensa
  • Soporte
    • Soporte técnico
    • Tarifas de recambios
    • Servicios técnicos oficiales
    • Documentación · índice público, descarga con cuenta
  • Contacto
    • Formulario segmentado por intención
    • Quiero una en mi local · rama del hostelero, kit incluido
    • Oficinas centrales y delegaciones
  • /m/{código} · acceso por código, sin login, sin indexar
    • Identidad y estado de la máquina
    • Tres caminos: operador · local · curiosidad
    • Asistencia y alta rápida en Mi cuenta
  • Mi cuenta · privado
    • Resumen y avisos
    • Mis máquinas, con garantía y alias
    • Documentación de sus productos
    • Recambios
    • Datos de empresa y usuarios

Anexo · Guía de estandarización 2026 v1.0

Identidad visual

Paleta, tipografía y normas de logotipo del manual de marca, con su traducción a entorno web: dónde se aplica cada color, qué versión del logotipo va en cada sitio y qué comprobaciones técnicas hay que hacer antes de maquetar.

Paleta primaria

Bluecoredegradado · #4332C5 → #5CCAEA
RGB 67 50 197 → 92 202 234
Bluecore inicio#4332C5 · RAL 5002
CMYK 83 82 0 0
Bluecore final#5CCAEA · RAL 6034
CMYK 56 0 5 0
BluepulsePantone 660 C · #007FC6
RGB 0 127 198 · RAL 5015

Paleta secundaria

UblackPantone Black 6 C · #101820
RGB 16 24 32 · RAL 8022
WhitechPantone 9063 C · #E7EFE7
RGB 231 239 231 · RAL 9010
Blue2Pantone 661 C · #004F9D
RGB 0 79 157 · RAL 5002
Blue3Pantone 2747 C · #232E83
RGB 35 46 131 · RAL 5017

Aplicación en web

Ublack como lienzo dominante en portada, catálogo y ficha de producto: es donde los renders de máquina retroiluminada ganan todo el contraste, y es color de marca, no una licencia. Whitech queda para las páginas densas de texto y tabla, donde el fondo oscuro cansa: soporte, documentación, aviso legal y Mi cuenta.

El manual reparte el uso con predominio de azules y el blanco como acompañamiento. Esta división por tipo de página conviene validarla con marca antes de maquetar.

Reglas de contraste

Bluepulse sobre Ublack da 4,1 a 1: suficiente para titulares grandes, iconos y bordes, insuficiente para texto de párrafo. El cuerpo va en Whitech, que sobre Ublack alcanza 15 a 1.

El degradado Bluecore no se usa como fondo de contenido, porque el contraste varía de un extremo al otro y el texto encima deja de ser legible a mitad de recorrido. Queda reservado a momentos de marca: separadores, el motivo de onda, estados activos y el propio logotipo.

Jerarquía tipográfica

  • TitularForma DJR Micro LightTitulares y texto publicitario. Disponible en Adobe Fonts.
  • SubtítuloSource Sans Pro BoldEntradillas y encabezados de bloque.
  • Cuerpo de textoSource Sans Pro RegularPárrafo, listas y fichas.
  • DestacadoSource Sans Pro Bold ItalicÉnfasis dentro del cuerpo.
  • CréditoSource Sans Pro Light ItalicPies de foto, autoría y notas.

Consectetuer de la adipiscing

Laoreet dolore magna aliquam volpat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo invent veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nobis Estep

Comprobaciones tipográficas

Ambas familias están en Adobe Fonts, pero el uso en web exige un proyecto web activo con el dominio dado de alta, y hay que confirmar que la licencia cubre el volumen de páginas vistas previsto.

Forma DJR se publica en varios tamaños ópticos. El manual especifica la variante Micro, pensada para cuerpos pequeños; para titulares de 64 a 96 px lo indicado sería la variante de display. Conviene resolverlo con la agencia de marca antes de fijar la escala tipográfica.

Fuentes de respaldo y carga

Segoe UI y Aptos son la salida del manual para entornos Microsoft, no para web. En web, la pila de reserva debe ser la del sistema, para que la página siga siendo legible mientras cargan las tipografías.

Se cargan solo los pesos que aparecen en la jerarquía. Cada peso extra son cientos de kilobytes en una web que se consulta desde locales con mala cobertura.

Logotipo en web

  • La versión vertical, proporción cercana al cuadrado, es la que se usa por defecto en todo el sitio: barra de navegación, aperturas, pie, correos y compartidos en redes.
  • La barra de navegación se dimensiona para alojarla: 96 px de alto en escritorio, con reducción al hacer scroll respetando el mínimo.
  • La versión horizontal se reserva a requerimientos concretos donde la altura no permite la vertical, y su uso se justifica caso a caso.
  • Tamaño mínimo digital: 40 px la vertical, 80 px la horizontal cuando sea inevitable.
  • Solo el símbolo, a 28 px, cuando no quepa nada más: favicon, avatar, barra móvil comprimida.
  • Área de seguridad equivalente al ancho del asta de la U, traducida a un padding fijo del contenedor.
  • Versión a color sobre fondo claro; negativo sobre Ublack y sobre azules.
  • No aplicar sobre fondos poco contrastados, riesgo real al superponerlo a renders y vídeo.
  • Nunca alterar proporciones, giro, color ni tipografía, ni invadir el espacio de respeto.

Motivo gráfico

El manual emplea de forma recurrente una banda de onda y malla de puntos en azules sobre negro. Es el elemento que más identidad aporta después del logotipo y funciona como transición entre secciones y como cabecera de las páginas sin fotografía.

Movimiento

Revelado al entrar en pantalla, columna sticky en los bloques de pilar y contadores en la franja de compromiso. La onda puede animarse muy lentamente en el hero. Nada más: el exceso de animación es lo primero que delata una web de plantilla.

Anexo

Sistema de diseño

La web no se diseña página a página, se diseña una vez y se compone muchas. Cada página es una secuencia de bloques tomados de una biblioteca común, y cada bloque sabe de dónde saca su contenido. Este apartado define las reglas de esa biblioteca; el lenguaje visual dentro de ellas es trabajo de la agencia.

Principios

  • Un bloque resuelve un tipo de contenido, no una página concreta.
  • Si algo aparece en dos páginas, es un componente, no una excepción.
  • Cada bloque ocupa el ancho completo y gobierna su propio fondo.
  • Ningún contenido se escribe dos veces: se referencia desde su entidad.
  • La plantilla debe resolver el caso vacío tan bien como el caso lleno.
  • Correspondencia uno a uno entre componente de diseño y bloque implementado.

Tokens

GrupoDefinición
color/superficiebase Ublack · clara Whitech · elevada variante de Ublack para tarjetas · borde hairline al 12 % de opacidad
color/textoprimario Whitech sobre oscuro, Ublack sobre claro · secundario al 65 % · acento Bluepulse
color/marcadegradado Bluecore, solo en momentos de marca · profundidad Blue2 y Blue3 para capas y estados
tipografíaEscala de titular a pie con los cinco niveles del manual. Cada nivel define familia, peso, tamaño fluido, interlineado e interletrado
espaciadoEscala de base 4: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Separación entre bloques y ritmo interno salen de esta escala, sin valores sueltos
rejilla12 columnas, ancho máximo de contenido 1440, medianil 24, margen 24 en móvil y 48 en escritorio
puntos de ruptura480 · 768 · 1024 · 1280 · 1600
radio y bordeUn solo radio de componente y un radio de píldora para etiquetas. Sin sombras: la profundidad se resuelve con superficie y borde
movimientoEntrada 200 ms, revelado 400 ms, curva única. Todo el movimiento se desactiva con prefers-reduced-motion

Los tokens viven en un único origen y se consumen tanto en la biblioteca de diseño como en el código. Cambiar un color de marca debe ser un cambio en un sitio, no una revisión de plantillas.

Elementos

Piezas atómicas sin contenido propio. Se diseñan una vez con todos sus estados y no se vuelven a tocar.

Botón

Elemento

Acción de la interfaz, en tres jerarquías. Nunca más de un primario visible en el mismo bloque.

primario · secundario · texto
reposo, foco, pulsado, cargando, inactivo

Enlace

Elemento

En línea dentro del texto y de bloque en listados. Subrayado visible sobre fondo oscuro.

interno · externo · descarga

Etiqueta de estado

Elemento

Señala la condición de un producto o una máquina sin recurrir solo al color.

novedad · homologado · no disponible · en garantía

Píldora de filtro

Elemento

Filtro aplicado, descartable de un toque. Área táctil mínima de 44 px.

activa · descartable · limpiar todo

Campo de formulario

Elemento

Texto, área y numérico. La ayuda va bajo la etiqueta y el error junto al campo, nunca solo en color.

vacío · relleno · foco · error · inactivo

Selector desplegable

Elemento

Usado en comunidad, orden e idioma. Nativo en móvil por fiabilidad.

cerrado · abierto · con búsqueda

Casilla

Elemento

Suelta y en grupo, con recuento de seleccionadas en el panel de filtros.

marcada · indeterminada · inactiva

Icono

Elemento

Set único, un grosor, tamaño ligado a la escala tipográfica. Nunca solo, siempre con etiqueta o título accesible.

16 · 20 · 24 px

Migas de navegación

Elemento

Ruta hasta el producto. Se colapsan en móvil dejando el nivel anterior.

completa · colapsada

Separador de onda

Elemento

Motivo de marca entre bloques. Es decorativo y se oculta a lectores de pantalla.

tres alturas · claro y oscuro

Componentes

Combinan elementos y ya muestran contenido. Cada uno se entrega con sus estados de carga, vacío y error.

Tarjeta de producto

Componente

Render cuadrado, mueble, número de juegos y disponibilidad en la comunidad activa. Unidad base del catálogo.

rejilla · lista · destacada · no disponible

Tarjeta de juego

Componente

Arte, nombre y mecánica de un juego del paquete. Se reutiliza en la ficha y en relacionados.

rejilla · carrusel

Tarjeta de mueble

Componente

Silueta, medidas principales y número de productos disponibles en ese mueble.

rejilla · selector en ficha

Fila de especificación

Componente

Etiqueta y valor. Cuando el dato falta muestra un guion, nunca desaparece la fila.

simple · comparada · destacada

Selector de comunidad

Componente

Filtro global persistente entre páginas y visitas. Afecta al catálogo, a la ficha y al recuento de cabecera.

cabecera · panel · en línea

Panel de filtros

Componente

Columna en escritorio y hoja inferior en móvil, con recuento de resultados en vivo y botón de limpiar.

columna · hoja móvil · con resultados

Carrusel de arrastre

Componente

Novedades y relacionados. Navegable con teclado y sin capturar el desplazamiento vertical de la página.

con flechas · solo arrastre

Galería de producto

Componente

Miniaturas, vídeo y ampliación. Primera imagen siempre el render sobre fondo transparente.

con vídeo · solo imagen

Tabla de homologaciones

Componente

Comunidad, fecha y expediente por variante. Desplazamiento horizontal controlado en móvil.

completa · resumida

Acordeón

Componente

Contenido secundario plegado: preguntas de soporte, detalles legales, especificaciones extensas.

simple · múltiple abierto

Contador animado

Componente

Cifras de la franja de compromiso. Con movimiento reducido muestra el valor final sin animar.

entero · con unidad · con prefijo

Barra pegajosa de acción

Componente

Nombre del producto y acciones principales al hacer scroll. Imprescindible en la ficha en móvil.

producto · máquina

Paso de formulario

Componente

Una pregunta por pantalla en el contacto segmentado, con vuelta atrás y progreso visible.

opciones · campos · confirmación

Aviso de disponibilidad

Componente

Explica que un producto no está homologado en la comunidad activa y ofrece la alternativa más próxima.

en ficha · en tarjeta

Aviso de acceso restringido

Componente

Señala que un documento requiere cuenta, con acceso e invitación a registrar una máquina. Nunca oculta que el documento existe.

banda de sección · en línea en la lista

Fila de máquina

Componente

Producto, número de serie, alias de ubicación, garantía y acceso a su documentación. Se despliega en su ficha.

plegada · desplegada · sin garantía

Lista de documentos

Componente

Tipo, versión, fecha y peso de cada archivo, con candado cuando requiere sesión.

abierta · restringida · sin resultados

Tarjeta de resumen

Componente

Cifra y etiqueta en Mi cuenta. Siempre enlaza a la lista filtrada que la produce.

neutra · con aviso

Bloques de página

Unidades de composición. Cada bloque declara de dónde sale su contenido: editorial lo escribe una persona, automático lo genera el modelo de contenido, global se define una vez para todo el sitio.

Hero cinemático

Bloque · editorial

Vídeo o render a sangre con claim y dos acciones. Solo en portada y aperturas de sección.

Franja de compromiso

Bloque · editorial

Cuatro cifras: tres de pilar y una de garantía, con contadores al entrar en pantalla.

Bloque de pilar

Bloque · editorial

Visual sticky y texto que avanza. Se usa tres veces en portada y en versión larga en Conócenos.

Carrusel de novedades

Bloque · automático

Productos marcados como novedad. Entran y salen solos según su estado.

Rejilla de catálogo

Bloque · automático

Tarjetas de producto con filtros, orden y carga progresiva. Reutilizada en las vistas por canal.

Juegos incluidos

Bloque · automático

El paquete completo del producto, con el arte de cada juego. Referencia a la entidad juego.

Variantes de mueble

Bloque · automático, condicional

Solo aparece si el producto existe en más de un mueble. Al desaparecer no deja hueco.

Eficiencia

Bloque · automático

Consumo, espacio y puesta en marcha, con comparación frente al producto anterior.

Homologaciones

Bloque · automático

Tabla por comunidad y variante, resaltando la comunidad activa del visitante.

Linaje

Bloque · automático

Familia, producto al que sustituye y entrada correspondiente del archivo.

Franja de garantía

Bloque · global

Compromiso de servicio en una línea y accesos a soporte, recambios y documentación.

Selector de canal

Bloque · editorial

Cuatro puertas al catálogo: hostelería, salón, bingo y casino, sistemas.

Línea de tiempo del archivo

Bloque · automático

Recorrido por décadas desde 1982, alimentado por las fichas históricas.

Mapa de delegaciones

Bloque · automático

Sedes y delegaciones con contacto directo, agrupadas por mercado.

Formulario segmentado

Bloque · global

Ramas por intención, cada una con su destino de correo. Reutilizado en contacto y en pies de sección.

Panel de cuenta

Bloque · privado

Resumen, avisos y listado de máquinas del cliente. Solo tras iniciar sesión.

Biblioteca de documentación

Bloque · mixto

Índice público con descarga restringida. Filtra por los productos del cliente cuando hay sesión.

Pie

Bloque · global

Logotipo vertical, secciones, legal, calidad, línea ética y selector de idioma.

Estados obligatorios

Cada componente que muestra datos se entrega con estos estados diseñados. Es la diferencia entre una maqueta bonita y un sistema que aguanta en producción.

  • Carga, con esqueleto y sin salto de maquetación.
  • Vacío, con un mensaje útil y una salida.
  • Sin resultados tras filtrar, con la opción de relajar filtros.
  • Producto no homologado en la comunidad activa, atenuado y etiquetado.
  • Documento restringido, visible pero con candado y acceso.
  • Bloque condicional ausente, sin dejar hueco ni separación doble.
  • Imagen que falta, con marcador de posición de marca.
  • Texto largo y texto corto, en nombres de producto y titulares.
  • Error de envío en formularios, junto al campo afectado.

Composición de páginas

  • Una plantilla es una lista ordenada de bloques, no una maqueta cerrada.
  • El fondo alterna entre Ublack y Whitech por bloques, nunca dentro de uno.
  • No más de dos bloques narrativos seguidos sin un bloque de producto o de dato.
  • El primer scroll siempre contiene una vía de acción, no solo relato.
  • Los bloques automáticos se ordenan solos; el editor decide cuáles aparecen, no su contenido.

Requisitos transversales

Accesibilidad

Contraste mínimo de 4,5 a 1 en texto de párrafo y 3 a 1 en elementos de interfaz. Foco visible en todos los interactivos. Navegación completa por teclado, incluidos carrusel, filtros y hoja de filtros en móvil. Toda animación respeta la preferencia de movimiento reducido. Estructura de encabezados coherente en cada plantilla.

Rendimiento

La consulta desde un local con mala cobertura es el caso de uso más frecuente del área técnica. Imágenes en formatos modernos servidas por punto de ruptura, vídeo del hero con póster y carga diferida, tipografías con display swap y solo los pesos de la jerarquía. Ningún bloque debe bloquear el primer renderizado.

Entrega esperada

  • Biblioteca de componentes con variantes y tokens enlazados, no maquetas planas.
  • Nomenclatura común entre diseño y desarrollo, componente a componente.
  • Ficha por bloque: contenido que muestra, de dónde sale, variantes y estados.
  • Composiciones de las siete plantillas en tres anchos, como demostración del sistema.
  • Documentación de la escala tipográfica fluida y del espaciado entre bloques.

Anexo

Modelo de contenido

El editor da de alta un producto y rellena sus campos. El carrusel de novedades, la rejilla del catálogo, la ficha, el PDF, la biblioteca de documentación y la página de máquina son consultas sobre esos campos, no contenidos aparte. Marcar un producto como novedad debe bastar para que entre en el carrusel y salga solo cuando deje de serlo.

Producto

entidad principal

Manhattan Premium
un mueble, un estilo
mecánicas definidas
paquete de juegos

Juego

entidad reutilizable

nombre, arte, mecánica
pertenece a uno o varios
productos
se escribe una sola vez

Mueble

entidad de apoyo

medidas, pantallas
instalación, aceptadores
Manhattan, Elite, mural

Variante

producto × mueble

solo en productos
que existen en varios
es lo que se homologa

Documento

con nivel de acceso

tipo, versión y fecha
colgado de producto,
mueble o variante
público o restringido

Máquina

nº de serie · no editorial

viene de producción
alimenta /m/ y Mi cuenta
estado de garantía

Relaciones

  • Un producto agrupa varios juegos; un juego puede aparecer en varios productos.
  • Un producto vive en uno o varios muebles. Cuando son varios, cada combinación es una variante.
  • La homologación cuelga de la variante, con comunidad, fecha y expediente.
  • Cada documento cuelga de una entidad y lleva su nivel de acceso y su versión.
  • Una máquina es una unidad física de una variante concreta, con su fecha y su garantía.
  • Mi cuenta cruza las máquinas del cliente con los documentos de sus variantes.
  • Las taxonomías se aplican al producto y son las que alimentan los filtros.

Kit de imagen obligatorio

Sin formatos exigidos en el alta, el carrusel y la rejilla acaban con recortes involuntarios. Estos campos no deberían poder quedar vacíos al publicar un producto.

  • Apaisado 16:9 para carrusel y cabeceras de sección.
  • Cuadrado 1:1 para la tarjeta del catálogo.
  • Render recortado sobre fondo transparente para la ficha sobre Ublack.
  • Arte propio por cada juego del paquete, en formato único.
  • Vídeo corto de pantalla en juego, recomendado.

Superficies generadas

  • Carrusel de novedades de la portada, desde el estado del producto.
  • Rejilla y filtros del catálogo, desde taxonomías y campos.
  • Ficha de producto, con juegos incluidos, variantes y linaje.
  • Ficha de mueble, agregando los productos disponibles en él.
  • Ficha técnica en PDF, desde los mismos campos estructurados.
  • Biblioteca de documentación, pública y filtrada por cliente.
  • Página de máquina y listado de Mi cuenta, desde el número de serie.

Anexo

Datos y decisiones

Los bloques de pilar necesitan cifras concretas para sostenerse. Están marcados en azul dentro de cada wireframe y recogidos aquí.

  • Años y coberturapilar 01 · franja y portadaAños desde 1982, comunidades con presencia y número de puntos de servicio.
  • Diseño desde el localpilar 01 · bloque narrativoQué restricciones del local español condicionan el producto: metros, instalación, normativa.
  • Horas de pruebapilar 02 · durabilidadCiclos y horas de banco antes de pasar a producción, y criterios de selección de componentes.
  • Longevidad realpilar 02 · archivoCasos verificables de máquinas antiguas todavía en explotación, con año y local.
  • Cifras de eficienciapilar 03 · ficha y sistemasConsumo, espacio y tiempo de puesta en marcha, comparados con el producto anterior o con la media del mercado.
  • Hitos con fechapilar 03 · ConócenosQué se introdujo antes que nadie y en qué año, con el antes y el después.
  • Compromiso de recambiosgarantía · franja y fichaAños durante los que se sirven recambios tras dejar de fabricar un producto.
  • Inventario documentalSoporte y Mi cuentaQué documentos existen por producto y mueble, con versión, fecha y nivel de acceso.

Condiciones previas

  1. Base legal del registro. Registrar máquinas con ubicación y responsable es tratamiento de datos personales en un sector regulado. Base legal, finalidad y plazos, con legal y privacidad, antes de diseñar el flujo.
  2. Política de acceso a documentación. Definir qué documento es público y cuál exige cuenta, y quién puede darse de alta. Es la decisión que gobierna Soporte y Mi cuenta.
  3. Incentivos al hostelero. El kit para el local debe revisarlo compliance: premia al negocio que aloja la máquina, en ningún caso al juego.
  4. Producción fotográfica. Sesión de fotografía y vídeo en la planta de Sant Cugat, en paralelo al diseño.
  5. Licencia tipográfica. Proyecto web de Adobe Fonts con el dominio dado de alta y tamaño óptico correcto de Forma DJR para titulares grandes.

Decisiones abiertas

  1. El juego como entidad propia. Si un mismo juego aparece en varios productos, conviene darlo de alta una vez y referenciarlo. Confirmar cuánta reutilización real hay entre paquetes.
  2. Alta en Mi cuenta. ¿Quién puede crear cuenta: cualquier operador con una máquina registrada, o solo clientes validados? Condiciona todo el flujo de documentación.
  3. Posición respecto a Grupo CIRSA. Fijar una única formulación antes de redactar textos y aplicarla en el pie y el aviso legal.
  4. Multiidioma. ¿Solo interfaz, o catálogos distintos por mercado? España, Italia y Latinoamérica tienen productos y homologaciones diferentes, y eso cambia el modelo de datos.
  5. Alcance de Mi cuenta. ¿Llega a pedido de recambios con stock real o se queda en registro, garantía y documentación?

Anexo

Cronograma y gobierno

Dieciséis semanas entre septiembre y diciembre de 2026. Todos los entregables se presentan en jueves y la validación se cierra el jueves siguiente, de modo que cada quincena tiene una semana de producción y una de revisión.

Septiembre Octubre Noviembre Diciembre
3101724 18152229 5121926 31017
Hitos
Estrategia y alcance
Agencia · CIRSA
Arquitectura y modelo de contenido
Agencia
Wireframes
Agencia
Diseño y sistema de componentes
Agencia
Desarrollo
Agencia
Recopilación de datos y textos
Unidesa Gaming
Producción fotográfica y vídeo
Unidesa Gaming
Carga de contenido
Unidesa Gaming
Validación técnica y usabilidad
CIRSA
QA
CIRSA · Agencia
Revisiones y correcciones
Agencia
Legal y compliance
Unidesa Gaming
Aprobación y preparación de salida
Los tres equipos
Publicación y formación
Agencia
Agencia Contenidos · Unidesa Gaming Soporte desarrollo · CIRSA Hito con entregable

Los tres equipos

Agencia

produce y propone

Estrategia digital, arquitectura, diseño, sistema de componentes y desarrollo. Aporta su experiencia también en las decisiones de estrategia, no solo en la ejecución.

Contenidos · Unidesa Gaming

valida contenido y aporta información

Consigue las cifras, los textos, el catálogo real y el material gráfico. Valida que lo que se cuenta es cierto, publicable y coherente con la marca.

Soporte desarrollo · CIRSA

valida técnica y proceso

Custodia la estrategia y la solución técnica: arquitectura, usabilidad, integraciones, rendimiento, accesibilidad, seguridad y procesos de publicación.

Hitos

  1. Jue 3 sepprincipios de septiembre

    Objetivos, estrategia y alcance cerrado

    Objetivos medibles, requisitos principales, qué queda expresamente fuera, roles e interlocutores, calendario de validaciones y criterios de aceptación. Aquí se decide también el reparto en fases de Mi cuenta y de la ruta por máquina.

    ProponeAgencia Valida estrategia y técnicaCIRSA Valida alcance de contenidoUnidesa Gaming
  2. Jue 17 sepmitad de septiembre

    Arquitectura web y definición de contenidos

    Mapa del sitio definitivo, modelo de contenido con entidades y campos, inventario de páginas y documentos, y qué material existe frente a lo que hay que producir. Plan de redirecciones hacia el nuevo dominio.

    EntregaAgencia Valida modelo y técnicaCIRSA Valida inventarioUnidesa Gaming
  3. Jue 24 sepfinal de septiembre

    Wireframes aprobados

    Las siete plantillas maestras cerradas en escritorio y móvil, con los estados definidos y el contenido real ya asignado a cada bloque.

    EntregaAgencia Valida usabilidad y flujosCIRSA Valida encaje de contenidoUnidesa Gaming
  4. Jue 1 octprincipios de octubre

    Diseño de componentes principales cerrado

    Tokens, rejilla, escala tipográfica y biblioteca de elementos y componentes, con sus variantes y estados. Portada y ficha de producto compuestas como demostración del sistema.

    EntregaAgencia Valida sistema y accesibilidadCIRSA Valida marca y tonoUnidesa Gaming
  5. Jue 15 octmitad de octubre

    Primera versión con las secciones principales

    Entorno de preproducción navegable con portada, catálogo, ficha de producto y Compañía, alimentados desde el gestor con contenido real de una muestra de productos.

    EntregaAgencia Valida integración y rendimientoCIRSA Carga y revisa contenidoUnidesa Gaming
  6. Jue 5 novprincipios de noviembre

    Versión completa para QA

    Todas las plantillas implementadas, incluidas Mi cuenta y la biblioteca de documentación, con el catálogo completo cargado. Arranca la batería de pruebas: funcional, dispositivos, accesibilidad, rendimiento, permisos y formularios.

    EntregaAgencia Dirige el QA técnicoCIRSA Revisa textos y datosUnidesa Gaming
  7. Jue 19 novmitad de noviembre

    Revisiones

    Resolución de las incidencias del QA, priorizadas por bloqueo. Cierre de revisión legal y de compliance sobre formularios, cookies, juego responsable, avisos y acceso a documentación.

    CorrigeAgencia Verifica cierre de incidenciasCIRSA Cierra legal y complianceUnidesa Gaming
  8. Jue 3 dicprincipios de diciembre

    Versión final aprobada

    Aprobación formal de los tres equipos, congelación de contenido y preparación de la publicación: dominio, certificados, analítica, sitemap, redirecciones y copias de seguridad.

    PreparaAgencia Aprueba salida técnicaCIRSA Aprueba contenidoUnidesa Gaming
  9. Jue 17 dicmitad de diciembre

    Publicada · sin acceso público

    Web en producción con acceso restringido, lista para abrirse cuando se decida. Entrega de documentación, manual de gestor, formación al equipo de contenidos y ventana de garantía.

    Publica y formaAgencia Da el visto bueno de salidaCIRSA Recibe la formaciónUnidesa Gaming

Reglas de gobierno

  • Un único interlocutor por equipo, con suplente designado.
  • Cada entregable llega el jueves; la validación se cierra el jueves siguiente.
  • Sin respuesta en el plazo de validación, el entregable se da por aprobado.
  • La agencia propone; CIRSA valida estrategia y técnica; Unidesa Gaming valida contenido.
  • Los jueves sin hito son comité de media hora para desbloquear lo pendiente.
  • Las discrepancias entre validadores se resuelven en el comité, no por correo.
  • Todo cambio de alcance se registra, se valora en plazo y coste y se aprueba antes de ejecutarse.
  • Una decisión aprobada no se reabre salvo por un hecho nuevo documentado.

Ruta crítica de contenidos

El riesgo principal del calendario no es el desarrollo, es el material. Estas entregas condicionan hitos posteriores y conviene arrancarlas en las primeras semanas.

  • Interlocutores y catálogo realantes del 17 de septiembreListado definitivo de productos, muebles y juegos por paquete, que es lo que dimensiona el modelo de contenido.
  • Cifras de los pilaresantes del 24 de septiembreConfirmadas o descartadas. Un bloque de pilar sin dato no se puede diseñar y hay que sustituirlo.
  • Inventario documentalantes del 1 de octubreQué documentos existen, en qué versión y cuáles son públicos. Define la biblioteca y los permisos.
  • Sesión de fotografía y vídeodurante octubrePlanta, oficios y producto. Condiciona Conócenos, el hero y el kit de imagen de cada producto.
  • Kit de imagen y textosantes del 5 de noviembreLos tres formatos obligatorios de cada producto, el arte de cada juego y todos los textos, incluido el claim.
  • Legal y complianceantes del 19 de noviembreFormularios, cookies, avisos de juego responsable y base legal del registro de máquinas.

Riesgos del calendario

  • La producción fotográfica es el cuello de botella: sin ella, tres bloques quedan sin resolver.
  • Un dato de pilar que llegue tarde obliga a rediseñar el bloque, no solo a rellenarlo.
  • Mi cuenta añade permisos, sesiones y datos personales al QA: conviene probarla desde la primera versión.
  • La segunda quincena de diciembre es inhábil a efectos prácticos: la publicación se sitúa el día 17.
  • La licencia tipográfica debe estar resuelta antes del cierre de componentes del 1 de octubre.