Ahmad Habbab

Home › Projects › Lit: creative agency website

Lit: creative agency website

An agency site, built like a deck.

Seven services on one long page read like a price list, and Lit, a creative agency, had no case studies yet to prove its taste. I designed the site and its system, then built it in Framer myself. It was never published.

Client
Lit, creative agency
Role
UI/UX designer, design system, Framer build
Scope
11 full-screen sections, sitemap for 6 page types
Status
Not published

Seven services read like a price list.

Put seven services on one long page and visitors see a menu, not a point of view. The agency looks like every other agency in the first few seconds.

A client judging taste, fast.

A prospect deciding in seconds whether this studio has good taste. There was no case-study library yet to convince them.

A strong blue and a contour texture.

Each screen is filled with one strong blue and a subtle contour texture. Flipped to blue on white, the same texture marks chapter breaks, so eleven screens don't feel like eleven copies.

One idea per screen.

Every section is exactly one screen, and the page snaps between them like slides. A dot rail shows how many are left. Any section that couldn't earn a full screen was cut. Two were.

Decided before the build.

I was building it too, so these saved time in Framer as well.

Write the sitemap first

Six page types planned section by section before any screen, so the home page didn't try to be the whole site.

A texture that flips for chapter breaks

A contour texture gives the flat blue depth. Flipped to blue on white, it marks where one chapter ends and the next begins.

Colour pairs written down

Two colour ramps with their text pairings listed, so the right text colour on each background is a lookup, not a guess.

What I made.

11 screens: One idea each

Full-window sections, snap-scrolled, with a dot rail as the counter.

6 page types: Sitemap first

Planned section by section before the first screen was designed.

What I owned

  • Sitemap for six page types
  • Eleven full-screen sections
  • Two colour ramps, five component sets
  • The Framer build

Phone first, next time.

A full-screen deck struggles on small phones, and I designed for desktop first. Next time I'd start with the phone, and I wouldn't add a dark-mode toggle before the dark mode exists.

More case studies