- LANCE
- Posts
- 🤩 Die Strategie der optimierten Landingpage Teil 3 – Framer
🤩 Die Strategie der optimierten Landingpage Teil 3 – Framer
Wir gehen live
Stephan Lucka
December 08, 2023
Hallo aus dem sonnigen Italien!
Hier ist Stephan zurück mit dem großen Finale unserer Landing-Page-Trilogie bei LANCE. Heute tauchen wir in die Magie ein, ein Figma-Meisterwerk in eine live Webseite mit Framer zu verwandeln.
Schnall dich an, denn hier wird deine digitale Kunst zu einem funktionalen Meisterwerk!
Die Ausgangslage
Figma und Framer sind die Avengers des Webdesigns, die die leblosen Skizzen in interaktive Online-Erlebnisse verwandeln.
Figma, ein Sprössling aus Peter Thiels sagenumwobener Mentoringgruppe, ermöglicht es dir, mit Leichtigkeit großartige Webseitendesign zu erschaffen.
Dann kommt Framer ins Spiel und lässt deine Designs in die Onlinewelt hinaus.
Deep Dive
Es geht nicht nur um die Übertragung von Dateien, sondern um die Umsetzung deiner kreativen Vision in eine dynamische, interaktive Erfahrung. Betrachte Figma als deine Leinwand und Framer als die Bühne, auf der dein Design aufgeführt wird.
So funktioniert´s
In der letzen Ausgabe hattest du deine Figma Datei erstellt.
So verwandelst du diese statische Figma-Datei in ein dynamisches Framer-Meisterwerk.
Lass uns loslegen!
Schritt 1: Plugin installieren
Figma öffnen und dieses Plugin installieren. Figma to HTML with Framer
Hier findest du auch eine Videoanleitung: https://youtu.be/HVndoTUI1JY
Öffne Figma menu → Plugins → Figma to HTML with Framer
Mit diesem Plugin kannst du deine Figma-Screens einfach in Framer importieren.
Schritt 2: Import von Figma nach Framer
Framer öffnen: Jetzt wird es lebendig! Melde dich bei Framer an – hier passiert die Magie.
Neues Projekt erstellen: Stell dir vor, du würdest das Fundament deines digitalen Hauses legen.
Figma-Datei importieren: Verbinde Figma mit Framer und beobachte, wie dein Design von einer App zur anderen springt, bereit für Action.
Schritt 3: Interaktivität in Framer hinzufügen
Navigation einrichten: Leite deine Besucher. Schaltflächen, Menüs – es ist, als würdest du Straßen in deiner digitalen Stadt bauen.
Animationen hinzufügen: Erwecke dein Design zum Leben. Framers Animationstools sind wie Feenstaub!
Responsives Design: Stelle sicher, dass deine Website auf allen Geräten fantastisch aussieht.
Schritt 4: Vorschau und Test
Vorschau deiner Seite: Werfe einen Blick in die Zukunft. Wie sieht deine Seite in einem echten Browser aus?
Interaktivität testen: Klicke auf alles, was sich anklicken lassen soll.
Rechtssicherheit: Vergiss nicht dein Impressum, Cookiebanner und ggfs. AGBs
Schritt 5: Veröffentlichen oder Exportieren
Online veröffentlichen: Teile deine Kreation direkt aus Framer mit der ganzen Welt. 🙌
Meinen Glückwunsch, deine eigene Seite ist live! 🤩
Dein Design iterieren: Wenn sich etwas falsch anfühlt, gehe zurück zu Figma. Anpassen, abspülen, wiederholen.
Heute haben wir gelernt
LEKTION 1: Gute Websites müssen nichts kosten.
LEKTION 2: Man kann seine eigene Webseite sehr leicht selbst pflegen und bearbeiten.
LEKTION 3: Testen, anpassen und kreativ sein.
Geschafft! Die eigene Website steht.
MEINE EMPFEHLUNG
|
PS:
Ich hoffe, du hattest am Nikolaustag etwas in deinem Stiefel.
Hier in Bari liegen übrigens die Gebeine des heiligen Nikolaus und es finden mehrtägige Veranstaltungen zu seinen Ehren statt.
Anscheinend wurden die Gebeine von ein paar geschäftstüchtigen Herren gestohlen und nach Bari gebracht, seitdem liegen sie hier. Die ganze Geschichte kann man hier nachlesen: Deutschlandfunk
Fun Fact: Der hl. Nikolaus war ein Schwarzer und wird nur weiter im Norden als Weißer dargestellt.🎅🏾
Bis nächste Woche, bleib ein fantastischer Freelancer!
Stephan
Bewerte den heutigen Newsletter