UAL

Item: UAL
Rating: 7.7

London art and design university across six colleges.

7.7/10MABTU rating

DESKTOP · 1440 × 9,783/ ↗

MOBILE · 390

Section outline · Home

01heroLeft link column, right mosaic of photo and yellow tiles
02searchWide bordered course search field under the hero
03bannerFull-bleed studio shelving photo with black manifesto panel
04cardsFour study-level photo cards with arrow links3,013
05storiesAsymmetric photo grid with headline and byline captions2,067
06bannerPhoto strip of buildings with small college labels344
07eventsTwo-column event list, poster thumbnail and date block
08ctaDark photo band with yellow rule and link1,527
09footerBlack footer, three link columns and social icons8,978

Rating · Home

Visual design8.0

UX & clarity7.4

Originality7.8

Craft & consistency7.8

Motion5.5

Performance & a11y9.0

This page scores 7.7; the site score weights the home page double.

Main colours

Dark·dark grey background·mono

Typography

Helvetica Neue LT Pro Hvheading · sans · system Helvetica Neue LT Pro Mdbody · sans · system

Stack & style

Bootstrap

Bold typography Editorial Photography-led Bento grid Floating CTA Process steps Review badges Sticky header

Also: Cloudflare, Google Analytics, Google Tag Manager

Design DNA

Near-black page with white grotesk set tight and one acid-yellow accent. The hero splits into a left column of ruled arrow links under a large three-line name and a right square mosaic that alternates student-work photos with yellow type tiles carrying the lowercase colon logotype. A full-bleed strip of studio shelves runs edge to edge under a floating black manifesto panel. Course routes, stories and events are plain photo cards with hairline captions, and a final photo band captions the six colleges in small white labels.

Worth borrowing

Build the hero's right half as a square mosaic that mixes work photos with flat brand-colour type tiles.
Float a black manifesto panel over a full-bleed photo instead of a centred pull quote.
Give every card the same tiny arrow-and-caption footer so mixed imagery still reads as one system.