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
- Abha Chamber: a bilingual platform
- Afko: internal back-office
- Flex Delivery: on-demand delivery app
- Ibn Al-Nafis: herbal apothecary website
- Co.Payment: a wallet for two currencies
- FBSU: university learning platform
- OASIS: a mall super-app
- CVT: portfolio & résumé builder
- TwinWin: buy-one-get-one network
- Zed Order: Arabic food-ordering app
- Zoumorod: a gold-trade platform
- SOS: SEC's industrial-security system
- Harmony: teleradiology operations platform