AltSounds

AltSounds: The Music Video Channel, Reborn

Design & WebMusic & Entertainment

Scenes from Bleed Electric's Gravity, a RIOT film, playing full-bleed on AltSounds
The product
AltSoundsA music video channel you can leave on
The library
17,000+ videosEvery one chosen by a person
The range
1957 to nowEvery year its own channel
Speed
Under a secondWarm page loads, edge-cached
Our part
All of itBrand, product, code, search
Live at
altsounds.tvFree to watch, forever

We designed AltSounds, built it, and keep it running. Brand, product, engine, code, speed, search. All of it, ours.

AltSounds started as a simple, slightly radical idea. Remember when you could turn on a music video channel and just leave it? Then those channels disappeared and music videos got buried in search boxes and grids of thumbnails. AltSounds brings that ritual back: press play once and it keeps going, every video picked by a person, the running order chosen by an engine that learns what you like. We built it from the first sketch to the last line of code, and we still tune it every week. (Up top: Gravity by Bleed Electric, a RIOT film.)

The AltSounds Stage: the video is the interface, and the controls melt away while you watch

A brand that plays itself

The identity had one job: get out of the way of the video, then be unmistakable when it shows up. The mark is a wireframe triangle, part play button, part prism, drawn as clean geometry so it holds up from a 16-pixel browser tab to a stage screen. On the site it glows in AltSounds lime over near-black; in print and press it goes one colour.

AltSounds logo: lime wireframe triangle mark over a white wordmark on near-black
AltSounds on screen: the lime mark and white wordmark in Hanken Grotesk.
AltSounds one-colour black logo on pale paper
AltSounds in print and press: always one colour.
AltSounds black stacked logo on AltSounds green
The AltSounds lockup in black on AltSounds green.

The mark also tells you where you stand. Visitors see it as a wireframe. Create a free account and it fills in, solid lime, in the corner of every screen. A small, quiet welcome: you belong here now.

AltSounds marks: wireframe for visitors, filled faceted for members, and the app icon on a lime tile
Visitor, member, app icon: the wireframe mark, the same mark filled in facet by facet, and the dark mark on a lime tile.
Night#080A06
Panel#12160D
Mark lime#C9FD50
Acid#BFFF00
Paper#EEF2E6
Muted#9AA189
AltSounds, in its own colours

Eras get colours too. Every decade has its own fixed shade, so 90s grunge always arrives in olive and the 2020s always glow violet, wherever they turn up across the product.

1950s#008C8C
1960s#E0A800
1970s#C45100
1980s#FF1493
1990s#5F6F2D
2000s#3A8DFF
2010s#DC2626
2020s#8F00FF
A colour for every decade

Recipes, our ready-made stations, mix the colours of their ingredients. Every genre and decade in the recipe adds its own colour to the gradient, so you can see what it’s made of before a single video plays.

AltSounds Flows & Feels recipe card: a gradient mixed from the colours of its genres and decades
AltSounds Indie Dreams recipe card: a gradient mixed from the colours of its genres and decades
AltSounds Dive Bar recipe card: a gradient mixed from the colours of its genres and decades
AltSounds Cold Wave recipe card: a gradient mixed from the colours of its genres and decades
AltSounds Soft Landing recipe card: a gradient mixed from the colours of its genres and decades
AltSounds Party! recipe card: a gradient mixed from the colours of its genres and decades
AltSounds Electric Heaven recipe card: a gradient mixed from the colours of its genres and decades
AltSounds Get Heavy recipe card: a gradient mixed from the colours of its genres and decades
AltSounds press kit hero artwork
AltSounds press kit artwork, built from the brand system.
AltSounds app icon, dark mark on a rounded lime tile
The AltSounds app icon: the dark mark on a rounded lime tile.
AltSounds phone wallpaper with the stacked logo
An AltSounds phone wallpaper from the press kit.

Do nothing, or do everything

Most products make you choose: sit back, or dig in. AltSounds refuses to choose. The default is zero effort, a stream we call the Flow that keeps the room going for an hour or a whole day. Underneath sits a full control layer we call the Mothership, where you can steer without ever stopping the music: see the artist’s whole story, jump to related videos, step sideways into a genre, or line up exactly what plays next.

The AltSounds Mothership: artist, related, genre and mix, without the video ever stopping
AltSounds interface: mode artistArtist
AltSounds interface: mode relatedRelated
AltSounds interface: mode genreGenre
AltSounds interface: mode mixMix
AltSounds interface: recipesRecipes
AltSounds interface: newnoiseNew Noize

Every click is taken at its word. Play an artist and you get that artist. Pick a song and you get its world. Choose a director and you watch through their eyes; pick a record label and you get its roster. It sounds obvious. It took a lot of careful product design to make it feel that way.

“Picked by a person.
Played by the engine.”
The AltSounds promise

An early version of the autoplay served a perfect run of heavy music, then lurched straight into pop. It didn’t understand what it was playing. So we built a taste engine that does. Every video is scored against its genuine neighbours, with rare genres weighted far more than broad ones, so a match on math rock counts for more than a match on “alternative”, which half the catalogue shares. Play something through and it becomes the seed: the stream drifts naturally from metal into hard rock into alt, instead of snapping.

The AltSounds taste engine at work: one seed, fourteen hops, no edits

It learns both ways. Hearts and shares lean the stream towards what you love; hiding a song, an artist or a whole genre steers it away. No ads, and nobody selling your attention.

A different animal on a phone

On a phone, AltSounds behaves like a feed you actually want. A muted video starts the moment you arrive, one tap brings the sound, and from then on it simply keeps going. Phones are designed to stop the next video playing by itself; getting the one after that, and the one after that, to start without a touch was a small war. We won it.

Muted autoplay on arrival, then a stream that never stops
Six AltSounds phone screens with rounded corners
Playing, your mix, the artist, sharing, hiding and signing in, all under your thumb.

Press play. It plays.

Speed is part of the design. No spinner, no stutter. Warm pages load in under a second from the edge, the player is built to start before the rest of the page has finished thinking, and we keep it that way week after week, including the weeks when unwanted traffic comes knocking. Visitors should only ever see the video, already running.

Homepage
0.17sWarm response from the edge
Artist profile
0.26sDiscography, tours and all
Video page
0.43sPlayer included
Search
100Lighthouse SEO, every page we tested

Built for discovery

A channel nobody can find isn’t a channel. Every artist on AltSounds gets one of the deepest profiles on the open web: discography with the videos attached, tour dates sorted by what’s near you, related artists, influences, headlines, and a decade of the original AltSounds journalism brought back from the archive. Underneath, each profile tells Google the band, its members, every video, the albums, the tour and the FAQ as one connected record, and directors, genres, decades and record labels each get their own clean, crawlable home.

The Beatles artist profile on AltSounds: the story, the stats and the latest videos
The Beatles on AltSounds: the story, the stats and the latest videos.
The Beatles artist profile on AltSounds: The discography, every album with its videos attached
The discography, every album with its videos attached.
The Beatles artist profile on AltSounds: Influences, related artists and the press
Influences, related artists and the press.
The Beatles artist profile on AltSounds: Every headline, then the questions people actually ask
Every headline, then the questions people actually ask.

Our design team, for every band

Not every band has a designer, so we lent them ours. The share studio turns any video on AltSounds into a finished, post-ready image in seconds, with the artist, the song and its genres already set. Three formats, four designs (Duotone, Editorial, Tour and News), and a stack of the colours and effects our designers reach for on real campaigns.

AltSounds share studio card: Ren, Hi Ren: Duotone
Ren, Hi Ren: Duotone.
AltSounds share studio card: Bring Me The Horizon: Tour
Bring Me The Horizon: Tour.
AltSounds share studio card: Nirvana: Editorial
Nirvana: Editorial.
AltSounds share studio card: Radiohead: Editorial
Radiohead: Editorial.
AltSounds share studio card: Laufey: Duotone
Laufey: Duotone.
AltSounds share studio card: Slipknot: Duotone
Slipknot: Duotone.
AltSounds share studio card: Oasis: Tour
Oasis: Tour.
AltSounds share studio card: Arctic Monkeys: Editorial
Arctic Monkeys: Editorial.

Building a web product?

AltSounds showcases everything we do at RIOT in one place: naming the idea, designing the brand, shaping the experience, writing the code, making it fast and making it findable. The whole story is on the AltSounds canon, and the channel itself is live at altsounds.tv. If you have a product that deserves the same care, say hi.

Credits

Product
AltSounds
Brand identity
RIOT
Product and UX design
RIOT
Engineering
RIOT
Taste engine
RIOT
Performance and security
RIOT
SEO and structured data
RIOT
Share studio
RIOT

ServicesProduct DesignUX & UIWeb DevelopmentBrand IdentitySEOStrategy