Tutorials

Schritt-für-Schritt-Anleitung: So erstellst du deine Portfolio-Website mit einem Framer-Template

Melden

Ein überzeugendes Portfolio ist für Designer, Entwickler, Fotografen und andere Kreative die Eintrittskarte zu neuen Kunden oder dem nächsten Job. Framer hat sich als eines der mächtigsten No-Code-Tools etabliert, da es die Design-Freiheit von Figma mit der Funktionalität eines vollwertigen Website-Builders kombiniert.

Mit einem Template sparst du tagelange Arbeit und erhältst direkt ein responsives, modernes Grundgerüst. In dieser Anleitung erfährst du Schritt für Schritt, wie du dein persönliches Portfolio mit einem Framer-Template erstellst und veröffentlichst.

Schritt 1: Vorbereitung & Framer-Account einrichten

Bevor du ins Tool springst, spart dir eine gute Vorbereitung die meiste Zeit:

  1. Materialien sammeln: Lege dir einen Ordner mit deinen besten Projekten (Case Studies), hochauflösenden Bildern/Screenshots, deinem Lebenslauf und Texten („Über mich“) an.
  2. Account erstellen: Gehe auf framer.com und erstelle einen kostenlosen Account.

Schritt 2: Das passende Template finden

Framer bietet eine riesige Auswahl an kostenlosen und kostenpflichtigen Templates.

  1. Klicke in deinem Dashboard auf „Templates“ oder besuche den Framer-Marketplace.
  2. Filtere nach der Kategorie „Portfolio“.
  3. Tipp bei der Auswahl: Achte weniger auf die Farben und Bilder (diese änderst du sowieso), sondern auf den Aufbau und die Struktur. Brauchst du ein CMS für viele Projekte? Möchtest du ein minimalistisches One-Page-Design oder viele Unterseiten?
  4. Klicke beim Template deiner Wahl auf „Use for free“ bzw. kaufe die Vorlage. Es öffnet sich automatisch ein neues Projekt in deinem Framer-Editor.

Schritt 3: Die Framer-Oberfläche verstehen

Wenn du Tools wie Figma kennst, wirst du dich sofort zuhause fühlen:

  • Linke Leiste: Hier findest du deine Seiten (Pages), Ebenen (Layers) und das Content-Management-System (CMS).
  • Mitte (Canvas): Deine Arbeitsfläche. Meist siehst du nebeneinander die Ansichten für Desktop, Tablet und Mobile (Breakpoints).
  • Rechte Leiste: Eigenschaften (Properties). Hier passt du Abstände, Farben, Typografie, Animationen und Ausrichtungen an, sobald du ein Element anklickst.

Schritt 4: Globales Styling anpassen (Farben & Schriften)

Um das Template an dein persönliches Branding anzupassen, solltest du die globalen Stile ändern, statt jedes Element einzeln anzufassen:

  1. Klicke auf eine freie Stelle im Canvas, sodass kein Element ausgewählt ist.
  2. In der rechten Seitenleiste findest du „Color Styles“ und „Text Styles“.
  3. Ändere die Primär-, Sekundär- und Hintergrundfarben auf deine Wunschfarben. Sie passen sich projektweit automatisch an.
  4. Wähle deine Schriftarten (Fonts) aus (Framer bietet Zugriff auf Google Fonts und Fontshare oder erlaubt eigene Webfont-Uploads).

Schritt 5: Inhalte & Bilder austauschen

Jetzt machst du das Template zu deiner eigenen Website:

  • Texte bearbeiten: Mache einfach einen Doppelklick auf einen Text (z. B. die Hero-Headline), um ihn zu überschreiben.
  • Bilder austauschen: Klicke ein Bild an. In der rechten Leiste siehst du unter Image das Vorschaufenster. Klicke darauf, um dein eigenes Projektbild hochzuladen.
  • Navigation anpassen: Verlinke dein Logo zurück zur Startseite und passe die Menüpunkte (z. B. „Projekte“, „Über mich“, „Kontakt“) an.

Schritt 6: Projekte über das CMS verwalten

Die meisten Portfolio-Templates nutzen Framers integriertes CMS (Content Management System), um Case Studies darzustellen.

  1. Klicke in der linken Seitenleiste auf den Reiter CMS (oft benannt als Works, Projects oder Portfolio).
  2. Du siehst eine tabellarische Übersicht der Dummy-Projekte.
  3. Klicke auf ein Projekt, um es zu bearbeiten:
    • Ändere Titel, Datum, Projektbeschreibung und Rolle.
    • Lade deine eigenen Mockups und Prozessbilder hoch.
    • Vergib Tags (z. B. „UI/UX“, „Branding“).
  4. Lösche überflüssige Dummy-Einträge oder erstelle über „+ New Item“ neue Projekte. Die Übersichtsseite auf deiner Website aktualisiert sich automatisch.

Schritt 7: Responsivität und Animationen prüfen

Framer ist berühmt für flüssige Micro-Interactions und Responsivität.

  1. Responsivität testen: Klicke oben rechts auf das Play-Symbol (Preview). Skaliere das Fenster oder klicke im Canvas auf die Ansichten für Tablet und Smartphone.
    • Wichtig: Änderungen an Inhalten sollten immer auf dem Desktop-Breakpoint vorgenommen werden; sie vererben sich automatisch auf Mobilgeräte. Braucht das Handy ein kleineres Layout, passt du die Schriftgröße gezielt nur im Mobile-Breakpoint an.
  2. Animationen anpassen: Wenn dir Hover-Effekte oder Scroll-Animationen zu stark sind, klicke das Element an und bearbeite in der rechten Leiste den Bereich „Effects“ (z. B. Appear, Hover oder Scroll Speed).

Schritt 8: SEO, Favicon und Details einrichten

Bevor du live gehst, solltest du die Basis-Einstellungen optimieren:

  1. Gehe oben auf das Zahnrad-Symbol (Settings).
  2. General: Lade ein individuelles Favicon (das kleine Icon im Browser-Tab) hoch.
  3. SEO / Social Share:
    • Gib deiner Seite einen Titel (z. B. „Dein Name – Product Designer Portfolio“).
    • Verfasse eine kurze Meta-Beschreibung für Suchmaschinen.
    • Lade ein OG-Image (Social Share Image) hoch. Das ist das Vorschaubild, wenn du deine Website auf LinkedIn, X oder WhatsApp teilst.

Schritt 9: Veröffentlichen (Publishing)

Jetzt ist dein Portfolio bereit für die Welt:

  1. Klicke oben rechts auf den blauen Button „Publish“.
  2. Kostenlose Domain: Framer generiert dir sofort eine kostenlose Subdomain (z. B. dein-name.framer.media). Perfekt, um die Seite Freunden für schnelles Feedback zu schicken.
  3. Eigene Domain verbinden (Empfohlen):
    • Wenn du eine professionelle Domain nutzen möchtest (z. B. deinname.de), benötigst du einen kostenpflichtigen Framer-Plan (meist reicht der Mini- oder Basic-Plan).
    • Gehe in die Settings -> Domains und trage deine eigene Domain ein. Framer zeigt dir die DNS-Einträge (A-Record und CNAME) an, die du bei deinem Domain-Anbieter (wie Strato, IONOS oder Namecheap) hinterlegen musst. Die Verknüpfung dauert oft nur wenige Minuten.

Fazit

Mit einem Framer-Template sparst du den aufwendigen Prozess des Programmierens, behältst aber 100 % visuelle Kontrolle über dein Portfolio. Da die Website auf dem modernsten Web-Standard läuft, ist sie extrem schnell geladen und hinterlässt bei potenziellen Auftraggebern einen hochprofessionellen Eindruck. Sobald ein neues Projekt fertig ist, fügst du es künftig einfach über das CMS in wenigen Minuten hinzu.

0