Escuela online · Rediseño visual
FPCat Oposicions
Rediseño de una marca que ya existía, sin renunciar a su paleta. El contraste del botón de la portada pasó de 2,72:1 a 13,11:1 y quedaron anotadas 28 excepciones a su marca.
Diseño y dirección visual
Diseño y dirección visual para webs a medida
El diseño de tu web lo propongo yo, con un criterio que puedo explicar y medir. No es una capa estética que se añade al final: se decide antes de escribir una línea de código, dentro del mismo proyecto, y lo construyo yo.
Cuéntame tu proyecto
¿Prefieres ver primero cómo queda? Pide un prototipo gratis
El criterio
Arte con criterio
«El arte sin criterio es decoración. El criterio sin arte es burocracia.»
Un diseño bonito que no se lee no sirve, y un diseño correcto que no emociona tampoco. Tres instrumentos que uso en cada proyecto, para que cada decisión se pueda ver y medir.
Instrumento 1 · Medidor
Contraste
Mido cada pareja de colores con la fórmula WCAG 2.1. Lo que no se lee, no se usa.
Elige una pareja
«Lo que no se lee, no se usa.»
11,56:1
Tinta sobre Papel
Se usa
En FPCat, el botón de la portada pasó de 2,72:1 (texto blanco sobre salmón) a 13,11:1 sin renunciar a su paleta.
Instrumento 2 · Primer vistazo
Jerarquía
Decido qué se lee primero, qué se lee después y qué puede esperar.
2 de 12
se leen primero
Instrumento 3 · Superposición
Coherencia
Una regla y el mismo resultado en cada pieza, la haga quien la haga.
210 mm por 297 mm
Regla: margen de 1/12, título a 1/3 del lado corto y símbolo de 0,7 del lado corto recortado en la esquina inferior derecha.
Cómo trabajo el diseño
Cuatro pasos, con tu marca delante
01 Mirar
Reviso lo que tu marca ya dice y dónde se contradice. Antes de proponer nada, pregunto qué de tu marca es intocable: lo aprendí con FPCat, donde mi primera propuesta cambiaba su paleta y su tipografía y la descartaron con razón.
Hoja de marca · Auditoría
#13324B
#173A55
#102C43
tres azules para un solo color
Titular
web
Titular
folleto
dos tamaños para el mismo titular
1,5°
el logo, girado 1,5°
02 Sintetizar
Decido qué debe decir tu marca y qué puede callar. Propongo varias direcciones distintas de verdad, no tres variaciones de color: en GuiaOnda fueron tres, y se eligió una mezcla de dos.
- cercana (queda)
- premium (se calla)
- divertida (se calla)
- sostenible (se calla)
- innovadora (se calla)
- artesanal (queda)
- tecnológica (se calla)
- joven (se calla)
- exclusiva (se calla)
- local (se calla)
«Quedan dos: cercana y artesanal.»
03 Aplicar
Llevo la dirección a las pantallas que importan, y lo veo en pantallas reales antes de construir: la misma decisión en portada, ficha y contacto (símbolo arriba a la izquierda, margen de un doceavo y botón en Tinta sobre Papel).
Portada
Aa
Ficha
Aa
Contacto
Aa
04 Entregar
Reglas claras y archivos listos, para que cualquiera pueda aplicar la marca igual. Y después lo construyo y lo mido contra el diseño, con las cifras de accesibilidad y rendimiento delante.
Carpeta de entrega
- Lockup principalSVG
- Lockup sobre papelSVG
- Símbolo mínimoSVGPNG
- Plantilla de propuesta A4DOCXPDF
- Plantilla de presentación 16:9PPTXKEY
- Reglas de usoPDF
«6 de 6 archivos listos»
Lo que recibes
Cada decisión llega en un documento
Pensados para elegir con imagen y no con descripciones: capturas de tu web real, la misma foto y los mismos textos en todas las variantes, y cada contraste con su cifra.
Informe de propuesta de aplicación de diseño. Nueve páginas A4 con análisis, tres alternativas, recomendación y criterios, con cada contraste medido.
4 de 9 páginas · 210 mm por 297 mm
Documento de opciones de portada. Cinco opciones y cuál elegiría yo.
210 mm por 297 mm
Antes
Después
Comparación. La portada actual frente a la alternativa aplicada.
2 capturas · 1200 px
Registro de excepciones a tu marca. En FPCat, 28 entradas, cada una con su motivo, la alternativa usada y su estado.
210 mm por 297 mm
Hoja de componentes. Con sus medidas.
210 mm por 297 mm
La web construida y medida. Con las cifras de accesibilidad y rendimiento antes y después.
1200 px · Lighthouse móvil
Revisiones
Eliges tú, y se puede ajustar
Eliges tú entre las alternativas, con cada decisión explicada. Sobre la dirección elegida, hay dos rondas de revisión incluidas. A partir de ahí, lo que haga falta se habla según el alcance. Cada cambio queda registrado con su motivo, para que se sepa qué se movió y por qué.
Caso real
FPCat Oposicions, antes y después
FPCat prepara a docentes de ciclos formativos para oposiciones en Cataluña. Querían conservar su paleta, así que la medí: el salmón y el marrón no pasan como texto. Mantuve sus colores y cambié lo que va encima.
Capturas del 23/10/2026; la web actual y el rediseño en el entorno de pruebas; mismo contenido, otro sistema.
Portada.
Antes
Después
Oferta formativa.
Antes
Después
2,72 a 13,11contraste del botón de la portada
88 a 100accesibilidad en Lighthouse móvil
28excepciones a su marca, cada una anotada con su motivo
3alternativas de color y 5 portadas, entre las que elige el cliente
Cómo se contrata el diseño
El diseño va en el proyecto. Lo que cambia es de dónde viene
El diseño forma parte del proyecto de desarrollo y se presupuesta junto con él.
Diseño mío
Si no tienes diseño previo o quieres un rediseño completo, lo propongo yo dentro del proyecto de desarrollo y lo construyo. Es el caso de FPCat, GuiaOnda, Pobill y Tamayoimatge.
Diseño de otro profesional
Si ya tienes diseño de otra persona, o un diseñador independiente se une al proyecto, lo construyo fiel, sin reinterpretarlo. Es el caso de Select Design (con Forma Anima) y de los proyectos con Trini García.
Tu diseño actual, mejorado por dentro
Si quieres conservar el diseño que tienes, lo replico fiel y resuelvo los problemas técnicos que arrastra, con un backend moderno, renovado y ampliable. Es el caso de OndaTeVe, TV4 La Vall y Gasma.
Cómo uso la IA
Diseño asistido con IA, decidido por mí
El diseño, o la propuesta de diseño, lo propongo yo. Lo itero con ayuda de la inteligencia artificial y lo retoco a mano. Es diseño asistido con IA, apoyado en la experiencia de desarrollar webs: sé qué se puede construir y qué no, y por eso lo que dibujo se puede construir fiel.
Javier Marcilla, desarrollador web independiente.Para quién es
Para webs que tienen que verse a la altura
Tu marca existe y la web no la sirve
Tienes paleta, tipografía y un logotipo con carácter, pero la web los traiciona o no se leen bien. Parto de lo que no se toca y mejoro lo que sí.
Todavía no tienes marca definida
Antes de construir, conviene fijar paleta, tipografía y reglas de uso. Lo hago contigo, con cada decisión justificada.
Rediseñas una web que ya posiciona
Cambio la cara sin tocar lo que ya funciona en buscadores: textos, estructura y enlaces se quedan como están.
Tu web funciona, pero ha quedado vieja
Rediseño desde cero lo que se ve y lo que se siente, y de paso lo que carga lento.
Diseño en casos reales
Cuatro proyectos con diseño mío
Las cifras llevan su fecha y su método: están medidas en el rediseño, no en la web actual. En cada caso consta qué parte es mía.
Producto propio · Sistema de plantillas
GuiaOnda
Una guía local de 454 negocios, rediseñada en tres idiomas sin tocar lo que ya posiciona: 10 tipos de plantilla y 691 páginas.
Alimentación · Tienda en cuatro idiomas
El Pobill Ecològics
De una tienda genérica a una web con carácter para una finca de aceite ecológico, en valenciano, castellano, inglés y alemán.
Fotografía · Portfolio
Tamayoimatge
De una web de blog de 2010 a un portfolio que pasa de la luz a la sombra. Rendimiento en Lighthouse móvil de 63 a 99 y LCP de 6,4 s a 2,1 s, medidos en el rediseño.
Preguntas frecuentes
Lo que suelen preguntar
Si tu pregunta no está aquí, la respondemos cuando hablemos de tu proyecto.
¿Puedo contratar solo el diseño?
El diseño va dentro del proyecto de desarrollo, porque así lo que se dibuja se puede construir fiel. Lo propongo yo si no tienes diseño previo o quieres un rediseño completo. Si ya tienes el de otro profesional, o un diseñador independiente se une al proyecto, lo construyo tal cual. Y si quieres conservar el que tienes, lo replico fiel y soluciono sus problemas técnicos con un backend moderno y ampliable.
¿Y si ya tengo marca?
Parto de ella. Mido tu paleta, te digo qué funciona y qué no (por ejemplo, qué colores no sirven como texto) y propongo excepciones anotadas, no un cambio total.
¿Perderé el SEO si rediseñas mi web?
No tiene por qué. Antes de empezar fotografío el posicionamiento: textos, cabeceras, enlaces y estructura. El rediseño cambia lo que se ve, no lo que Google ya conoce.
¿Cuántas revisiones incluye?
Sobre la dirección elegida, dos rondas de revisión. A partir de ahí, lo que haga falta se habla según el alcance, y cada cambio queda registrado con su motivo.
¿Qué recibo exactamente?
Un informe de propuesta con análisis, alternativas, recomendación y cada contraste medido; las opciones de pantallas clave en capturas de tu web real; un registro de excepciones a tu marca, si las hay; una hoja de componentes con sus medidas, y la web construida y medida contra el diseño.
¿El diseño lo hace una IA?
Lo propongo yo, lo itero con IA y lo retoco. La decisión final y la responsabilidad son mías. En cada caso de estudio consta qué parte es mía y cuál de un tercero.
¿Cuánto cuesta?
El diseño forma parte del proyecto y se presupuesta junto con el desarrollo. Te doy el precio exacto después de hablar contigo y ver qué necesitas.
¿Cómo debería verse tu web?
Cuéntame qué tienes y qué necesitas. Te digo qué conservaría, qué cambiaría y cómo lo mediríamos.