ContactoCaso de estudio
Cómo llevar un rediseño a una marca que ya existía, sin renunciar a su paleta ni a la legibilidad.
El encargo
FPCat Oposicions acompaña a docentes de ciclos formativos que preparan oposiciones. Su marca tiene rasgos claros: titulares en Bebas Neue, texto en Nunito Sans, un logotipo con el «CAT» sobre un rectángulo groc y una paleta de cinco colores.
El encargo era rediseñar la web pública, la ficha de curso, la compra y la cuenta de la alumna. Nuestra primera propuesta cambiaba tipografías y paleta, con una serif y un verde oscuro. Los clientes la descartaron y pidieron conservar su identidad.
De ahí sacamos lo que hoy preguntamos antes de empezar: qué de la marca no se toca.
Otras pantallas de partida
La ficha de curso y la página «Qui som» de la web actual.
Decisión 1
Los cinco colores de FPCat son cálidos y reconocibles, pero dos no sirven como color de texto. Lo medimos con WCAG 2.1: mínimo 4,5:1 para texto normal y 3:1 para elementos de interfaz.
| Muestra | Combinación | Contraste | Para texto |
|---|---|---|---|
| Paleta original: no apta para texto | |||
| Salmón sobre blanco | 2,72:1 | ✕ No apta | |
| Salmón sobre groc | 2,19:1 | ✕ No apta | |
| Marrón sobre blanco | 2,55:1 | ✕ No apta | |
| Combinaciones propuestas: aptas para texto | |||
| Tinta #22201B sobre salmón | 5,99:1 | ✓ Apta | |
| Tinta #22201B sobre marrón | 6,39:1 | ✓ Apta | |
| Tinta #22201B sobre groc | 13,11:1 | ✓ Apta | |
Decisión 2
En vez de sustituir el salmón de la marca, el texto que va sobre él pasa a tinta oscura: de 2,72:1 con blanco a 5,99:1. Los tonos oscuros de texto, salmón oscuro y marrón café, son el mismo matiz oscurecido, no un color nuevo. Cada cambio queda en un registro de excepciones con su motivo.
Decisión 3
Se montó la aplicación del color de tres maneras sobre la misma pieza, cada una con sus fortalezas y sus limitaciones. El estudio recomendó la A, la que mejor conserva el carácter de la marca. El cliente eligió la B, más sobria y con la lectura más limpia en pantallas pequeñas.
Marrón oscuro como color de acción en titulares, botones y enlaces; el salmón queda reservado a etiquetas y avisos.
Fortalezas
Limitaciones
Tinta oscura en botones y estructura; salmón oscuro en precios y enlaces; groc y salmón como acentos.
Fortalezas
Limitaciones
El salmón original como color de los botones principales, con texto oscuro, sobre fondo groc suave.
Fortalezas
Limitaciones
Decisión 4
Los clientes propusieron probar el hero en gris. En vez de describirlo, montamos cinco variantes sobre la misma portada, con la misma foto y los mismos textos, y las puntuamos con ocho criterios. El estudio recomendó la C, gris con bloque salmón. El cliente eligió la D, gris con bloque tinta (15/10/2026).
Un dato que pesó: el salmón sobre groc da 2,19:1, y por eso groc y salmón juntos vibran (opción E).
Y después, los detalles
Cuatro decisiones de componente, con su razón y con el número que las sostiene (medidas en el entorno de pruebas).
Las dos cabeceras de la web, la pública y la de alumnas, tenían medidas distintas sin motivo para ello. Se fijó una sola medida por tamaño de pantalla, con el filete incluido.
Barra 80 px y logo 44 px en escritorio; 68 y 32 px en móvil
La primera estimación fue que el menú completo necesitaba unos 1.060 px, con el aviso de que no se había medido en el navegador. Medido: unos 870 px, sin contar el carrito (52 px). El menú completo se muestra desde 1.100 px, entre 768 y 1.099 px hay uno intermedio y por debajo, un botón de menú.
Menú completo desde 1.100 px; 4 enlaces entre 768 y 1.099 px
Se descartó la regla «el texto toma el color del fondo de la sección» y se fijó una sola, global: al pasar el ratón, fondo tinta y texto groc, sea cual sea el fondo de la sección. Un único estilo de botón que mantener y que verificar.
Una regla para todos los fondos
En el examen sale una bola con el número del tema. La 404 es la bola que te ha tocado, sin tema: «T'has quedat amb la bola equivocada», con una ficha de examen con tema nº 404 y resultado «No presentat».
Tema nº 404, resultado: no presentado
Lo que recibe el cliente
Pensados para elegir con imagen y no con descripciones: capturas de la web real, la misma foto y los mismos textos en todas las variantes, y cada contraste con su cifra.
Informe: propuesta de aplicación de diseño (nueve páginas A4, aquí de la 2 a la 9)
Hero: cinco opciones y cuál elegiríamos (nueve páginas)
Comparación: portada actual y alternativa B aplicada
Además: un registro de excepciones a su marca (28 entradas, cada una con motivo, alternativa usada y estado) y una hoja de componentes con sus medidas.
Antes y después
Capturas del 23/10/2026: a la izquierda, la web actual (fpcat.es); a la derecha, el rediseño en el entorno de pruebas. Mismo contenido, otro sistema.
En el móvil
Primera pantalla de la portada y de la ficha de curso, en la web actual y en el rediseño.
La hoja de dirección visual
Cada color tiene un uso permitido y, donde importa, un contraste medido. Salmón y marrón son decorativos; el texto va en tinta, y los precios y enlaces, en salmón oscuro sobre fondos claros. Los titulares largos se resuelven con Bebas Neue a un tamaño que baja con la longitud, y los párrafos van en Nunito Sans.
La hoja está en catalán, el idioma de la web.
| Muestra | Combinación | Contraste | Para texto |
|---|---|---|---|
| Texto y botones | |||
| Tinta sobre blanco | 16,27:1 | ✓ Apta | |
| Tinta sobre groc | 13,11:1 | ✓ Apta | |
| Tinta sobre gris | 13,28:1 | ✓ Apta | |
| Tinta sobre salmón (etiquetas y avisos) | 5,99:1 | ✓ Apta | |
| Groc sobre tinta (botón primario) | 13,11:1 | ✓ Apta | |
| Precios, enlaces y texto secundario | |||
| Salmón oscuro sobre blanco | 5,89:1 | ✓ Apta | |
| Salmón oscuro sobre gris | 4,81:1 | ✓ Apta | |
| Salmón oscuro sobre groc | 4,75:1 | ✓ Apta | |
| Texto secundario sobre blanco | 7,15:1 | ✓ Apta | |
| Salmón oscuro sobre tinta (no se usa: los precios van en groc) | 2,76:1 | ✕ No apta | |
| Categoría | Web actual | Rediseño |
|---|---|---|
| Rendimiento | 73 | 94 |
| Accesibilidad | 88 | 100 |
| Buenas prácticas | 73 | 96 |
| Elemento principal de la portada (LCP) | 15,3 s | 3,0 s |
| Desplazamiento de diseño (CLS) | 0,005 | 0 |
| Categoría | Web actual | Rediseño |
|---|---|---|
| Rendimiento | 96 | 99 |
| Accesibilidad | 91 | 100 |
| Buenas prácticas | 73 | 96 |
| Elemento principal de la portada (LCP) | 1,4 s | 0,9 s |
El entorno de pruebas todavía no es público: las cifras del rediseño se repetirán cuando pase a producción. SEO no es comparable, porque el entorno de pruebas va con noindex. Medido con Lighthouse en laboratorio; una medición real con usuarias llegará con el tráfico.
Registro de excepciones
Seis de las 28 entradas, con su motivo.
El blanco sobre salmón da 2,72:1. Con tinta oscura sube a 5,99:1 y el salmón de la marca no cambia.
El «CAT» del logo es un rectángulo groc: sobre fondo groc desaparece. Cabecera y pie claros; el groc va en filetes, secciones y detalles.
Salmón y marrón dan 2,72 y 2,55 contra blanco, por debajo del 3:1 que se pide a los elementos de interfaz. Los campos van en tinta.
#B8342B alcanza 5,89:1 sobre blanco, 4,81 sobre gris y 4,75 sobre groc. Sobre las tarjetas de tinta no vale, y ahí los precios van en groc.
Es condensada y solo mayúsculas: en párrafos pierde legibilidad. Entradillas y citas pasan a Nunito Sans.
Entre cinco opciones, eligió el gris con bloque tinta. El groc sigue en el logo, los botones y las tarjetas.
¿Tu marca tiene un código así de ordenado? Te contamos cómo lo haríamos con la tuya: qué se queda, qué se mide y qué se decide contigo.