Video thumbnail
Design
by
1O8 Agency

Pixel-Perfect Webflow Build

Custom-built responsive Webflow site from Figma, optimized for performance and easy CMS management.

A creative agency needed their client's engaging Figma design transformed into a responsive Webflow site—and I got to make it happen! I built in playful interactions, pixel-perfect layouts, and an easy-to-use CMS so the client could effortlessly manage case studies, company info and team bios without ever needing a developer. It’s easy to update, fun to explore, and built to grow with them.

The Challenge

The agency had a bold, interaction-rich Figma design that needed to translate flawlessly into Webflow. Beyond matching the look and feel, the site had to perform well across devices, remain scalable for future growth, and be easy for the client’s team to update without touching code.

My Approach

Pixel-Perfect Build
I recreated the Figma layouts inside Webflow with a structured class naming system and careful attention to typography, spacing, and grid alignment. This ensured the site mirrored the original design down to the pixel while staying maintainable.

CMS Setup
To give the client full control, I built flexible CMS collections for case studies, team bios, and company information. Each collection included all the fields they needed — from images to descriptions — so updates could be made in minutes without developer support.

Responsive & Interactive Design
I optimized layouts for desktop, tablet, and mobile views, making sure the experience felt seamless on every screen. Playful hover states, scroll-triggered animations, and smooth transitions were added to bring the design to life without overwhelming the user.

Performance Optimizations
Large images were compressed and lazy-loaded, ensuring the site remained fast. Clean, reusable components kept the build lean, improving load times and making future updates efficient.

The Solution

The finished site is a fully responsive, scalable Webflow build that matches the original Figma design pixel-for-pixel. The CMS empowers the client to add and edit content on their own, while interactions and animations create an engaging, modern user experience.

The Results

Easy to manage
Client can now update case studies, bios, and content in-house.

Fast and optimized
Website scored highly on performance metrics and loads quickly across devices.

Built to grow
Clean CMS structure means the site can scale as new content and case studies are added.

key takeaways

  1. A thoughtful Webflow build can stay true to complex designs without sacrificing performance.
  2. Investing in a clean CMS setup pays off by giving clients independence and flexibility.
  3. Subtle animations and responsive design add polish and interactivity that elevate the brand experience.

Carolyn combines technical expertise with a deep understanding of user experience, enabling her to create visually stunning and highly engaging landing pages that deliver results.

Cameron Brown
User-Centric React, Webflow & WordPress Developer
Firework

It may sound hyperbolic, but sometimes you really do find that perfect unicorn of a person to fill a role. That's what Carolyn has been for us at Shippo.

Stephen Meserve
VP, Product Marketing
Shippo

Carolyn's unwavering positivity and support made every project not just a task but a learning adventure. Her ability to inspire and guide with kindness and expertise made her an indispensable mentor and teammate.

Melissa Higareda
Product Designer & Illustrator
Shippo

I found Carolyn to be a highly skilled UX/UI designer with exceptional front-end development capabilities who brings patience, meticulous attention to detail, and a team-oriented approach to every project.

Kathy Amell
Accessibility Specialist
Cubic Transportation Services

Carolyn goes above and beyond the ask of any task with improvements and advice. She is someone you can count on and someone who will root for you and anyone else to be the best version of themselves as a designer and team member.

Teara Green
Senior Visual Designer
Shippo

One of Carolyn's greatest strengths is her empathy. She has a remarkable ability to put herself in the shoes of the end user, allowing her to design experiences that resonate deeply with them.

Rene W.
UI & UX Designer
Cubic Transportation Services

I've worked with many designers over the years, but Carolyn is my favorite because she doesn't just have an eye for enticing design and good user experience…

Kelly Carter
Senior Software Engineer & Technical Lead
NACC (National Alzheimer's Coordinating Center)

Having worked closely with Carolyn for over two years, I was always impressed by her drive to learn and grow. Despite her strong skill set, she actively seeks professional development and learns from those around her.

Brian Stahly
Software Engineering Manager
NACC (National Alzheimer's Coordinating Center)

I highly recommend Carolyn as a solid designer for competitive research, web/product strategies, and integration of these into a cohesive executable plan.

Jorge Leon
Web Manager
Firework

Let’s talk business

Send me a quick message to talk about potential opportunities.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.