In this Webflow tutorial, I'll show you how to develop the overview page for my courses. I'll take you behind the scenes and explain my design process, the implementation challenges and how I integrate various elements into Webflow. Learn how to work with Gradients, Flexbox, and reusable components to create an attractive and functional overview page.

Behind the scenes: How I develop the overview page for my Webflow professional course

After we recently implemented the integration of the 3D box, I will now dedicate myself to creating an overview page for my various courses. I would like to show you my thought process and explain how I come to my design decisions.

The initial situation: present several courses clearly

With now three courses — the Webflow online course, who bag of tricks and the new Webflow professional course — do I need an overview page that presents all offers clearly and attractively. The aim is to offer visitors a simple comparison option and at the same time present all important information at a glance.

Initial considerations and design approaches

Organize content

First of all, I asked myself the question: What information do I want to convey? It's about highlighting the core elements of every course without cluttering the page. In doing so, I tried out various approaches:

• Tabular listings: Although tables are compact, they are not always easy to scan.
• Lists with checkmarks: This method makes it easier to capture content and directly signals which features are included.
• Graphic elements: By integrating images and icons, attention can be directed in a targeted manner.

Color design and accent colors

The use of accent colors plays an important role in highlighting certain elements. However, I found that too many color accents can attract attention. That's why I've decided to introduce a second accent color to highlight important information such as “new” or special features without overwhelming the user.

Design decisions in detail

Placement of headlines and graphics

A central element is the Headline placement. I've tested various layouts to find out which arrangement is the most intuitive. I have found that a clear separation between graphical elements and text blocks increases readability.

Reuse of style elements

To ensure a consistent design, I have existing Style elements such as lines and gradients picked up from other areas of the website. This creates a uniform appearance and makes orientation easier for the user.

Integrate graphics for every course

For the Webflow professional course I wanted to integrate a visually appealing element. Since I've already used the 3D box on the landing page, I decided to use it on the overview page as well. For the other courses, I've considered using similar graphical elements to achieve a consistent presentation.

Implementation in Webflow

Challenges with gradients and background elements

The implementation of Gradients and background elements presented a particular challenge. In Figma, these effects are easy to create, but translating them to Webflow sometimes requires creative solutions. Through the Outsourcing gradients to separate elements I was able to achieve the desired look and control it more easily via a component.

Responsive design and scaling

An important aspect is the Adapting the design to different screen sizes. Through the use of Viewport units (VW) and percentage values, I was able to flexibly scale the elements. In this way, the presentation of courses remains appealing even on mobile devices.

conclusion

Creating the overview page for my courses was an exciting process that involved both creative and technical challenges. By trying out different approaches and iteratively improving the design, I've found a solution that is both functionally and aesthetically convincing.

Would you like to deepen your Webflow skills and learn advanced techniques? In my new online course the ”Webflow Expert course“ I'll show you how to implement complex projects, create individual animations and work with custom code. This course is aimed at advanced learners who want to take their skills to the next level. Find out more on my landing page and secure your access!