Turia InstituteDesign, technology and the city.

Lanternhouse speaks to one person in a hard moment. A university speaks to many people making a long decision: an 18-year-old comparing programmes, a parent checking costs, an applicant from Accra asking about visas, a city council looking for a research partner.

I wanted the second study to prove range, so I chose the opposite of Lanternhouse on purpose: daylight instead of dusk, a typographic identity instead of a photographic one, black and white with a single orange instead of blue and yellow.

The scope matched a real institution: fourteen programmes from bachelor's to doctoral, five schools, four research labs, admissions with fees and funding, two campuses, news, events and leadership.

• A second sector, audience and visual language
• A full academic structure, not a home page and three tabs
• A real place, a fictional institution: Valencia, its river garden and its port

The identity follows a method Pentagram used for The New School in 2015: one typeface drawn in several widths and programmed so each letter takes a different width. I name the reference openly. The point was to learn how a system like that behaves on the web, not to pass it off as my idea.

On Turia, the width axis of the Archivo variable font does the work. A small function gives each letter a width from a hash of the word, so every school, lab and page gets its own repeatable logotype from the same font. Hover over one and the widths reshuffle.

Everything else stays quiet: black, white and warm paper, with one signal orange. A single orange line meanders under the hero and through the campus map. It stands for the Turia, the river the city moved.

• One variable font, endless repeatable logotypes
• A credited reference, not a borrowed look
• One accent colour, kept for action and the river line

Before the third version I reviewed four European university sites on the same morning, at desktop and phone sizes: Aalto University, ETH Zürich, the University of Cambridge and the Royal College of Art. Oxford and University of the Arts London were my first choices, but both block automated visits, so the closest equivalents stood in.

For each one I wrote down what it does well and why it works, then decided pattern by pattern what Turia should adopt. Just as useful is the list of what I left out: cookie banners, because Turia sets no cookies; extra accent colours; and carousels for primary content.

The review changed the build. The biggest single improvement came straight out of it: sending each audience to its next step directly under the hero.

• Same-day captures at 1440 and 390 pixels
• Every adopted pattern traced to its source
• A written list of patterns rejected, and why

Under the hero sit four routes: Bachelor's, Master's, Doctoral and International. Each offers two concrete next steps, so a school leaver, a researcher and an applicant from abroad all leave the first screen knowing where to go.

The programme index is a Swiss-style typographic list you can search and filter by level and school, with a photograph that follows the pointer on desktop. On desktop, a mega menu groups links the way visitors think about them and gives one slot to a featured story.

• Four audience routes before the first scroll
• Fourteen programmes, searchable and filterable
• A mega menu organised by visitor, not by org chart

Programme pages are built around what an applicant needs to decide: what you will study, semester by semester; where it leads; entry requirements; fees; and key dates, with the apply button always in view. A sticky in-page navigation shows where you are as you read.

Cost is usually the question nobody answers clearly, so the fees page has a calculator. Choose a programme, fee status, housing and any scholarship, and it estimates the year in euros, with every line shown.

International applicants get their own route: visas, housing, arrival and an honest picture of living in Valencia.

• Semester-by-semester structure on every programme
• A cost-of-the-year calculator with every line visible
• A dedicated route for international applicants

Four labs work on questions a hotter, wetter Mediterranean is asking: water, heat, human-centred AI and the port. Each lab page opens with a plain-language question, then the people, projects and partners behind it.

One story needed particular care. In October 2024 real floods devastated towns south of Valencia. The Water Lab's news story is about listening to residents and rebuilding, and its photography brief rules out disaster imagery entirely.

Statistics carry a small cited source beneath them, a pattern taken from the RCA, so that in a real build every figure has an owner.

• Four labs, each led by a plain-language question
• A real tragedy handled with restraint
• Every statistic paired with its source

Turia's photographs live in a different world from Lanternhouse: hard late-morning sun, crisp shadows, white concrete, glazed tile, orange trees and the long garden in the old riverbed. No film grain, no famous landmarks and no readable signs.

Forty-three images were art-directed from written shot briefs. The portraits were made in their own session, with one beam of window light against a lime-plaster wall, so leadership and students read as one series.

Until photography existed, every image slot showed a hatched placeholder with its file name and ratio, so the site looked deliberate at every stage of the build.

• A second house style, deliberately opposite the first
• A portrait series lit and framed identically
• Placeholders designed as part of the system

The lessons from Lanternhouse were rules here from the first day: photographs only fade and move, every frame uses a static clip so nothing escapes in Safari, nothing animates a blur, and reduced motion removes all movement.

The site sets no cookies and loads no analytics, so it needs no cookie banner, and says so. A legal notice page is there because Spanish law expects one on any site run from Spain.

That carry-over is the part that matters to a team: what I learn on one project becomes a written standard on the next, where the next person can find it.

• Motion rules inherited from the first study
• No cookies, so no banner
• A legal notice page, as Spanish law expects

The same automated check I ran on Lanternhouse (axe-core, WCAG 2.2 AA rules, ten pages at desktop and phone sizes) came back clean on most pages, with two small findings: the desktop search button's accessible name doesn't include its visible text, and one step number on the admissions page is slightly short of contrast on phones.

Two trade-offs are worth naming. The home page wordmark settles into place on load, which moves the layout on desktop more than I would accept at a client launch; reserving its final size fixes that. And the typeface loads from a public CDN, the only request to another domain. Self-hosting it is a small change.

The home page is also long, about 12,000 pixels on desktop. Every section earns its place, but a real institution should test whether the labs grid and the facts band could move to their own pages without costing visits to the programme finder.

• Two small accessibility findings, both easy fixes
• One layout-shift issue, with a known cause
• One open question a real team should test