In diesem Webflow Tutorial zeige ich euch, wie ich die Übersichtsseite für meine Kurse entwickle. Ich nehme euch mit hinter die Kulissen und erläutere meinen Designprozess, die Herausforderungen bei der Umsetzung und wie ich verschiedene Elemente in Webflow integriere. Erfahrt, wie ich mit Gradients, Flexbox und wiederverwendbaren Komponenten arbeite, um eine ansprechende und funktionale Übersichtsseite zu erstellen.

Hinter den Kulissen: So entwickle ich die Übersichtsseite für meinen Webflow Profi-Kurs

Nachdem wir zuletzt die Integration der 3D-Box umgesetzt haben, widme ich mich nun der Erstellung einer Übersichtsseite für meine verschiedenen Kurse. Ich möchte euch meinen Denkprozess zeigen und erklären, wie ich zu meinen Designentscheidungen komme.

Die Ausgangssituation: Mehrere Kurse übersichtlich präsentieren

Mit mittlerweile drei Kursen – dem Webflow Online Kurs, der Trickkiste und dem neuen Webflow Profi Kurs – benötige ich eine Übersichtsseite, die alle Angebote klar und ansprechend präsentiert. Ziel ist es, den Besuchern eine einfache Vergleichsmöglichkeit zu bieten und gleichzeitig alle wichtigen Informationen auf einen Blick darzustellen.

Erste Überlegungen und Designansätze

Inhalte strukturieren

Zunächst habe ich mir die Frage gestellt: Welche Informationen möchte ich vermitteln? Es geht darum, die Kernelemente jedes Kurses hervorzuheben, ohne die Seite zu überladen. Dabei habe ich verschiedene Herangehensweisen ausprobiert:

• Tabellarische Auflistungen: Obwohl Tabellen eine kompakte Darstellung ermöglichen, sind sie nicht immer leicht zu scannen.
• Listen mit Checkmarks: Diese Methode erleichtert das Erfassen von Inhalten und signalisiert direkt, welche Features enthalten sind.
• Grafische Elemente: Durch die Integration von Bildern und Icons kann die Aufmerksamkeit gezielt gelenkt werden.

Farbgestaltung und Akzentfarben

Die Verwendung von Akzentfarben spielt eine wichtige Rolle, um bestimmte Elemente hervorzuheben. Allerdings stellte ich fest, dass zu viele farbliche Akzente die Aufmerksamkeit streuen können. Daher habe ich entschieden, eine zweite Akzentfarbe einzuführen, um wichtige Informationen wie "Neu" oder besondere Features hervorzuheben, ohne den Benutzer zu überfordern.

Designentscheidungen im Detail

Platzierung von Überschriften und Grafiken

Ein zentrales Element ist die Platzierung von Überschriften. Ich habe verschiedene Layouts getestet, um herauszufinden, welche Anordnung am intuitivsten ist. Dabei habe ich festgestellt, dass eine klare Trennung zwischen grafischen Elementen und Textblöcken die Lesbarkeit erhöht.

Wiederverwendung von Stilelementen

Um ein konsistentes Design zu gewährleisten, habe ich bestehende Stilelemente wie Linien und Gradients aus anderen Bereichen der Website aufgegriffen. Dies schafft ein einheitliches Erscheinungsbild und erleichtert dem Nutzer die Orientierung.

Integration von Grafiken für jeden Kurs

Für den Webflow Profi Kurs wollte ich ein visuell ansprechendes Element integrieren. Da ich bereits die 3D-Box auf der Landingpage verwendet habe, entschied ich mich, diese auch auf der Übersichtsseite einzusetzen. Für die anderen Kurse habe ich überlegt, ähnliche grafische Elemente zu verwenden, um eine konsistente Darstellung zu erreichen.

Umsetzung in Webflow

Herausforderungen bei Gradients und Hintergrundelementen

Die Umsetzung von Gradients und Hintergrundelementen stellte eine besondere Herausforderung dar. In Figma lassen sich diese Effekte leicht erstellen, aber die Übertragung in Webflow erfordert manchmal kreative Lösungen. Durch das Auslagern von Gradients in separate Elemente konnte ich die gewünschte Optik erzielen und leichter über eine Komponente steuern.

Responsives Design und Skalierung

Ein wichtiger Aspekt ist die Anpassung des Designs an verschiedene Bildschirmgrößen. Durch den Einsatz von Viewport-Einheiten (VW) und prozentualen Werten konnte ich die Skalierung der Elemente flexibel gestalten. So bleibt die Darstellung der Kurse auch auf mobilen Geräten ansprechend.

Fazit

Die Erstellung der Übersichtsseite für meine Kurse war ein spannender Prozess, der sowohl kreative als auch technische Herausforderungen mit sich brachte. Durch das Ausprobieren verschiedener Ansätze und das iterative Verbessern des Designs habe ich eine Lösung gefunden, die sowohl funktional als auch ästhetisch überzeugt.

Möchtest du deine Webflow-Kenntnisse vertiefen und fortgeschrittene Techniken erlernen? In meinem neuen Onlinekurs „Webflow Profi Kurs“ zeige ich dir, wie du komplexe Projekte umsetzt, individuelle Animationen erstellst und mit Custom Code arbeitest. Dieser Kurs richtet sich an Fortgeschrittene, die ihre Fähigkeiten auf das nächste Level bringen möchten. Erfahre mehr auf meiner Landingpage und sichere dir deinen Zugang!

LinkedIn

Die Webflow Profikurs Landing Page nimmt Form an! Nachdem wir zuletzt die animierte Box direkt in Webflow umgesetzt haben, geht es heute um die Gestaltung der Übersichtsseite für meine Online-Kurse. Ich nehme dich mit durch meinen Designprozess und zeige, wie ich Entscheidungen treffe, um die Inhalte optimal zu präsentieren.

Highlights:

Designüberlegungen zur Kurspräsentation:

👉 Wie platziere ich Elemente für maximale Wirkung?

👉 Einsatz von Grafiken und Farbakzenten zur Hervorhebung.

Umsetzung in Webflow:

👉 Tipps zu Flexbox, responsive Design und Skalierung.

👉 Verwendung von Components für effizienteres Arbeiten.

Technische Einblicke:

👉 Umgang mit Gradients und Hintergründen. Ein Wow-Effekt mit minimalem Aufwand.

👉 Optimierung für mobile Ansichten.

Wenn du mehr über den kommenden Webflow Profikurs erfahren möchtest, besuche gerne die Landing Page. Der Kurs richtet sich an Fortgeschrittene und geht tief ins Detail, inklusive Custom Code. Ich freue mich darauf, dich dabei zu haben!