01Selected work
Barc*
A product-launch marketing site for a fictional dog-translation wearable, designed and built in Webflow.
- Role
- Design + Build
- Client
- Self-directed concept
- Stack
- Webflow CMS Webflow Interactions Swiper
- Year
- 2025
02Approach
A fake product that had to feel real
Barc* is a full marketing site for a wearable that supposedly translates dog barks into human speech. The product doesn't exist, so the brief was tone.
It had to read like a funded hardware startup on every screen without dropping the joke, and still be a site a marketing team could run day to day.
03Page system
One system. Every section
A bento homepage, a CMS-run blog, a pricing table with a monthly / annual toggle and dark / light section flips, built as one marketing-site system rather than a set of one-off pages.
- APricing
- BSpec section
04Interactions
Scroll-driven, not video-driven
The onboarding walkthrough pins a phone mockup while its screen and step copy swap on scroll. Reveals run on Webflow scroll interactions rather than video, so they stay crisp at any viewport size.
- 01
Scroll-scrubbed reveal
The hero device rotates and scales as you scroll into the section.
- 02
Image inside the headline
A small clip sits between words in the H1 and wraps with the type.
- 03
Palette flips
The spec section turns full-bleed dark mid-scroll.
05Design system
A startup brand with a straight face
A single grotesk carries the voice, with a mono face for specs and labels. A light neutral base lets product renders and lifestyle photography do the selling, with the dark spec section as the one hard contrast.
Aa
BDO Grotesk
Display + Body
Aa
JetBrains Mono
Labels
- #121212
- #162fb0
- #ab4625
- #f7f6f5
- A · Spec section
- B · Homepage
- C · Bento grid
06Impact
Launch-ready system
Homepage, pricing, specs and blog built as one reusable marketing-site system.
Scroll-first story
Product reveals and the onboarding walkthrough are driven by scroll, not video.
CMS-run content
Blog posts are added and edited without touching the page layout.
Status
- Self-directed concept, built and published live at wearbarc.webflow.io.
- Used to pressure-test a full marketing-site system end to end.
07What I actually built
Webflow CMS
Collection-run blog
Scroll interactions
Reveals, pinned walkthrough, parallax
Bento layout
Mixed media grid, fully responsive
Pricing toggle
Monthly / annual switch
Responsive implementation
Tuned for every breakpoint
Brand + UI design
Designed from scratch
08Next project
Have a complex Webflow project?
I build agencies' designs in Webflow under their brand, from complex CMS builds to custom interactions and integrations.
Let’s talk
