From Canvas to Code: Designing and Building an Agency’s Digital Flagship

My Role(s)

UI/UX & Webflow Designer

Tools

Figma, Webflow, Photoshop

Year

2024-2025

Live Site

Problem

When I first joined Apperr in 2023, I designed our first website, but the final implementation lacked the polish, responsiveness, and tactical execution we needed to attract high-tier clients. It was a classic bottleneck: great design concepts getting diluted during the development handoff. I realized that if I wanted our digital presence to truly reflect our design standards, I needed to bridge the gap between canvas and code myself. I spent months mastering Webflow, pitched a complete overhaul to our CTO, and took full responsibility for both the redesign and the development.

Role(s)

Lead Product Designer & Webflow Developer

I bridged the gap between raw canvas and live code, taking complete ownership of the design-to-deployment pipeline:

  • Figma UI/UX: Crafted a responsive, conversion-focused design system built strictly around the web box model.
  • Webflow Development: Engineered the entire site from scratch using semantic HTML, CSS Grid, and custom animations.
  • Finsweet Integration: Taught myself and implemented Finsweet Attributes to power instant, seamless CMS portfolio filtering.
  • Interaction Design: Layered in premium micro-interactions to elevate the agency's digital brand feel.
  • Technical SEO: Collaborated closely with our team's SEO specialist to optimize site architecture, heading structures, and metadata for peak search performance.

The Process

1. The Convertible Figma Architecture

Instead of designing abstract layouts that break during development, I built the entire Figma file with a strict, developer's mindset. I mapped out a unified typography scale, dynamic spacing systems, and responsive layouts that directly mimicked Webflow’s box model. By utilizing strict auto-layout constraints and reusable component variants, I ensured that every layout transition from desktop to mobile was mathematically sound before moving a single pixel into the browser.

2. Bringing It to Life in Webflow

Transitioning into the development phase, I built the site from the ground up in Webflow using clean, semantic class structures and modern CSS layouts like Grid and Flexbox. I focused heavily on performance and clean code architecture, ensuring the site was lightweight, perfectly optimized for SEO, and lightning-fast. To elevate the user experience, I layered in custom, subtle micro-interactions and fluid, scroll-triggered animations that gave the site an elite, high-end agency feel without sacrificing load times.

Closing Note

By taking the initiative to learn Webflow and owning the entire pipeline from the first Figma frame to the final live publish, I eliminated the friction of the traditional design-to-dev handoff. The result is a high-converting, fully responsive digital flagship that serves as a living testament to Apperr’s technical and creative capabilities proving that we don't just design great experiences, we build them.

The Solution

By taking the initiative to learn Webflow and owning the entire pipeline from the first Figma frame to the final live publish, I eliminated the friction of the traditional design-to-dev handoff. The result is a high-converting, fully responsive digital flagship that serves as a living testament to Apperr’s technical and creative capabilities proving that we don't just design great experiences, we build them.

Up Next...

TrialClinIQ

View Project

GoSendeet

View Project