Warum eine digitale Portfolio-Seite — und warum kostenlos?

Ich erinnere mich noch gut an den Moment, als ich beschlossen habe, meine kreativen Projekte aus dem Durcheinander von Instagram-Stories, PDF-Dateien und Dropbox-Ordnern zu befreien: Ich wollte einen ruhigen Ort, an dem man meine Arbeit in Ruhe anschauen kann — klar strukturiert, mit Kontext und ohne Algorithmus dazwischen. Ein Portfolio muss nicht teuer sein. Mit ein paar kostenlosen Tools kannst du eine professionelle, persönliche Seite bauen, die deine Projekte richtig zur Geltung bringt.

Mein Ansatz: einfach, persönlich, sichtbar

Meine Devise ist: Erstmal sichtbar werden, dann verfeinern. Ich habe immer mit dem gemacht, was schnell ging und wenig Geld kostete — oft gratis Tools, die mir genug Flexibilität gaben. Wichtig ist: gute Fotos / Screenshots, klare Texte, eine einfache Navigation und eine Kontaktmöglichkeit. Der technische Unterbau kann später wachsen.

Welche kostenlosen Tools ich empfehle

Je nach Komfortlevel und Wunsch nach Kontrolle können verschiedene Tools sinnvoll sein. Ich liste hier die, die ich selbst ausprobiert oder von Kolleg*innen empfohlen bekommen habe:

  • GitHub Pages + Jekyll oder einfache HTML: ideal, wenn du Code liebst und volle Kontrolle willst. Kostenloses Hosting, Custom Domain möglich.
  • Netlify: einfache Deployment-Pipeline, ideal für statische Seiten (auch mit Hugo/Eleventy). Kostenloser Plan sehr brauchbar.
  • Carrd: extrem einfach für One-Page-Portfolios; kostenloser Basisplan, sehr schnell einzurichten.
  • WordPress.com (Free): praktisch, wenn du öfter bloggen willst; Themes und Plugins sind bei Free eingeschränkt.
  • Neocities: retro-Hosting für statische Seiten, sehr simpel und kostenlos.
  • Canva oder Figma: zum Layouten von Mockups, Social-Graphics und Kompositionen; exports als PNG/SVG.
  • TinyPNG oder ImageOptim: Bildkompression, damit deine Seite schnell lädt.
  • Formspree oder Netlify Forms: kostenlose Kontaktformulare ohne Server.

Erste Schritte: Struktur planen

Bevor du ins Basteln gehst, habe ich mir eine halbe Stunde Zeit genommen, um die Struktur zu skizzieren. Das spart später enorm viel Arbeit. Für mein Portfolio hat sich dieses Grundgerüst bewährt:

  • Startseite mit kurzem Profil (ein Satz, Foto), Highlight-Projekten
  • Projektseiten: Bilder, kurze Beschreibung, Tools/Techniken, Rolle, evtl. Prozessbilder
  • Über mich / Bio: was ich mache, Kontakt, Social Links
  • Kontaktseite oder eingebettetes Formular
  • Optional: Blog oder News

Wichtig: Jedes Projekt braucht ein klares Lead-Bild (Thumbnail) und eine kurze, prägnante Beschreibung — die wichtigsten Infos oben.

Design-Tipps — ohne Designer zu sein

Bei der Gestaltung folge ich wenigen Regeln:

  • Weißraum ist dein Freund. Lass Bilder atmen.
  • Beschränke dich auf maximal zwei Schriftarten (z. B. Google Fonts: Inter + Merriweather).
  • Farben: wähle 2–3 Farben. Ein neutraler Hintergrund, eine Akzentfarbe für Links/Buttons, evtl. eine weitere für Highlights.
  • Mobile First: viele Besucher schauen mobil — teste auf dem Smartphone.

Mit Canva oder Figma kannst du schnell ein Theme-Mockup bauen. Ich mache oft eine Startseite in Canva, exportiere die Bilder und baue dann die Seite statisch oder in einem Site-Builder nach.

Technische Umsetzung: drei einfache Wege

Je nach Komfort mit Technik habe ich drei Workflows, die sich bewährt haben:

1) Very simple: Carrd oder Google Sites

Wenn du in ein paar Stunden live sein willst, ist Carrd super. Du ziehst Module, füllst Texte, lädst Bilder hoch, verlinkst zu PDF/Behance. Bei Google Sites ist es ähnlich — besser, wenn du G Suite nutzt.

2) Flexible & kostenlos: GitHub Pages + einfache HTML/CSS oder Jekyll

Für etwas mehr Kontrolle: Erstelle ein Repository namens username.github.io, lege ein einfaches HTML-Template an oder nutze ein kostenloses Jekyll-Theme. Vorteile: Custom Domain möglich, schneller Host, komplett kostenlos. Nachteil: kleine Lernkurve.

3) Designerfreundlich: Figma/Canva + Netlify

Ich designe oft die Seiten in Figma, exportiere Assets optimiert (SVG für Logos, WebP/PNG für Bilder) und hoste die statischen Dateien auf Netlify. Netlify bietet Continuous Deployment, sodass ein Push zu GitHub die Seite automatisch aktualisiert.

Praxis: Bilder und Inhalte vorbereiten

Fotos sind die Visitenkarte deiner Arbeit. Achte auf:

  • Hohe Qualität: scharfe, gut belichtete Bilder
  • Varianten: großes Hero-Bild + 3–6 Detailbilder
  • Komprimieren: TinyPNG/WebP reduzieren Ladezeiten
  • Alt-Texte: für Accessibility und SEO

Ich beschrifte Bilder mit Namen wie projectname-01.jpg — das hilft beim späteren Organisieren.

SEO und Auffindbarkeit

Auch mit einer kostenlosen Seite kannst du gefunden werden. Meine Checkliste:

  • Unique Title und Meta Description pro Seite
  • saubere URLs (z. B. /projekte/logo-redesign)
  • alt-Texte für Bilder
  • öffentliche Verlinkungen: teile die Seite auf LinkedIn, Behance oder in deiner E-Mail-Signatur

Kontakt und rechtliche Basics

Ein Portfolio ohne Kontaktformular ist verschenktes Potential. Für einfache Formulare nutze ich Formspree (kostenlose Basis) oder Netlify Forms. Vergiss nicht:

  • Impressum (in Deutschland Pflicht) — minimal mit Name/Adresse
  • Datenschutzhinweis: erkläre, ob du Analytics oder Formulare nutzt

Vergleich: kurze Übersicht der Tools

Tool Vorteile Nachteile
Carrd Schnell, intuitiv, gut für One-Pager Begrenzte Flexibilität im Free-Plan
GitHub Pages Vollständig kostenlos, Custom Domain, statisch etwas technische Einarbeitung nötig
Netlify Automatisches Deployment, Forms, CDN Komplexere Setups brauchen Build-Tools
WordPress.com Blog-Funktionen, viele Themes Free-Plan zeigt Werbung, eingeschränkte Themes

Feinschliff: wie ich Projekte präsentiere

Bei jedem Projekt erzähle ich kurz eine kleine Geschichte: das Ziel, meine Rolle, ein Hindernis und ein Ergebnis. Menschen lieben Geschichten mehr als reine Fakten. Ein Satz, der neugierig macht, ein Bild und ein „Was ich gelernt habe“ reichen oft.

Was ich gelernt habe

Das Wichtigste: Perfektion ist überbewertet. Schicke, einfache Seiten, die deine Arbeit ehrlich zeigen, wirken meist professioneller als überladene Experimente. Starte mit dem Besten, das du hast, optimiere nach Nutzerfeedback und erlaube dir, die Seite zu verändern — das ist Teil des kreativen Prozesses.