Estudio por iniciativa propia · Educación superior · 2026
Turia InstituteDiseño, tecnología y ciudad.
El sitio web de un instituto universitario ficticio en Valencia que enseña en inglés, creado con un lenguaje visual que casi no tiene nada en común con Lanternhouse, y reconstruido después de estudiar cuatro universidades europeas.
Después de Lanternhouse quería poner a prueba mi versatilidad en lugar de repetirme: otro sector, otro público y un lenguaje visual del extremo opuesto. Turia es una universidad de diseño, tecnología y ciudad, llamada así por el río que Valencia desvió tras la riada de 1957. Su identidad toma prestado un método de una de las mejores identidades universitarias de la última década, con el crédito reconocido abiertamente, y su estructura surgió de una revisión comparada de cuatro universidades europeas reales.
- Organización
- Ficticia, inventada para este estudio
- Función
- Encargo, investigación, contenidos, dirección de arte, diseño y desarrollo
- Plataforma
- Generador estático en Python (solo biblioteca estándar), CSS y JavaScript escritos a mano, Vercel
- Creado
- Octubre de 2026; la versión 3 siguió a la revisión comparativa
- Idioma
- Inglés, el idioma de enseñanza del instituto
Dos formas de leer este estudio. Cada capítulo empieza en lenguaje sencillo: qué cambió y para quién. Los lectores técnicos pueden abrir Bajo el capó para ver la ingeniería.
El encargo
Diseñar un sitio universitario creíble para futuros estudiantes, familias, aspirantes internacionales y socios de investigación, con un lenguaje visual distinto de todo lo demás en este portafolio.
El método
Tomar prestada abiertamente una idea probada, contrastar la estructura con cuatro universidades reales, adoptar lo que sirve a los visitantes y dejar por escrito lo que decidí no adoptar, y por qué.
Lo que demuestra
Versatilidad entre sectores y estilos, una investigación que cambia lo que se construye y reglas de ingeniería que pasan de un proyecto al siguiente en lugar de volver a aprenderse.
El encargo
El mismo rigor, y nada más en común
Lanternhouse le habla a una persona en un momento difícil. Una universidad le habla a muchas personas que toman una decisión larga: un joven de 18 años que compara programas, una madre que revisa los costos, un aspirante de Acra que pregunta por visados, un ayuntamiento que busca un socio de investigación.
Quería que el segundo estudio demostrara versatilidad, así que elegí a propósito lo contrario de Lanternhouse: luz de día en lugar de atardecer, una identidad tipográfica en lugar de fotográfica, blanco y negro con un único naranja en lugar de azul y amarillo.
El alcance correspondía al de una institución real: catorce programas, desde grado hasta doctorado, cinco escuelas, cuatro laboratorios de investigación, admisiones con matrícula y financiación, dos campus, noticias, eventos y dirección.
- Un segundo sector, público y lenguaje visual
- Una estructura académica completa, no una página de inicio y tres pestañas
- Un lugar real y una institución ficticia: Valencia, su jardín del río y su puerto
Bajo el capóPara lectores técnicos
- Cada palabra del sitio, el registro de imágenes y las fichas de toma fotográficas viven en un único archivo de contenidos en Python.
- El generador usa solo la biblioteca estándar de Python, así que la compilación no requiere instalar nada.
- El documento de fichas de toma se regenera a partir del mismo archivo de contenidos, para que las fichas y las páginas nunca se desfasen.
- noindex en cada página, y una línea en el pie que identifica la institución como ficticia.
Identidad
Una tipografía programada para ser distinta cada vez
La identidad sigue un método que Pentagram usó para The New School en 2015: una sola tipografía dibujada en varios anchos y programada para que cada letra tome un ancho distinto. Cito la referencia abiertamente. El objetivo era aprender cómo se comporta un sistema así en la web, no hacerlo pasar por una idea mía.
En Turia, el eje de ancho de la fuente variable Archivo hace el trabajo. Una pequeña función asigna a cada letra un ancho a partir de un hash de la palabra, para que cada escuela, laboratorio y página tenga su propio logotipo repetible con la misma fuente. Al pasar el cursor sobre uno, los anchos se reorganizan.
Todo lo demás se mantiene sobrio: negro, blanco y papel cálido, con un único naranja de señal. Una sola línea naranja serpentea bajo la portada y a través del mapa del campus. Representa al Turia, el río que la ciudad desvió.
- Una fuente variable, infinitos logotipos repetibles
- Una referencia citada, no un estilo prestado
- Un solo color de acento, reservado para las acciones y la línea del río
Bajo el capóPara lectores técnicos
- Archivo variable, eje de ancho del 62 % al 125 %; los anchos se asignan durante la compilación mediante un hash determinista de cada palabra.
- Los logotipos de inicio y del pie se ajustan al contenedor con JavaScript una vez cargadas las fuentes.
- La línea del río es un único trazado SVG que se dibuja al cargar, y se omite con movimiento reducido.
- Encabezados grandes con peso de 430 a 450 y texto a 18 px con interlineado de 1,6, definidos después de la revisión comparativa.
Investigación
Cuatro universidades, estudiadas antes de la versión 3
Antes de la tercera versión revisé los sitios de cuatro universidades europeas en una misma mañana, en tamaños de computadora y de teléfono: Aalto University, ETH Zürich, University of Cambridge y Royal College of Art. Oxford y University of the Arts London fueron mis primeras opciones, pero ambas bloquean las visitas automatizadas, así que las sustituí por los equivalentes más cercanos.
Para cada una anoté lo que hace bien y por qué funciona, y después decidí, patrón por patrón, qué debía adoptar Turia. Igual de útil es la lista de lo que dejé fuera: avisos de cookies, porque Turia no usa cookies; colores de acento adicionales; y carruseles para el contenido principal.
La revisión cambió lo que se construyó. La mayor mejora individual salió directamente de ella: enviar a cada público a su siguiente paso justo debajo de la portada.
- Capturas del mismo día a 1440 y 390 píxeles
- Cada patrón adoptado, vinculado a su fuente
- Una lista escrita de los patrones descartados, y por qué
Bajo el capóPara lectores técnicos
- Adoptado de Cambridge y Aalto: rutas por público. De Aalto: paneles de historia divididos con listas de enlaces con flecha. De ETH y Aalto: una barra de utilidades y un megamenú con una historia destacada.
- Adoptado del RCA: líneas finas de columna visibles, pestañas de pie de foto recortadas en las fotografías y estadísticas con unidades pequeñas y una fuente citada.
- Adoptado de las cuatro: navegación interna fija con indicador de sección en las páginas de programa, y una página de aviso legal, como exige la legislación española (la LSSI).
- La revisión se conserva como un documento junto al código, para que el razonamiento sobreviva a la versión construida.
Orientación
Cada público, a un clic de su siguiente paso
Bajo la portada hay cuatro rutas: Bachelor's, Master's, Doctoral e International (grado, máster, doctorado e internacional). Cada una ofrece dos pasos siguientes concretos, para que quien termina la secundaria, una investigadora y un aspirante del extranjero salgan de la primera pantalla sabiendo a dónde ir.
El índice de programas es una lista tipográfica de estilo suizo que se puede buscar y filtrar por nivel y escuela, con una fotografía que sigue al cursor en computadora. En computadora, un megamenú agrupa los enlaces como los piensan los visitantes y reserva un espacio para una historia destacada.
- Cuatro rutas por público antes del primer desplazamiento
- Catorce programas, con búsqueda y filtros
- Un megamenú organizado según el visitante, no según el organigrama
Bajo el capóPara lectores técnicos
- Los botones de filtro usan aria-pressed, y una región dinámica anuncia el número de programas que se muestran.
- Cada programa es un enlace simple en el HTML estático; el filtrado solo oculta y muestra filas.
- La vista previa que sigue al cursor solo funciona en dispositivos con cursor, y nunca en pantallas táctiles.
Páginas de programa
Las preguntas que de verdad hacen los aspirantes
Las páginas de programa se construyen en torno a lo que un aspirante necesita para decidir: qué estudiará, semestre por semestre; a dónde conduce; requisitos de admisión; matrícula; y fechas clave, con el botón para postularse siempre a la vista. Una navegación interna fija muestra en qué parte está mientras lee.
El costo suele ser la pregunta que nadie responde con claridad, así que la página de matrícula tiene una calculadora. Elija un programa, la categoría de matrícula, el alojamiento y cualquier beca, y la calculadora estima el año en euros, mostrando cada concepto.
Los aspirantes internacionales tienen su propia ruta: visados, alojamiento, llegada y una imagen honesta de la vida en Valencia.
- Estructura semestre por semestre en cada programa
- Una calculadora del costo del año con cada concepto a la vista
- Una ruta específica para aspirantes internacionales
Bajo el capóPara lectores técnicos
- La calculadora es un formulario HTML simple mejorado con JavaScript; los selectores nativos y un control deslizante conservan el comportamiento con teclado y lector de pantalla.
- La matrícula, los rangos de alojamiento y las becas viven en el archivo de contenidos, para que una oficina de admisiones los actualice en un solo lugar.
- El indicador de sección usa IntersectionObserver y actualiza aria-current en los enlaces internos.
Investigación y noticias
Una investigación en la que una ciudad puede reconocerse
Cuatro laboratorios trabajan en preguntas que plantea un Mediterráneo más caluroso y más húmedo: el agua, el calor, la IA centrada en las personas y el puerto. Cada página de laboratorio empieza con una pregunta en lenguaje sencillo, seguida de las personas, los proyectos y los socios que la respaldan.
Una historia requería un cuidado especial. En octubre de 2024, inundaciones reales devastaron pueblos al sur de Valencia. La noticia del Water Lab trata de escuchar a los vecinos y de la reconstrucción, y su encargo fotográfico descarta por completo las imágenes de desastre.
Las estadísticas llevan debajo una pequeña fuente citada, un patrón tomado del RCA, para que en una versión real cada cifra tenga un responsable.
- Cuatro laboratorios, cada uno guiado por una pregunta en lenguaje sencillo
- Una tragedia real tratada con mesura
- Cada estadística acompañada de su fuente
Bajo el capóPara lectores técnicos
- Las tarjetas de laboratorio dejan sus fotografías sobre el borde de la tarjeta, dentro de un recorte estático para que nada se salga en Safari.
- Pestañas de categoría y de pie de foto recortadas en las fotografías, dimensionadas para seguir siendo legibles a 390 px.
- La ficha de toma de la historia de las inundaciones especifica vecinos, archivos y luz de día, y ningún daño.
Dirección de arte
Luz mediterránea, por dirección escrita
Las fotografías de Turia viven en un mundo distinto al de Lanternhouse: sol intenso de media mañana, sombras nítidas, hormigón blanco, azulejo vidriado, naranjos y el largo jardín del antiguo cauce del río. Sin grano de película, sin monumentos famosos y sin letreros legibles.
Cuarenta y tres imágenes recibieron dirección de arte a partir de fichas de toma escritas. Los retratos se hicieron en una sesión propia, con un solo haz de luz de ventana contra una pared de estuco de cal, para que la dirección y los estudiantes se lean como una sola serie.
Hasta que existió la fotografía, cada espacio de imagen mostraba un marcador rayado con su nombre de archivo y su proporción, para que el sitio se viera intencional en cada etapa de la construcción.
- Un segundo estilo de la casa, deliberadamente opuesto al primero
- Una serie de retratos con la misma luz y el mismo encuadre
- Marcadores de posición diseñados como parte del sistema
Bajo el capóPara lectores técnicos
- Los originales se obtienen de una carpeta compartida por ID de archivo en cada compilación; si el acceso falla, la compilación recurre a los marcadores de posición en lugar de romperse.
- Un script de recorte genera cada imagen en su proporción, con un punto de enfoque vertical por imagen, a 800 y 1600 px en WebP.
- Los recortes panorámicos 21:9 se obtienen de imágenes 3:2, así que las fichas de toma mantienen a cada sujeto en la franja central.
Ingeniería
Reglas que se heredan, no que se vuelven a aprender
Las lecciones de Lanternhouse fueron reglas aquí desde el primer día: las fotografías solo se funden y se mueven, cada marco usa un recorte estático para que nada se salga en Safari, nada anima un desenfoque y el movimiento reducido elimina todo movimiento.
El sitio no instala cookies ni carga analíticas, así que no necesita aviso de cookies, y lo dice. Hay una página de aviso legal porque la legislación española la exige en cualquier sitio gestionado desde España.
Esa continuidad es lo que le importa a un equipo: lo que aprendo en un proyecto se convierte en un estándar escrito en el siguiente, donde la próxima persona puede encontrarlo.
- Reglas de movimiento heredadas del primer estudio
- Sin cookies, así que sin aviso
- Una página de aviso legal, como exige la legislación española
Bajo el capóPara lectores técnicos
- HTML estático generado con Python sin dependencias en tiempo de ejecución: una hoja de estilos y un script de mejora progresiva.
- HSTS con preload, una Permissions Policy restrictiva y una política de referencia estricta.
- Un README documenta la estructura, el orden de compilación y el flujo de imágenes, para que otro desarrollador pueda retomarlo.
Calidad
Lo que encontró una auditoría honesta
La misma revisión automatizada que hice en Lanternhouse (axe-core, reglas WCAG 2.2 AA, diez páginas en tamaños de computadora y de teléfono) salió limpia en la mayoría de las páginas, con dos hallazgos menores: el nombre accesible del botón de búsqueda en computadora no incluye su texto visible, y un número de paso de la página de admisiones queda ligeramente por debajo del contraste requerido en los teléfonos.
Vale la pena mencionar dos concesiones. El logotipo de la página de inicio se acomoda al cargar, lo que mueve el diseño en computadora más de lo que yo aceptaría en un lanzamiento para un cliente; reservar su tamaño final lo soluciona. Y la tipografía se carga desde un CDN público, la única solicitud a otro dominio. Alojarla en el propio sitio es un cambio pequeño.
La página de inicio también es larga, unos 12.000 píxeles en computadora. Cada sección se gana su lugar, pero una institución real debería probar si la cuadrícula de laboratorios y la franja de datos podrían pasar a páginas propias sin restar visitas al buscador de programas.
- Dos hallazgos menores de accesibilidad, ambos fáciles de corregir
- Un problema de desplazamiento del diseño, con causa conocida
- Una pregunta abierta que un equipo real debería probar
Bajo el capóPara lectores técnicos
- axe-core 4 con Playwright en 20 cargas de página (10 páginas, en computadora y en teléfono).
- Hallazgos: label-content-name-mismatch en el botón de búsqueda (computadora); color-contrast en un número de paso de admisiones (teléfono).
- Desplazamiento del diseño de la página de inicio medido en aproximadamente 0,2 en computadora, por el ajuste del logotipo; todas las demás páginas probadas midieron menos de 0,01.
- Un solo servidor de terceros: un CDN público que sirve la fuente variable Archivo. Sin desbordamiento horizontal en ninguna de las 20 cargas.
Lléveselo
La historia completa, en papel.
El informe de diseño completo y un resumen de una página, escritos para equipos que están decidiendo si soy el socio adecuado.