teenage engineering

Item: teenage engineering
Rating: 8.3

Stockholm maker of synthesizers, speakers and design objects.

teenage.engineering Save page

8.3/10MABTU rating

now

DESKTOP · 1440 × 15,233/ ↗

MOBILE · 390

Section outline · Home

01heroComic illustration campaign
02product featureBlack studio product shot
03product featureVinyl release on black
04product featureHero shot plus three accessory tiles
05product featureHero shot plus bundle tiles
06campaignCollage artwork plus three tiles
07product featureBlack shot plus three tiles
08product featureSpeaker shot plus three colourways
09product gridGrid of nine pocket operators
10footerExplore all products bar and links

Rating · Home

Visual design8.9

UX & clarity7.8

Originality9.0

Craft & consistency8.7

Motion6.0

Performance & a11y8.5

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

Main colours

Light·white background·vivid

Typography

Te 20body · font · self-hosted

Stack & style

Remix / React Router React

Minimal Illustration-led Photography-led Sharp / geometric Floating CTA Sticky header Transparent header

Also: Amazon CloudFront

Design DNA

A tiny icon-led header (products, store, latest, finder) with the TE logo. Campaign hero is a black-line comic illustration with heavy condensed title. Below, full-width black studio shots of single products lit dramatically alternate with three-up white product tiles with tiny grey captions and blue 'buy now' links. A loud collage campaign (Riddim n Ting) breaks the rhythm, then a grid of pocket operators and a black footer bar. Mobile turns products into stacked dark cards.

Worth borrowing

Alternate one full-bleed dark hero product shot with a three-up white tile row of related items.
Use pictogram icons with tiny captions as the top navigation.
Drop a single loud illustrated campaign band between otherwise silent product photography.