Quark Extension is a website-blocking browser extension from the creators of Deep Focus Lab. It's designed to help you regain control of your screen time and improve your digital habits, focus, and productivity.

They reached out to me to convert their Figma designs into a responsive and optimized website. I recommended using Framer for this project, as it was the best choice for their requirements.

I carefully transferred their designs, animations, and visuals into a Framer website and helped them better understand the platform and how it can scale with their needs.

💡 Project Scope: Framer Development ⚙️ Tools: Figma, Framer 🕘 Timeline: 7 days 🌐 Live Website: www.quark.to/extension

Consultation: In our initial meeting, we aligned on the project requirements and the best path forward. I walked the client through the advantages of building with Framer, ensuring they had a clear understanding of the platform and the successful outcome we would achieve together.

Development (Framer): Transferring Figma designs, building components, optimizing for SEO, and ensuring full responsiveness.

Revisions & Testing: Throughout the project, we continuously tested our progress and ensured everything was aligned with the initial requirements.

Project Delivery: Upon final approval, the project was fully transferred to the client's Framer account. My final deliverables included a recommendation for the best Pricing plan and a complimentary two-week period of post-launch support.

The design's color palette consists of a primary blue (#1B64D7), a clean white (#FFFFFF). For typography, Wix Madefor Display was selected as the sole font for all text elements to ensure consistency across the website.

The primary goal was to convert the Figma designs into a Framer project. I transferred the complete design system (fonts, colors, and visuals) and implemented custom animations.

This is a fully responsive website, designed for desktop, tablet, and mobile. The mobile experience is fully optimized, retaining all media and components from the larger screens without compromise.

Challenge #1: Instead of using fixed breakpoints, the client requested a fluidly responsive design between desktop and tablet sizes, where all components (text, containers, media) scale down proportionally. Solution: I achieved this by setting the main container's width relative to the viewport width. All child components were then sized using percentages, allowing them to scale smoothly and adapt automatically to changes in screen size.

Challenge #2: The media files in the original design were large and could negatively impact the website's performance. Solution: I compressed all images and converted them to the WebP format without losing visual quality.

This hero section showcases the benefits of the browser extension and how it can positively impact your life. It features an auto-playing slider, where a new slide appears every five seconds.

This section showcases the main features of the browser extension.

This is a demonstration of how the browser extension works.

This section provides the download links for the browser extension and features a unique animation that was built in Framer.

The footer, the final section of the website, contains useful links and a QR code that redirects users to the installation page.

🤔 Looking for a Framer developer with Web Design skills? 🚀 Let's connect!