Gaby Castellanos | Webflow Landing Page
Radu Sferlic
Full project description
Overview
I developed this custom Webflow website for Gaby Castellanos, an internationally recognized advertising and marketing strategist, transforming a detailed Figma design into a polished, responsive, interactive website.
The objective was not simply to reproduce the Figma layouts visually. The challenge was to preserve the personality of the original creative direction while translating complex compositions, overlapping graphics, unconventional typography, imagery, and interactive elements into a responsive Webflow experience.
The final website works as a personal brand platform, portfolio, event hub, and service website—all within one cohesive experience.
Figma → Webflow Development
The complete website was developed in Webflow based on the supplied Figma design.
My work included:
Pixel-accurate Figma implementation
Responsive Webflow development
Custom section structures
Advanced positioning
Layered visual compositions
Custom typography implementation
Image and graphic optimization
Reusable classes and components
Responsive adjustments across breakpoints
Interactive elements
Hover states
Scroll-based experiences
Calendar/event functionality
Forms and CTA interactions
Cross-device testing
Final Webflow optimization
The goal throughout development was to maintain the intentionally unconventional design without sacrificing usability or responsiveness.
Hero Section
The website opens with a highly visual personal-brand hero built around oversized typography, illustrated elements, layered imagery and Gaby's personality.
Rather than using a conventional centered headline and CTA structure, the hero uses typography and imagery as part of the composition itself.
The build required careful control over:
Oversized typography
Layer positioning
Image placement
Decorative illustrations
Responsive scaling
Breakpoint-specific positioning
Visual hierarchy
The result preserves the expressive Figma art direction while remaining functional across screen sizes. (gaby-23114e-b098aa684d747bc71edbcbe2c30.webflow.io)
About / "What You Must Know"
The About section introduces Gaby's career and background through a long-form editorial composition rather than a conventional biography block.
The content covers her 36+ years in advertising and marketing, leadership roles, international campaigns, major brands and artists she has worked with, and her experience as a speaker and strategist. (gaby-23114e-b098aa684d747bc71edbcbe2c30.webflow.io)
From a development perspective, this section required careful handling of:
Long-form content
Typography hierarchy
Editorial spacing
Imagery
Responsive text behavior
Decorative assets
Large content areas
The result feels closer to an interactive editorial feature than a standard About section.
Achievements / "Pride and Prejudice"
Instead of presenting traditional awards in a predictable logo grid, the site uses a much more personal bucket-list-style achievements section.
Achievements are paired with custom visual elements and checkmarks, creating a playful way of communicating experience and authority.
The section includes accomplishments such as working with major creatives, creating campaigns for globally recognized artists, building innovative agencies, and educating large audiences. (gaby-23114e-b098aa684d747bc71edbcbe2c30.webflow.io)
This required translating a very art-directed Figma composition into a structured Webflow layout while keeping the deliberately informal visual style intact.
Projects / "My New Adventures"
The website includes a dedicated showcase for Gaby's current projects and ventures.
Featured projects include:
Mindblowing Cards — a creativity concept that evolved from a book idea into a game.
Vender o Morir — a teaching and conference experience focused on sales, strategy and engagement.
Marketing Therapy — a one-to-one strategic consulting format for entrepreneurs and businesses. (gaby-23114e-b098aa684d747bc71edbcbe2c30.webflow.io)
Each project is presented through:
Custom imagery
Project title
Description
Visual accents
CTA
Consistent but distinctive card/layout treatment
The section was developed to make individual projects feel part of the same brand while still giving each project its own identity.
Interactive Events Calendar
One of the more distinctive parts of the project is the custom event/calendar section.
Rather than using a conventional embedded calendar, the experience was designed specifically for the website.
Visitors can browse Gaby's appearances and events organized by month, with individual dates, event titles and navigation between calendar views. The live build includes monthly event views and previous/next navigation. (gaby-23114e-b098aa684d747bc71edbcbe2c30.webflow.io)
This section required particular attention to:
Monthly event organization
Event date hierarchy
Navigation controls
Active calendar states
Repeating event structures
Responsive behavior
Maintaining readability with multiple events
It transforms what could have been a basic list of events into a branded part of the experience.
Services / Solutions
The website transitions from personal storytelling into commercial positioning through a dedicated solutions section.
Services presented include:
Personalized strategic consulting
Custom conferences
Socialphilia / agency collaboration
The section explains how companies and individuals can work with Gaby while maintaining the same distinctive voice used throughout the website. (gaby-23114e-b098aa684d747bc71edbcbe2c30.webflow.io)
I translated this portion of the Figma design into reusable Webflow structures while preserving the unconventional visual composition.
Contact Experience
The final part of the website avoids a generic corporate contact section.
Instead, it uses the same personality-driven language and graphics found throughout the project, including direct Instagram communication and a custom contact interaction. (gaby-23114e-b098aa684d747bc71edbcbe2c30.webflow.io)
The result is a contact experience that feels like a continuation of the brand rather than a disconnected form at the bottom of the page.
Animations & Interactions
A major focus of the development was ensuring that such an expressive design didn't feel static once translated from Figma into Webflow.
The implementation included interaction work around elements such as:
Section transitions
Content reveals
Hover interactions
CTA states
Navigation behavior
Image and graphic movement
Interactive project elements
Calendar navigation
Layered visual compositions
Responsive interaction behavior
The animation philosophy was to support the personality of the design rather than overpower it.
Because the visual identity already contains oversized typography, illustrations, photography and unconventional compositions, interactions were implemented to complement that system rather than make the website feel unnecessarily animated.
Responsive Development
One of the largest challenges with this project was responsiveness.
The desktop design relies heavily on:
Oversized text
Absolute and layered positioning
Overlapping imagery
Illustrations
Irregular spacing
Asymmetrical compositions
These types of designs cannot simply be scaled down for mobile.
Each major section required responsive decisions to preserve the visual hierarchy and personality while making the site practical on smaller screens.
I optimized the build across:
Desktop → Tablet → Mobile
with particular attention to typography, graphic positioning, spacing, content order, interaction usability and readability.
Webflow Implementation
The entire experience was developed inside Webflow, giving the final site the benefits of a visual CMS and maintainable structure while still allowing for a highly custom frontend experience.
The development focused on:
Clean structure
Organized sections and reusable styling rather than an unmanageable collection of one-off elements.
Maintainability
Making future content updates easier without rebuilding entire layouts.
Responsive behavior
Adapting the complex Figma art direction intelligently across devices.
Performance awareness
Optimizing assets and interactions where possible while maintaining the intended creative experience.
Interaction fidelity
Making the finished website feel dynamic rather than simply reproducing static Figma screens.
The Challenge
The biggest challenge wasn't technically building individual sections.
It was taking a design that intentionally breaks conventional web-layout rules and making it work as a real website.
The Figma direction relies on editorial compositions, massive typography, handwritten elements, illustrations, photography, overlays and irregular positioning.
A basic Figma-to-Webflow implementation would quickly fall apart across different viewport sizes.
The project therefore required a combination of:
Webflow development + responsive problem-solving + interaction design + attention to visual details.
The Result
The finished product is a highly customized Webflow experience that preserves the personality and creative direction of the original Figma design while turning it into a functional, responsive website.
Rather than feeling like a standard personal portfolio template, the site functions as an extension of Gaby Castellanos' brand—bold, unconventional, direct and highly visual.
The finished website brings together:
Personal branding
Storytelling
Career achievements
Project showcases
Events
Calendar functionality
Services
Lead generation
Contact
Animations
Responsive development
within one cohesive Webflow implementation.
Like this project
Posted Aug 11, 2026
Conferencista internacional y estratega de marketing y creatividad. Experta en convertir marcas y proyectos en negocios rentables.
Likes
1
Views
0
