Neon Rated

Why it works

Massive film stills serve as hero images with near-invisible navigation, letting visuals dominate entirely. Typography is large and confident against dark backgrounds, creating immediate hierarchy. Strategic breathing room between film tiles prevents visual chaos while maintaining an exclusive, gallery-like atmosphere.

Who should look at this

Entertainment brands and media companies wanting to prioritise content discovery over navigation clutter.

Signature technique

Full-bleed hero image with centred minimal text overlay, followed by a grid layout with a consistent image-to-title ratio — a card pattern worth stealing for any portfolio or catalogue.

How the page is built

1. Floating red header. A small red bar in the centre of the screen holds the logo and icons for search, saved items, account and bag, with a slim 'Get tickets' strip tucked beneath it.
2. Full-screen film hero. A giant condensed red title sits over a dark film still with an 'In Theaters' label, trailer and ticket buttons, and a row of dots to move between ten featured titles.
3. In Theaters row. Large poster-still cards sit side by side, each captioned with its title, so visitors can browse what is showing.
4. Coming Soon. Upcoming films are listed with release dates and trailer buttons, building anticipation before the films arrive.
5. Watch Now. A list of titles available to stream gives visitors something to watch today.
6. New merch and best sellers. Sweatshirts, posters, a box set and a screenplay appear with prices and clear 'Pre-order' or 'Sold out' tags.
7. Award winners. A list of acclaimed films the company has released closes the page with proof of quality.

Look and feel

Black, red and white, with full-bleed dark film stills, enormous condensed red capitals for titles and black condensed headings on white sections. It looks like a cinema marquee, loud and fast and confident.

Where it might not fit

Ten rotating hero slides mean the opening message keeps changing, and the loud red-and-black look would overpower a gentle brand. The merchandise sections also add a lot of length for a visitor who only wants to see what is playing.

What to borrow

• Give each hero slide a single title in giant condensed capitals with two clear buttons, such as trailer and tickets, so the choice is obvious.
• Sort your catalogue into plain states visitors understand, such as In Theaters, Coming Soon and Watch Now, instead of by genre or date.
• Put merchandise beneath the main offer with prices and clear 'Pre-order' or 'Sold out' tags, so the shop earns without taking over.

Brief your developer

“I want a full-screen dark hero with one huge condensed red title over a still, two buttons beneath it, dots to move between ten featured items, a small floating red header pill, and below it rows labelled with plain states such as 'In Theaters', 'Coming Soon' and 'Watch Now'.”

Want a full version for your own site? Get the brief.

How should I organise a catalogue so visitors know what to do?

Neon sorts its films into plain states, In Theaters, Coming Soon and Watch Now, and each row shows a still, a title and the right action, whether tickets, a trailer or a stream. Visitors choose by what they can do today. Sort your own catalogue by what a visitor can do with each item.

Can a shop sit alongside a main offer without taking over?

Neon places merchandise below the films as 'New Merch Arrivals' and 'Best Sellers', with prices and clear 'Pre-order' and 'Sold out' tags. The films stay the star while the shop earns extra. Show the price and the availability on every product so the section needs no explanation.