Flux Academy is an online educational platform focused on teaching web design and coding skills. Founded by Ran Segall, a designer and YouTuber, it aims to equip students with the necessary tools to become successful web designers and freelancers.

With Webflow introducing numerous updates, Flux Academy needed to overhaul their Webflow Masterclass 4.0 to stay current. The goal was to refresh the course content to reflect the latest features and best practices, maintaining its status as the leading resource for learning Webflow.

I designed three custom Webflow projects, each increasing in complexity to match students’ growing skill levels. From a simple portfolio to a dynamic CMS-powered website, every project was built to reflect real-world challenges while teaching essential Webflow features in context. To support the course launch, I also created a bold new landing page and a full set of marketing visuals.

For the landing page, I crafted a custom hero section that captures the course’s bold new direction and designed imagery to visually support each feature across all courses — making the value of the curriculum clear at a glance. These elements were created to match the clarity and quality of the course itself, ensuring a strong first impression and a consistent experience from first click to final lesson.

The first project is a clean, minimal portfolio for a fictional photographer named Lila Hart. This project introduces students to the fundamentals of Webflow, from working with layout tools and reusable components to setting up a basic CMS and applying consistent styling.The goal was to keep things simple, yet intentional. The design is inspired by minimal portfolios, soft colors, structured typography, and image-led layouts that put the work front and center. It’s an approachable first build that lays the groundwork for more complex projects later in the course.

I explored four distinct visual directions for this project, each pushing a different tone and aesthetic. This allowed us to clearly define what felt right for the course, before moving forward with the strongest concept and refining it into a polished final design.

We ended up choosing the first visual direction, but had to simplify the layout to match the skill level of the first build. The hero section began as a custom slideshow, but was reworked into a clean two-column layout — making it easier to build while still introducing students to core layout techniques like CSS flexbox.

Each project is paired with a unique background color that adds personality and sets it apart from the rest. This approach not only helps distinguish the work visually but also opens up creative possibilities for smooth, engaging transitions between pages.

A high-impact product landing page for a fictional sneaker drop, combining layered visuals, interactive 3D elements, and scroll-triggered animations. This project gives students hands-on experience building an immersive, dynamic one-pager loaded with advanced animation and interaction techniques. Features include a custom 3D sneaker model in Spline, Lottie animations, responsive typography, and a cinematic preloader. Students also tackle complex components like a fullscreen menu, infinite marquee, horizontal scroll, custom slider, and 3D click transforms.

With so many creative elements and moving parts, exploring multiple directions was essential. I designed four distinct directions, allowing us to confidently refine and narrow down to the strongest concept that balanced creativity and usability. Direction 4 was picked to move forward with.I explored four distinct visual directions for this project, each pushing a different tone and aesthetic. This allowed us to clearly define what felt right for the course, before moving forward with the strongest concept and refining it into a polished final design.

The sneaker was the centerpiece of the site’s visual identity. To find the perfect image, I used Visual Electric to generate dozens of sneaker designs, iterating prompts until landing on a brand-neutral yet visually stunning model that could captivate without distractions.

To wrap up Flux Academy’s Webflow Masterclass, I designed the final and most advanced project: a content-heavy website for a fictional platform called Atelier Axiom.This project teaches students how to build with the Relume library and use the Client-First framework, while working with complex content and reusable components.Atelier Axiom is a global hub celebrating how cultural traditions shape modern design. The visual identity combines heritage-inspired colors with intricate collages.

The visual identity blends heritage-inspired colors—earthy browns, warm golds, terracotta, and deep greens—with intricate collage compositions. These layered images combine traditional crafts, abstract patterns, and organic motifs to create a rich, warm, and inviting aesthetic that honors craftsmanship and cultural artistry. The mood balances creativity and tradition through textured, multi-dimensional layouts that feel both timeless and vibrant.

flux-academy.com/courses/the-webflow-masterclass All content: ©2025 Flux Academy

My role: Visual and Web Design Collaborators on Flux Academy's team: Ran Segall, Founder and CEO Burak Tuyan, Marketing Manager