Loading...

Du möchtest coole Websites oder Apps erstellen, weißt aber nicht, wo du anfangen sollst?

Das ist hart, nicht wahr?

Diese ganzen Design-Tools sehen total verwirrend aus.

Und wisst ihr was? Framer muss nicht schwer sein.

Dieser Leitfaden zeigt Ihnen, wie Sie mit Framer tolle Dinge erstellen können, selbst wenn Sie ein absoluter Anfänger sind.

Wir erklären es Schritt für Schritt, damit Sie im Handumdrehen Ihre eigenen Websites und Apps gestalten können.

Einrahmer

Schließen Sie sich Tausenden beeindruckenden Bauprojekten an. Framer ist so schnell! Nutzer berichten von bis zu 50 % schnelleren Design-Workflows. Jetzt kostenlos testen!

Loading... Lesen Sie die vollständige Rezension

Framer einrichten

Als Erstes benötigen Sie Framer. Die Anmeldung ist genauso einfach wie bei jeder anderen Website.

Loading...

Gehen Sie auf die Framer-Website. Dort sehen Sie eine Schaltfläche mit der Aufschrift „Registrieren“ oder „Los geht’s“. Klicken Sie darauf.

Sie müssen Ihre E-Mail-Adresse eingeben und ein Passwort erstellen. Ganz einfach, oder? Manchmal können Sie sich sogar mit Ihrem Google-Konto anmelden.

Nach der Anmeldung erhalten Sie möglicherweise eine E-Mail zur Bestätigung Ihres Kontos. Klicken Sie einfach auf den Link in der E-Mail.

Den Arbeitsbereich verstehen:

Okay, jetzt sind Sie drin! Der Bildschirm mag auf den ersten Blick etwas unübersichtlich wirken, aber keine Sorge.

Der große, offene Bereich in der Mitte ist der Ort, an dem du deine Designs erstellen kannst. Er ist wie deine Leinwand.

An den Seiten befinden sich Werkzeuge und Bedienfelder. Diese helfen Ihnen beim Hinzufügen von Formen, Ändern von Farben und Verschieben von Elementen.

Ein neues Projekt erstellen:

Um etwas zu erstellen, benötigen Sie ein neues Projekt. Suchen Sie nach einer Schaltfläche mit der Aufschrift „Neues Projekt“ oder etwas Ähnlichem. Klicken Sie darauf.

Sie können mit einem leeren Projekt beginnen, quasi mit einem unbeschriebenen Blatt Papier. Oder Sie wählen eine Vorlage. Vorlagen sind vorgefertigte Designs, die Sie anpassen können.

Wenn Sie ein leeres Projekt wählen, können Sie Ihr eigenes Design von Grund auf erstellen. Die Verwendung einer Vorlage kann Ihnen Zeit sparen.

Grundlegende Designwerkzeuge

Jetzt kommen wir zum spaßigen Teil: dem Gestalten! Framer bietet eine Reihe von Werkzeugen, die Ihnen beim Designen helfen.

Hinzufügen von Formen und Text:

Möchten Sie ein Quadrat oder ein KreisSuchen Sie nach den Formwerkzeugen. Klicken Sie auf die gewünschte Form und ziehen Sie dann auf Ihrer Arbeitsfläche, um sie zu zeichnen.

Um Wörter hinzuzufügen, klicken Sie auf die Schaltfläche Text Klicken Sie anschließend auf die Stelle, an der die Wörter erscheinen sollen, und beginnen Sie mit der Eingabe.

Sie können die Farbe Ihrer Formen und Ihres Textes ändern. Suchen Sie einfach nach der Farbauswahl. Sie können die Elemente auch vergrößern oder verkleinern, indem Sie an den Ecken ziehen.

Arbeiten mit Bildern:

Möchten Sie ein Bild verwenden? Klicken Sie auf das Bildwerkzeug. Anschließend können Sie ein Bild von Ihrem Computer auswählen.

Sobald das Bild in Framer ist, können Sie es verschieben und vergrößern oder verkleinern. Sie können es auch zuschneiden, damit es genau passt.

Verwendung von Ebenen:

Ebenen sind wie durchsichtige Papierblätter, die übereinander gestapelt sind. Sie helfen dabei, Ordnung zu halten.

Wenn Sie eine Form oder ein Bild hinzufügen, wird dieses auf einer eigenen Ebene erstellt. Sie können Ebenen nach oben oder unten verschieben, um die darüberliegenden Elemente zu ändern.

Dies ist wichtig, denn wenn Sie ein Bild hinter einer Form haben möchten, muss die Bildebene unterhalb der Formebene liegen.

Dinge in Bewegung setzen: Animationen

Lasst uns unsere Designs zum Leben erwecken! Animationen sind es, die Dinge in Bewegung setzen und verändern.

Einfache Animationen:

Man kann Objekte einblenden, über den Bildschirm gleiten lassen oder ihre Größe ändern. Es ist wie Magie!

Suchen Sie nach den Animationseinstellungen. Dort finden Sie Optionen wie „Überblenden“, „Slide“ und „Skalieren“.

Sie können auch das Timing einstellen. Dadurch wird Framer mitgeteilt, wie schnell oder langsam die Animation ablaufen soll.

Übergänge:

Übergänge sind das, was passiert, wenn man von einem Bildschirm zum anderen wechselt. Man kann es sich wie das Umblättern von Seiten in einem Buch vorstellen.

Sie können die Bildschirme gleiten, ein- und ausblenden oder zoomen lassen.

Flüssige Übergänge lassen Ihre Website oder App wirklich professionell wirken.

Interaktionen:

Interaktionen sind Ereignisse, die stattfinden, wenn jemand etwas anklickt oder antippt.

Man kann beispielsweise einstellen, dass ein Button seine Farbe ändert, wenn man mit der Maus darüberfährt.

Oder Sie können dafür sorgen, dass ein Bild größer wird, wenn Sie darauf klicken.

Diese Elemente machen Ihre Designs interaktiv und unterhaltsam in der Anwendung.

Erstellung einer einfachen Website

Okay, lasst uns alles zusammenfügen und eine einfache Website erstellen. Es ist einfacher, als du denkst!

Planung Ihres Standorts:

Überlegen Sie sich zunächst, was Ihre Website leisten soll. Benötigen Sie eine Startseite, eine „Über uns“-Seite oder eine Kontaktseite?

Schreibe auf jede Seite, was du bauen möchtest. Das hilft dir dabei, zu wissen, was du bauen sollst.

Erstellung der Startseite:

Beginnen Sie mit einem leeren Projekt oder verwenden Sie eine Vorlage.

Fügen Sie oben eine Überschrift mit dem Namen Ihrer Website ein.

Füge in der Mitte etwas Inhalt ein, zum Beispiel Text und Bilder.

Fügen Sie unten eine Fußzeile mit Kontaktinformationen oder Links hinzu.

Nutze die Werkzeuge, die du gelernt hast, um ein gutes Ergebnis zu erzielen.

Hinzufügen weiterer Seiten:

Um eine weitere Seite zu erstellen, klicken Sie auf die Schaltfläche „Neue Seite“.

Gestalte jede Seite so, wie du es mit der Startseite gemacht hast.

Verknüpfe die Seiten miteinander durch Schaltflächen oder Links in der Kopfzeile.

Vorschau und Veröffentlichung:

Klicken Sie auf die Schaltfläche „Vorschau“, um zu sehen, wie Ihre Website aussieht.

Wenn es Ihnen gefällt, klicken Sie auf die Schaltfläche „Veröffentlichen“, um es online zu stellen.

Framer erstellt einen Link zu Ihrer Website. Jetzt kann sie jeder sehen!

Alternativen zu Framer

Hier sind einige weitere Websites Bauherren Vielleicht interessiert Sie auch Folgendes:

• Gamma: Der Fokus liegt auf der Erstellung von Präsentationen und Dokumenten, die sich wie Websites anfühlen.
• Dauerhaft: Nutzt KI, um in wenigen Minuten schnell eine Website für Ihr Unternehmen zu erstellen.
• Butternuss: Hilft Ihnen beim Erstellen von Websites mit KI, wobei der Schwerpunkt auf der Inhaltsgenerierung liegt.
• CodeDesign: Ein weiteres KI-gestütztes Tool zur Webseitenerstellung mit Schwerpunkt auf Design.
• Siter: Ermöglicht das Erstellen von Websites mit Fokus auf visuelles Design und Animationen.
• 10Web: Eine KI-gestützte Plattform zum Erstellen und Hosten von WordPress-Websites.
• Ananas-Bauer: Bietet einen blockbasierten Website-Baukasten zur einfachen Erstellung von Webseiten.
• Dorik: Bietet eine einfache Drag-and-Drop-Oberfläche zum Erstellen von Websites, insbesondere für SaaS-Unternehmen und Startups.
• Typedream: Ermöglicht das Erstellen von Webseiten, die sich wie das Schreiben von Dokumenten anfühlen – sehr unkompliziert.
• Jimdo: Ein benutzerfreundlicher Website-Baukasten mit Fokus auf Einfachheit und Benutzerfreundlichkeit.
• B12: Bietet KI-gestützten Webseitenbau mit Optionen für professionelle Dienstleistungen.
• Loading... Bekannt für seine App-Builderbietet aber auch einen Website-Baukasten an.

Abschluss

Du hast also eine Menge gelernt! Du kennst jetzt die Grundlagen der Verwendung von Framer.

Wir haben die Einrichtung Ihres Kontos, die Verwendung der Design-Tools, das Erzeugen von Bewegung durch Animationen und sogar den Aufbau einer einfachen Website behandelt.

Sie haben gesehen, wie man Formen, Text und Bilder hinzufügt.

Du hast herausgefunden, wie man mit Ebenen und Komponenten die Übersicht behält. Und du hast gelernt, wie man Elemente gleiten, ein- und ausblenden und auf Klicks reagieren lässt.

Was kommt als Nächstes? Einfach weiter mit Framer experimentieren!

Probiere verschiedene Werkzeuge aus und schau, was du damit alles kreieren kannst.

Im Internet gibt es unzählige Videos und Tutorials, falls Sie mehr erfahren möchten.

Einfach weiter üben, und schon bald wirst du fantastische Designs erstellen.

Häufig gestellte Fragen