Sykes Creatives

Context

Context

For years, the studio operated as a creative services provider — web design, branding, graphic design, video editing. Capable work, delivered well. But the market had shifted. Every capability we offered had become commoditized. Prospects could find a designer on Fiverr, a developer on Upwork, a video editor on any number of platforms. The value was no longer in execution. It was in the thinking behind it — and the studio had no way to demonstrate that through the way it presented itself.

Challenge

Challenge

The website said what the studio did. It didn't show how the studio thought. It listed services — Web Design, Branding, Graphic Design, Video — as if they were separate departments. It presented work as deliverables rather than outcomes. It positioned the studio next to a thousand other agencies doing the same thing with different color palettes. And it failed to communicate the one thing that actually differentiated the studio: that the work was built as one integrated system, not a menu of disconnected services.

Insight

Insight

The clients who valued the studio most weren't buying a website or a logo. They were buying a partner who could think across every medium their brand lived in — someone who understood that a logo is not a brand, a website is not an experience, and a video is not a story. What they wanted was coherence. What they were getting was a collection of pieces. The gap wasn't in execution. It was in framing.

Opportunity

Opportunity

To stop positioning the studio as a service provider and start positioning it as a Creative + Digital Experience Studio — one integrated practice spanning strategy, brand, creative, motion, experience, and technology. And to build a website that didn't just claim that positioning. It demonstrated it.

Strategy

Strategy

Three moves. First, reposition the studio around the experience it creates for brands and their audiences — not the assets it produces. Second, develop a proprietary framework — the six pillars of the Sykes System — that could articulate how the studio thinks without sounding like a process doc. Third, build a website that demonstrates the philosophy in its own execution: the same warmth, intelligence, and intentionality the studio brings to client work would be visible in every section of the site.

Creative Direction

Creative Direction

Warm editorial, not generic tech. A palette built around warm-black, bone text, and a single accent color — terracotta at the time of launch. Roboto Condensed for the type — an editorial sans with heritage, not a startup stack. Oversized display type. Editorial compositions. A hairline grid that runs underneath the site as a visual signature. No gradients. No glow effects. No AI-startup aesthetic. The visual system would signal 'studio' rather than 'SaaS' in the first three seconds.

Identity

Identity

The identity work wasn't a logo redesign. It was a set of decisions about how the studio would express itself across every surface: the type, the palette, the grid, the motion language, the voice. Consistent editorial numbering (001, 002, 003) across sections. Accent used sparingly — never more than 1% of any screen. Every interaction earned, never decorative. The visual system became the studio's most articulated piece of brand work — because it was the studio applying its own method to itself.

Experience

Experience

The homepage became a scroll journey rather than a brochure. The Hero uses an interactive 3D constellation that warms to the accent color as the cursor approaches. The Thesis section is a seven-chapter scroll narrative rather than a static process diagram. Capabilities are presented as an editorial index — all five visible together, each expanding on hover. Work is a horizontal reel — deliberate navigation, not a grid. The Experience Score™ is a real working product: enter any URL, get an audit across five dimensions. Nothing is decoration. Everything is doing work.

Motion

Motion

Motion was treated as a discipline. Page transitions use a staggered column curtain — five panels rising in sequence, an accent hairline riding the leading edge, a route label at center. Scroll animations replay on every entry and exit, honoring `prefers-reduced-motion` throughout. The Featured Work reel uses custom RAF animation for smooth stepping. Every animation on the site exists to communicate hierarchy, transition, storytelling, or personality — never for its own sake.

Technology

Technology

Built on Next.js 16 with App Router, React 19, and Tailwind v4. Supabase for the submission database. Resend for transactional email. Framer Motion for the motion system. React Three Fiber for the 3D constellation. Cheerio for the Experience Score's HTML analysis. Custom canvas renderers for the grid backdrops and the animated signal flow. Every technology choice was made to serve the experience — not to demonstrate technical sophistication for its own sake.