In meinem ersten YouTube-Tutorial zeige ich dir, wie du mit Framer eine moderne, saubere und erweiterbare Landingpage von Grund auf aufbaust. Ziel des Videos und dieses Artikels ist es, dir nicht nur eine fertige Seite zu zeigen, sondern dir die Denkweise, Struktur und Werkzeuge mitzugeben, mit denen du dein Projekt später eigenständig weiterentwickeln kannst, zum Beispiel zu einer vollständigen Multipage-Website.
Alle Ressourcen die zu brauchst um das Projekt nachzubauen:
Saubere Seitenstruktur als Fundament
Zu Beginn legen wir den Fokus auf die grundlegende Struktur der Seite. Du lernst, wie eine Framer-Seite sinnvoll aufgebaut ist, welche Rolle Container, Stacks und Sections spielen und warum eine klare Hierarchie entscheidend ist, um später responsive Anpassungen und Erweiterungen einfach umzusetzen.
Wir besprechen außerdem, wie man von Anfang an mit einer Max-Width arbeitet, damit Inhalte auf großen Screens nicht unkontrolliert auseinanderlaufen und das Layout jederzeit sauber bleibt.
Navigation und Footer richtig aufbauen
Im nächsten Schritt erstellen wir eine Navigationsleiste und einen Footer. Dabei geht es nicht nur um das visuelle Design, sondern auch um Wiederverwendbarkeit und Struktur. Ich zeige dir, wie du diese Elemente so anlegst, dass sie später problemlos auf weitere Seiten übernommen werden können, ein wichtiger Schritt, wenn du aus einer Landingpage eine komplette Website machen möchtest.
Zusätzlich passen wir Navigation und Footer so an, dass sie auf Desktop, Tablet und Mobile zuverlässig funktionieren.
Hero Section von Grund auf gestalten
Ein zentraler Teil des Tutorials ist der Aufbau einer Hero-Sektion. Gemeinsam erstellen wir eine moderne Hero mit:
einer klaren H1-Überschrift
einem erklärenden Subtitle
einem kleinen Tag oder Label
mehreren Buttons mit unterschiedlichen Varianten
einem passenden Bild
Dabei lernst du, wie du Inhalte sinnvoll gruppierst, Abstände kontrollierst und Buttons als Components anlegst, um sie später flexibel wiederzuverwenden oder zu erweitern.
Logo-Ticker und visuelle Dynamik
Um der Seite mehr Leben zu geben, bauen wir anschließend einen Logo-Ticker, bei dem Logos langsam horizontal durchlaufen. Dieser Abschnitt eignet sich perfekt, um Kundenlogos, Partner oder Referenzen zu zeigen und bringt gleichzeitig Bewegung in die Seite, ohne aufdringlich zu wirken.
Du lernst hier, wie solche Animationen aufgebaut sind und wie du sie sauber in dein bestehendes Layout integrierst.
Content-Sektion mit relativer und absoluter Positionierung
In einer weiteren Content-Sektion arbeiten wir bewusst mit relativer und absoluter Positionierung. Wir platzieren ein Bild relativ im Layout und ein weiteres Bild absolut darüber, um mehr Tiefe und visuelle Spannung zu erzeugen.
Zusätzlich setzen wir hier erneut Buttons ein und erweitern unser Button-System auf insgesamt drei verschiedene Button-Varianten, die als Components angelegt sind. So entsteht ein konsistentes Design-System, das du später problemlos erweitern kannst.
Kleine Effekte und Feinschliff
Zum Abschluss fügen wir dezente Effekte hinzu, die das Design abrunden, ohne es zu überladen. Hover-Zustände, kleine Animationen und saubere Übergänge sorgen dafür, dass sich die Seite hochwertig und modern anfühlt.
Danach prüfen wir die gesamte Seite noch einmal auf Responsiveness und passen Abstände, Schriftgrößen und Layouts so an, dass die Landingpage auf allen Geräten funktioniert.
Fazit: Die Basis für mehr als nur eine Landingpage
Dieses Tutorial zeigt dir nicht nur, wie du eine einzelne Landingpage baust, sondern gibt dir das Fundament, um darauf aufzubauen. Mit der gezeigten Struktur kannst du problemlos weitere Seiten hinzufügen, dein Projekt skalieren und Framer gezielt für echte Webprojekte einsetzen.
Wenn du das Projekt selbst weiter erkunden möchtest, kannst du es direkt remixen und in deinem eigenen Framer-Workspace anpassen.