Coffie — Coffee Shop & Roastery Website (Concept Project)

Client: Personal / Concept Project Role: Web Designer / Framer Developer Timeline: July–August 2026 Deliverables: Full site design, storytelling scroll sections, custom hover interactions, parallax image reveals, typography system, responsive build

Challenge & Scope

Coffie is a self-directed concept project imagining the website for a coffee shop and roastery that sources, roasts, and brews everything in-house. The goal wasn't just to make a pretty landing page — it was to design a site that could actually sell the feeling of good coffee: warm, tactile, unrushed, with enough atmosphere that a visitor could almost smell it.

Rather than a generic "hero + menu + contact" template, the brief I set for myself was to build a site structured like a story — from the bean's origin to the cup in your hands — using scroll, imagery, and typography to carry that narrative.

Approach & Implementation

I designed and built the entire site myself in Framer, treating the homepage as a single continuous journey rather than a stack of disconnected sections.

A Warm, Editorial Visual Language

The palette leans into deep espresso browns and near-black backgrounds, paired with a warm serif typeface for headlines. Large, high-contrast photography of espresso extraction, beans, and brewing does most of the talking — text is kept minimal and confident.

From Seed to Cup: A Scroll-Driven Story

The site's centerpiece is a scrolling narrative section — "From seed to your cup" — that walks the visitor through sourcing, roasting, and brewing using staggered, offset images that reveal and reposition as you scroll. It's built to feel like flipping through a coffee journal rather than browsing a product list.

Custom Hover Interactions

Buttons like "More about us" use a custom liquid/blob hover effect instead of a standard state change — a small detail that reinforces the tactile, organic feel of the brand rather than looking like a stock component.

Full-Bleed Photography & Pacing

Sections alternate between full-width statement photography (close-up pours, roasted beans) and quieter text-led moments, giving the page rhythm instead of a constant wall of imagery.

Typography & Tone

A pairing of a classic serif for emotive headlines ("Coffee can take you to many places") with a clean sans for supporting copy keeps the site feeling premium and editorial rather than like a typical local-business template.

Results

A fully self-designed and developed concept site built end-to-end in Framer

A scroll-driven "seed to cup" storytelling section that replaces a standard about page

A custom liquid hover interaction on key CTAs

A cohesive warm, dark visual identity built around photography and serif typography

A page built to prove that even a "simple" coffee shop site can carry real narrative and motion craft

Coffie was built as a showcase of how far a small business site can be pushed — using story, pacing, and small interaction details to make a coffee shop feel like a considered brand rather than a template.