8 Min

Wie du in 30 Minuten eine Portfolio-Website erstellst (ohne Code)

Erstelle in ca. 30 Minuten eine saubere Portfolio-Website – ganz ohne Programmieren. Folge einer einfachen Checkliste: Vorlage wählen, Arbeiten hinzufügen, Domain verbinden und veröffentlichen.

Wie du in 30 Minuten eine Portfolio-Website erstellst (ohne Code)

Was du in 30 Minuten bauen wirst

Am Ende dieses schnellen Builds hast du eine saubere One-Page-Portfolio-Website, die drei Aufgaben gut erfüllt: zeigt deine Arbeit, erklärt wer du bist und macht es einfach, dich zu kontaktieren.

Was du haben wirst, wenn du auf „Veröffentlichen“ klickst

Eine einfache Seite mit:

  • Einem oberen Abschnitt (dein Name + was du tust + ein klarer Call-to-Action)
  • Einer Projekte-Sektion mit 3–6 Arbeiten, jeweils mit kurzer Beschreibung
  • Einer Über-mich-Sektion, die in unter einer Minute lesbar ist
  • Einer Kontakt-Sektion mit den richtigen Links (E-Mail, Socials, Buchungslink oder ein Formular)

Das ist bewusst minimal. Eine One-Page-Portfolio ist schneller zu bauen, einfacher zu aktualisieren und konvertiert oft besser als eine Mehrseiten-Website, wenn jemand schnell durch deine Arbeiten scrollt.

Für wen das gedacht ist

Dieser Ansatz passt zu Freelancern, Studierenden, Kreativen und Jobsuchenden, die schnell etwas Professionelles benötigen—besonders wenn du dich auf Stellen bewirbst, Kunden pitchst oder deine Arbeit in sozialen Netzwerken teilst.

Was du bereithaben solltest, bevor du startest

Um innerhalb von 30 Minuten zu bleiben, sammle vorab:

  • 3–6 Projekte (Bilder, Links oder kurze Case-Study-Notizen)
  • 1 Headshot (oder ein einfaches Logo/Avatar)
  • Eine kurze Bio (2–4 Sätze)
  • Links, auf die Besucher klicken sollen (E-Mail, LinkedIn, Behance, GitHub, Dribbble etc.)

Der 30-Minuten-Zeitplan

  • Setup (5 Minuten): Wähle einen Builder, starte eine Seite, wähle ein Start-Design
  • Inhalte (15 Minuten): Füge Projekte hinzu, schreibe deine Headline und das Über-mich, füge Kontakt-Links hinzu
  • Feinschliff (10 Minuten): Abstände, Lesbarkeit, Mobil-Check und ein letzter Tippfehler-Check

Plane die Seite, bevor du startest

Ein 30-Minuten-Build funktioniert nur, wenn du 3–5 Minuten damit verbringst, zu entscheiden, wie "fertig" aussehen soll. Sonst verlierst du Zeit mit dem Ändern von Fonts, Umordnen von Abschnitten und dem Zweifeln, was rein soll.

1) Setze ein klares Ziel

Wähle das primäre Ergebnis für dein Portfolio:

  • Eingestellt werden (Recruiter und Hiring Manager)
  • Kunden gewinnen (Personen, die bereit sind, deine Dienstleistung zu kaufen)
  • Eine Spezialisierung zeigen (z. B. „UX für Fintech-Apps“ oder „Food-Fotografie")

Dieses Ziel bestimmt, was du zuerst hervorhebst: deine Rolle und Ergebnisse für das Hiring, dein Angebot und Prozess für Kunden oder deine Nischenarbeit für eine Spezialisierung.

2) Wähle eine einfache Struktur

Entscheide, ob du baust:

  • Einseitige Seite: am schnellsten, am besten für die meisten Kreativen und Freelancer. Besucher scrollen, verstehen dich und kontaktieren dich.
  • Mehrseitige Seite: nützlich, wenn du viele Case Studies, Texte oder mehrere Services hast.

Wenn du gegen die Uhr baust, starte jetzt mit einer Einzelseite—du kannst später Seiten aufteilen.

3) Wähle 1–2 Calls to Action (CTA)

Wähle einen primären CTA und (optional) einen sekundären CTA. Beispiele:

  • „E-Mail schreiben“
  • „Ein Gespräch buchen“
  • „Lebenslauf herunterladen“

Alles auf der Seite sollte diese Aktionen unterstützen.

4) Schreibe eine Ein-Satz-Positionierung

Bevor du eine Vorlage anfasst, entwerfe einen einfachen Satz:

Ich helfe [wem] bei [was], damit sie/er [Ergebnis] erreichen kann.

Beispiel: „Ich helfe SaaS-Startups, Onboarding-Flows zu gestalten, die Churn reduzieren und die Aktivierung verbessern.“

Halte diesen Satz sichtbar, während du baust—er ist dein Filter dafür, was du einfügst und was du weglässt.

Wähle einen Builder (worauf du achten solltest)

Dein Builder bestimmt, wie schnell sich dieses „30-Minuten“-Projekt anfühlt. Wähle etwas, das dich ohne Menükämpfe veröffentlichen lässt.

Gängige Optionen (und für wen sie passen)

  • Website-Builder (Allzweck): gut, wenn du eine einfache Mehrseiten-Seite und Wachstumsspielraum willst.
  • Portfolio-spezifische Tools: großartig für Galerien, Projekte und Case Studies—ideal für Designer, Fotografen, Illustratoren und andere visuelle Kreative.
  • Landingpage-Tools: perfekt für eine One-Page mit starkem CTA (z. B. „Ein Gespräch buchen“ oder „E-Mail schreiben").

Wenn du ein individuelleres Ergebnis willst, ohne klassischen Dev-Zyklus, ist Koder.ai eine weitere Möglichkeit: eine Plattform, bei der du dein Portfolio im Chat beschreibst und eine echte React-Web-App generierst (mit Go + PostgreSQL, falls du später Backend-Features hinzufügen willst). Du kannst Quellcode exportieren, deployen/hosten, eine Custom Domain verbinden und Snapshots/Rollbacks nutzen—praktisch, wenn du flexibel, aber trotzdem schnell sein willst.

Worauf du achten solltest (damit du keine Zeit verlierst)

Beginne mit diesen Must-haves:

  • Vorlagen, die du wirklich bearbeiten kannst: saubere Layouts, einfaches Umordnen von Sektionen und sinnvolle Typografie-Standards
  • Bildverwaltung: automatische Kompression, ansprechende Galerien und schnelle Ladezeiten ohne manuelles Skalieren
  • Mobile-Bearbeitung und Vorschau: du kannst Abstände, Schriftgrößen und Bildausschnitte für Mobil anpassen
  • Unterstützung für Custom Domains: Veröffentliche als deinname.com (nicht nur lange Subdomains)

Prüfe Limits, bevor du dich festlegst

Viele Tools wirken günstig, bis du auf eine Bezahlschranke triffst. Schau nach:

  • Seitenlimits (1 Seite vs. 5+ Seiten)
  • Speicher und Bandbreite (wichtig für bildlastige Portfolios)
  • Formulare (inklusive Kontaktformular? E-Mail-Benachrichtigung? Spam-Schutz?)
  • Analytics (Basis-Traffic-Stats oder Unterstützung für dein bevorzugtes Tracking-Tool)
  • Branding-Entfernung (kannst du das Logo/Footer des Builders entfernen?)

Wenn Preis eine Rolle spielt, vergleiche die Pläne auf /pricing und wähle den minimalen Plan, der eine Custom Domain und die oben genannten Funktionen unterstützt. Du kannst später upgraden, wenn dein Portfolio wächst.

Wähle eine Vorlage, die dich nicht ausbremst

Eine gute Vorlage sollte wie ein hilfreicher Ausgangspunkt wirken—nicht wie ein Puzzle, das du erst lösen musst, bevor du veröffentlichen kannst. Beim Ziel eines 30-Minuten-Builds ist die falsche Vorlage der schnellste Weg, Zeit zu verlieren.

Starte mit einer Portfolio- oder Personal-Template

Wähle eine Vorlage, die für das Zeigen von Arbeiten gedacht ist: eine klare Hero-Sektion, ein Grid für Projekte, ein kurzer Über-mich-Bereich und eine offensichtliche Kontakt-Sektion. Wenn du mit einer Business-Landingpage- oder Event-Vorlage startest, verbringst du Zeit damit, zu löschen und umzuordnen statt zu veröffentlichen.

Sauber statt ausgefallen

Setze Priorität auf saubere Typografie, starke Abstände und Weißraum. Aufwendige Animationen, ungewöhnliche Navigationen und „kreative“ Scroll-Effekte mögen in Demos beeindrucken—sie machen Inhalte oft aber schwerer erfassbar und schwerer zu bearbeiten.

Dein Portfolio ist das Produkt. Die Vorlage sollte sich nicht in den Vordergrund drücken.

Stelle sicher, dass sie die benötigten Sektionen unterstützt

Bevor du dich festlegst, bestätige, dass die Vorlage diese Basics ohne Hacks kann:

  • Projekte-Sektion (Grid oder Liste mit Bild, Titel und kurzer Beschreibung)
  • Kontakt-Sektion (Button, E-Mail-Link oder einfaches Formular)
  • Responsives Layout (ordnet sich auf Telefonen schön neu)

Fehlen diese, wirst du sie erzwingen müssen—und dann fangen die Builder an, frustrierend zu werden.

Preview auf Mobil, bevor du dich verliebst

Öffne die mobile Vorschau und checke drei Dinge:

  • Ist der Text ohne Zoomen lesbar?
  • Schneiden Projekt-Thumbnail-Bilder seltsam?
  • Verhält sich das Menü einfach (keine verwirrende Navigation)?

Wenn die Mobilansicht jetzt unordentlich ist, wird sie sich später nicht von selbst reparieren. Wähle eine einfachere Vorlage und mach weiter—du kannst das Design jederzeit upgraden, wenn dein Portfolio live ist.

Lege dein Branding in 5 Minuten fest

Dein Portfolio braucht keinen kompletten Brand-Guide, um professionell zu wirken. Du brauchst nur wenige konsistente Entscheidungen, damit jedes Element zusammenpasst.

1) Logo oder Wortmarke (optional) + eine Akzentfarbe

Wenn du ein Logo hast, lade es hoch und nutze es nur im Header und Footer. Wenn nicht, funktioniert eine saubere Wortmarke (dein Name in einer guten Schrift) perfekt—vor allem für Freelancer und Kreative.

Wähle eine Akzentfarbe, die du für Links, Buttons und kleine Hervorhebungen verwendest (nicht für große Textblöcke). Eine einfache Methode: nimm eine Farbe aus deinem stärksten Projektbild.

2) Wähle 1–2 Schriften (Lesbarkeit gewinnt)

Begrenze dich auf eine Schrift für Überschriften und eine für Fließtext. Viele Templates wirken „unruhig“, weil sie zu viele Schriftstile mischen.

Halte es lesbar:

  • Fließtext sollte auf den ersten Blick bequem wirken (vermeide extrem dünne oder stark stilisierte Schriften)
  • Nutze eine klare Größenhierarchie: große Überschriften, normaler Fließtext, kleinere Bildunterschriften

Wenn du unsicher bist, bleib bei den Template-Standards und ändere nur die Akzentfarbe.

3) Standardisiere Abstände, Buttons und Bild-Ecken

Konsistenz lässt eine No-Code-Portfolio-Website maßgeschneidert wirken.

Schnelle Einstellungen zum Vereinheitlichen:

  • Abstände: gleiche vertikale Abstände zwischen Sektionen (z. B. überall „Groß“)
  • Buttons: einen Stil wählen (gefüllt oder Outline) und site-wide nutzen
  • Bild-Ecken: entweder scharfe Ecken oder einen einheitlichen Radius wählen

Das wirkt wichtiger als ausgefallene Effekte und lässt Vorlagen poliert statt „template-y“ erscheinen.

4) Check Accessibility: Kontrast und Lesbarkeit

Mache einen 10-Sekunden-Scan: Kannst du Text auf jedem Hintergrund gut lesen?

  • Vermeide hellgrauen Text auf Weiß
  • Wenn du ein Foto hinter Text nutzt, füge eine subtile Overlay-Farbe hinzu oder platziere Text in einem soliden Block

Mobilfreundlichkeit zeigt Kontrastprobleme oft zuerst—preview also mobil, bevor du weitergehst.

Baue die Seitenstruktur (schnell und einfach)

Schnell live gehen
Veröffentliche über Koder.ai und iteriere weiter, ohne alles von Grund auf neu aufzubauen.

Du brauchst keine komplexe Sitemap, um eine gute No-Code-Portfolio-Website zu liefern. Eine klare Seite reicht oft—besonders, wenn dein Ziel ist, in 30 Minuten online zu gehen.

Die minimalen Sektionen, die funktionieren

Nutze einen einfachen Top-to-Bottom-Flow. Diese Sektionen decken ab, was die meisten Besucher in unter einer Minute sehen wollen:

  • Hero (oben auf der Seite)
  • Arbeit (deine Projekte)
  • Über mich (kurz, menschlich, spezifisch)
  • Testimonials (optional)
  • Kontakt (mache es mühelos)

Wenn dein Template mit Extra-Blöcken startet (Blog, Newsletter, Preise, lange Feature-Grids), lösche sie fürs Erste. Du kannst später hinzufügen.

Baue einen Hero, der funktioniert

Dein Hero ist die „Warum sollte es mich interessieren?“-Sektion. Nutze diese kurze Checkliste:

  • Wer du bist (Name + Rolle)
  • Was du tust (ein Satz)
  • Beleg (Kundennamen, Jahre Erfahrung, Auszeichnung, Nische)
  • CTA (z. B. „Meine Arbeit ansehen“ oder „Kontakt“)

Kurz und scannbar: kurze Sätze, klare Überschriften und Luft um die Inhalte.

Füge eine Navigation nur hinzu, wenn die Seite lang ist. Passt alles in ein paar Scrolls, lass die Seite das Leiten übernehmen.

Behalte konsistente Struktur bei

Nutze für jede Sektion dasselbe Muster: eine Überschrift, eine kurze Einleitungszeile, dann der Inhalt. Konsistenz lässt dein Portfolio bewusst wirken—selbst wenn es schnell gebaut wurde.

Füge Projekte hinzu, die deine Fähigkeiten klar zeigen

Deine Projekte sind der Kern des Portfolios. Ziel: 3–6 starke Stücke, die beweisen, was du kannst, statt alles, was du je gemacht hast, reinzupacken.

Wähle die richtigen 3–6 Projekte

Wähle Arbeiten aus, die zu den Jobs passen, die du als Nächstes willst. Bist du Designer, zeige Design; Fotograf, führe deine beste Serie an; Generalist, wähle eine Mischung, die trotzdem kohärent wirkt.

Ein schneller Filter: Entferne alles, das du nicht in einem kurzen Gespräch sicher erklären kannst. Wenn ein Projekt lange Rechtfertigungen braucht („Ich habe da eigentlich nicht viel gemacht"), schwächt es die Seite.

Nutze ein einfaches, wiederholbares Projektformat

Für jedes Projekt sollten die gleichen Kerndetails enthalten sein, damit Leute scannen können:

  • Das Problem: Was musste gelöst werden?
  • Deine Rolle: Wofür warst du verantwortlich (und wofür nicht)?
  • Was du geliefert hast: konkrete Outputs (Screens, Brand-Assets, Shootings, Retuschen, Copy etc.)
  • Ergebnis: Resultate, Erkenntnisse oder Impact (nur wenn du sie teilen kannst)

Kurz halten—2–5 kurze Sätze reichen meist.

Führ mit dem besten Visual

Verwende 3–6 Bilder pro Projekt oder ein kurzes Video, wenn Bewegung Teil der Arbeit ist. Setze das stärkste Bild zuerst—das wird geklickt.

Wenn möglich, füge ein „Process“-Visual hinzu (Wireframe, Skizze, Vorher/Nachher, Kontaktbogen), um Denkprozesse zu zeigen—ohne die Seite in einen Roman zu verwandeln.

Mach jedes Projekt leicht scannbar

Nutze klare Titel und Labels (z. B. „Brand Identity“, „Web-Redesign“, „Editorial Shoot"). Wenn ein Projekt einen Link hat, mache ihn offensichtlich und einfach: „Live-Seite ansehen“ oder „Final Cut ansehen" ist besser als „Hier klicken".

Schreibe ein Über-mich, das Leute wirklich lesen

Deine Über-mich-Sektion hat eine Aufgabe: jemandem helfen, schnell zu entscheiden, ob du die richtige Person für eine Kontaktaufnahme bist.

Starte mit einem einfachen Foto (oder Avatar)

Nutze einen freundlichen Headshot oder eine saubere Illustration/Avatar. Halte den Hintergrund schlicht und die Beleuchtung natürlich. Unruhige Szenen, Partyfotos und starke Filter machen das Lesen schwieriger.

Nutze eine 3-teilige Bio, die leicht zu scannen ist

Strebe 4–6 Zeilen an:

  • Gegenwärtiger Fokus: Was du jetzt tust und für wen ("Ich gestalte Landingpages für SaaS-Teams")
  • Frühere Highlights: ein oder zwei glaubwürdige Belege (Kundentyp, Ergebnis, bekanntes Projekt)
  • Was du als Nächstes suchst: die Art von Arbeit, die du suchst ("Offen für freiberufliche Produktdesign-Projekte, 2–3 Tage/Woche")

Beispiel:

Ich bin freiberuflicher UI-Designer mit Fokus auf saubere, konversionsfreundliche Landingpages für Early-Stage-SaaS. Zuvor habe ich einem Fintech-Startup geholfen, einen neuen Onboarding-Flow zu launchen und die Aktivierung um 18% zu verbessern. Ich suche 1–2 neue Kundenprojekte in diesem Monat.

Füge Glaubwürdigkeit hinzu (nur wenn es stimmt)

Nenne Tools, die du tatsächlich nutzt (Figma, Webflow, Notion), Branchen, in denen du Erfahrung hast (Health, Fintech, Education) und Auszeichnungen/Zertifikate nur, wenn sie akkurat und relevant sind.

Mach den nächsten Schritt mühelos

Falls passend, füge eine kurze Zeile mit einem klar beschrifteten PDF hinzu:

„Lebenslauf herunterladen (PDF)"

Platziere es nahe deinem Kontakt-Button, sodass jemand deine Geschichte überfliegen, Vertrauen fassen und in einem Scroll handeln kann.

Mach es einfach, dich zu kontaktieren

Behalte die volle Kontrolle
Besitze den Quellcode: Exportiere dein Projekt und setze die Entwicklung überall fort.

Eine schöne Portfolio-Seite funktioniert nur, wenn man dich schnell erreichen kann. Die Kontakt-Sektion sollte offensichtlich, kurz und reibungslos sein—kein Herumklicken, kein Rätselraten.

Biete 2–3 klare Wege zur Kontaktaufnahme an

Ziel: zwei Optionen, höchstens drei:

  • Kontaktformular (am besten für die meisten Besucher)
  • Direkter E-Mail-Link (für Leute, die lieber ihr eigenes Postfach nutzen)
  • Ein Social-Link (wähle das, das du tatsächlich checkst)

Wenn du mehr als das anbietest, zögern Leute. Halte es einfach und (wenn du eine Navigation hast) nenne sie „Kontakt".

Setze Erwartungen (und baue Vertrauen auf)

Ein Satz kann Rückfragen reduzieren und bessere Anfragen anziehen. Beispiel:

"Ich bin ab nächsten Monat für freiberufliche Branding-Projekte verfügbar. Typische Antwortzeit: innerhalb von 1–2 Werktagen."

Sag das nur, wenn es stimmt. Wenn du keine Arbeit annimmst, sag, wofür du offen bist (Zusammenarbeiten, Festanstellung, Speaking etc.).

Kalenderbuchung: nur wenn du ihn pflegen wirst

Ein Buchungslink kann für Service-basierte Arbeit großartig sein, aber füge ihn nur hinzu, wenn du ihn aktuell halten kannst und damit einverstanden bist, dass Leute ohne Erstkontakt Termine buchen. Wenn dein Kalender oft wechselt, bleib bei E-Mail + Formular.

Füge deinen Standort oder Zeitzone hinzu

Wenn du mit Kunden arbeitest, füge eine kurze Notiz wie „Basiert in Berlin (CET)" oder „Arbeitet global (UTC-5)" hinzu. Es hilft bei Terminvorschlägen und signalisiert Professionalität—besonders bei Remote-Arbeit.

Wiederhole den Kontakt-Link auch im Footer. Leute scrollen, entscheiden und klicken von dort.

Mobil, Geschwindigkeit und finale Qualitätschecks

Du kannst ein schönes Portfolio haben und trotzdem Besucher verlieren, wenn es auf dem Telefon unpraktisch ist oder ewig lädt. Verbringe ein paar Minuten hier und deine Seite wirkt poliert—ohne zusätzliche Seiten.

Mobil zuerst prüfen (dann alles andere)

Die meisten Besucher sehen dein Portfolio auf dem Handy. Öffne die mobile Vorschau des Builders und scrolle schnell von oben nach unten.

Preview auf mehreren Bildschirmgrößen (Mobil, Tablet, Desktop) und achte auf:

  • Text, der zu klein oder zu breit wird
  • Projekte, die in seltsamer Reihenfolge gestapelt werden
  • Abschnitte mit unpassenden Abständen oder Elementen am Rand
  • Buttons, die schwer zu tippen sind

Fixes sind meist einfach: Padding reduzieren, konsistente Abstände setzen oder Mehrspalten-Blöcke auf Mobil in eine Spalte umschalten.

Geschwindigkeit: streiche Schwergewichte

Schnelle Seiten wirken professioneller. Die größten Performance-Killer sind übergroße Bilder und Hintergrundmedien.

Komprimiere große Bilder (besonders Projekt-Screenshots). Als Faustregel: Portfolio-Bilder brauchen selten mehr als ~2000px Breite. Wenn dein Builder eine „optimieren“-Option hat, aktiviere sie.

Vermeide große Hintergrundvideos. Wenn du Bewegung willst, reicht oft eine leichte Schleife oder ein kleines eingebettetes Clip—deine Arbeit sollte im Fokus stehen, nicht der Header.

Klicke jeden Button und Link—sozialen Icons, Projektkarten und deinen E-Mail-/Kontakt-Button.

Stelle sicher:

  • Links gehen an die richtige Stelle (externe Links in neuem Tab öffnen)
  • Labels sind klar („Case Study ansehen" ist besser als „Hier klicken")
  • Tap-Ziele sind auf Mobil groß genug (keine winzigen Icons)

2-Minuten-Polish-Checkliste

Vor dem Veröffentlichen eine schnelle Qualitätsrunde:

  • Rechtschreibung und Interpunktion (besonders Projekt-Titel und Überschriften)
  • Konsistente Titel (gleiche Capitalization across Sections)
  • Keine leeren Abschnitte (Platzhalter oder „Lorem ipsum")
  • Saubere Ausrichtung (Karten stehen gerade; Padding wirkt absichtlich)

Wenn dein Portfolio mobilfreundlich, schnell ladend und frei von kleinen Fehlern ist, wirkt es sofort glaubwürdiger—auch wenn du es in unter 30 Minuten gebaut hast.

Veröffentlichen und eine Custom Domain verbinden

In einer Sitzung fertigstellen
Überspringe Template-Anpassungen und lass Koder.ai aus deinen Inhalten ein Portfolio‑Layout erstellen.

Eine Custom Domain macht dein Portfolio fertig und leichter teilbar in Lebensläufen, E-Mail-Signaturen und Social-Profilen. Veröffentlichen ist meist ein Button. Die Domain-Verbindung braucht ein paar Minuten mehr, ist aber meist unkompliziert.

Wähle einen Domainnamen, den du nicht bereuen wirst

Halte es einfach und professionell:

  • Nutze einfache Domains: deinname.com oder deinname.design falls verfügbar

Wenn dein exakter Name vergeben ist, versuche kleine, lesbare Varianten (Mittlerer Initial, „studio" oder deinen Beruf). Vermeide Bindestriche und lange Phrasen—Leute tippen sie falsch.

Verbinde sie im Builder

Die meisten Builder führen dich schrittweise durch die Einrichtung.

Verbinde die Domain in den Builder-Einstellungen und folge den DNS-Anweisungen genau.

Typischerweise kopierst du ein oder zwei DNS-Einträge (oft ein A-Record und/oder CNAME) in deinen Domain-Registrar (wo du die Domain gekauft hast). Prüfe Schreibweise, Punkte und ob der Eintrag die Root-Domain (deinname.com) oder „www" betrifft.

Sorge für Sicherheit und Aussehen

  • Aktiviere SSL/HTTPS, wenn das System es automatisch anbietet (die meisten tun das)
  • Füge ein Favicon und einen klaren Site-Titel für Browser-Tabs hinzu

Nach DNS-Änderungen gib dem Ganzen Zeit. Manche Domains verbinden in Minuten, andere brauchen ein paar Stunden. Sobald es aufgelöst ist, öffne die Seite unter deinname.com und www.deinname.com (falls du beides nutzt) und bestätige, dass sie ohne Sicherheitswarnungen lädt.

Setze schließlich deine bevorzugte Version (meist non-www oder www) als primäre Domain, damit du immer eine saubere URL teilst.

Basis-SEO-Einstellungen, die du in Minuten erledigen kannst

SEO klingt technisch, aber die Basics für eine No-Code-Portfolio-Seite sind meist einfache Felder und klare Formulierungen. Investiere ein paar Minuten und deine Seite ist für Menschen und Suchmaschinen verständlicher.

Setze Titel und Meta-Description

Im SEO-Bereich deines Builders findest du Felder für Seitentitel und Meta-Beschreibung (oft unter „SEO", „Seiteneinstellungen" oder „Search preview").

Halte den Seitentitel spezifisch und lesbar. Ein gutes Format ist:

Dein Name — Rolle | Portfolio

Beispiel: Jordan Lee — Product Designer | Portfolio

Für die Meta-Beschreibung schreib einen kurzen Satz, der erklärt, was du machst und was Besucher finden.

Beispiel: „Product Designer, spezialisiert auf Mobile Apps und Designsysteme. Ausgewählte Projekte, Prozess und Kontaktinfos.“

Verwende eine klare H1 und saubere Abschnittsüberschriften

Deine Homepage sollte eine klare H1 ganz oben haben—meist dein Name und deine Rolle. Das hilft Besuchern sofort zu verstehen, was du machst.

Gute H1-Beispiele:

  • „Jordan Lee — UX/UI Designer"
  • „Sam Patel — Brand Photographer"

Nutze beschreibende Überschriften für Abschnitte wie „Ausgewählte Arbeiten", „Über mich" und „Kontakt". Vermeide vage Labels wie „Willkommen" oder „Zeug". Klare Überschriften erleichtern das Scannen und die Indexierung.

Füge Alt-Text zu wichtigen Bildern hinzu

Portfolio-Seiten sind bildlastig, also füge Alt-Text dort hinzu, wo er am meisten Sinn macht: Projekt-Thumbnails, Hero-Bilder und jedes Bild, das Ergebnisse kommuniziert.

Alt-Text sollte beschreiben, was man wissen muss, nicht jedes Pixel. Beispiele:

  • „Vorher-nachher Redesign des Checkout-Screens"
  • „Logo und Verpackung für Cold-Brew-Brand"

Das verbessert Barrierefreiheit und gibt Suchmaschinen mehr Kontext.

Manche Portfolio-Builder bieten die Möglichkeit, Suchtools anzubinden oder automatisch eine Sitemap zu generieren. Wenn deiner das unterstützt, reiche die Seite dort ein.

Wenn nicht, halte dich nicht auf: veröffentliche und teile den Link dort, wo du schon Aufmerksamkeit hast—LinkedIn-Bio, Instagram-Profil und Verzeichnisse oder Communities, in denen du aktiv bist.

Launch-Checkliste und wie du sie promotest

Bevor du dein Portfolio teilst, mach einen letzten Quick-Check, dass alles funktioniert und professionell wirkt. Eine saubere, funktionierende Seite schlägt eine flashy Seite mit kaputten Links.

5-Minuten-Launch-Checkliste

  • Klicke jeden Link (Projekt-Buttons, Social-Icons, E-Mail-Link). Keine 404s.
  • Teste deine Kontaktmethode: Sende ein Formular oder klicke den E-Mail-Link und bestätige, dass du die Nachricht bekommst.
  • Durchsuche Platzhaltertexte: lorem ipsum, „Projektname", Standard-Testimonials etc.
  • Proofread Überschriften und Projekttitel: korrigiere Tippfehler, inkonsistente Groß-/Kleinschreibung und unglückliche Zeilenumbrüche.
  • Mobil prüfen: öffne auf deinem Telefon und bestätige Menü, Buttons und Bilder sind leicht zu tippen.
  • Bestätige deine Startseiten-Story: In 10 Sekunden sollte ein Besucher verstehen, was du tust und was er als Nächstes klicken soll.

Einfache Wege zur Promotion (ohne spammy zu wirken)

  • Teile auf LinkedIn und füge den Portfolio-Link deinem Profil hinzu (Featured-Sektion + Kontaktinfo).
  • Füge die Seite in deine E-Mail-Signatur und Social-Bios ein, damit sie ständig sichtbar ist.
  • Erstelle einen kurzen „Featured Project“-Post, der Problem, deine Rolle und das Ergebnis erklärt—verlinke auf die vollständige Case Study.

Verfolge, was funktioniert

Nutze einfache Analytics, um Views, Projekt-Klicks und Kontakt-Submissions zu messen. Nach einer Woche finde das Projekt mit den meisten Klicks und überarbeite Projekt-Titel, die keine Aufmerksamkeit bekommen.

FAQ

Reicht eine einseitige Portfolio-Seite wirklich aus, um eingestellt zu werden oder Kunden zu gewinnen?

Ja. Eine einseitige Portfolio-Website ist oft besser für schnelle Entscheidungen, weil sie leicht zu überfliegen ist.

Strebe einen klaren Ablauf an: Hero → Arbeit → Über mich → Kontakt. Du kannst Projekte später in separate Case-Study-Seiten aufteilen, sobald die Seite live ist.

Was sollte ich vorbereiten, bevor ich mit dem 30-Minuten-Build starte?

Halte es minimal, damit du fertig wirst:

  • 3–6 Projekte (Bilder + Links + 2–5 Sätze pro Projekt)
  • 1 Headshot oder simples Avatar
  • Eine Bio mit 2–4 Sätzen
  • 2–3 Kontaktlinks (E-Mail + ein soziales Netzwerk + optional Buchungs-/Formularlink)

Wenn du keine 3 Projekte hast, veröffentliche mit 1–2 starken Arbeiten und füge später weitere hinzu.

Wie wähle ich das richtige Ziel für mein Portfolio aus?

Wähle ein primäres Ziel und lass es deine Entscheidungen steuern:

  • Eingestellt werden: betone deine Rolle, Verantwortlichkeiten und Ergebnisse.
  • Kunden gewinnen: betone dein Angebot, deinen Prozess, Verfügbarkeit und CTA.
  • Eine Spezialisierung zeigen: betone Nischenprojekte und belege, dass du das Gebiet verstehst.

Wenn du unsicher bist, nimm nur das auf, was dieses Ziel unterstützt.

Welchen No-Code-Builder sollte ich für den schnellsten Aufbau verwenden?

Wähle den Builder, der dir Reibung nimmt:

  • Allgemeiner Website-Builder: gut, wenn du später Seiten ergänzen willst.
  • Portfolio-fokussiertes Tool: ideal für Galerien und visuelle Arbeiten.
  • Landingpage-Tool: ideal für eine einzelne Seite mit starkem CTA.

Prüfe vor der Entscheidung, ob es Paywalls für Custom Domains, Formulare, Speicher/Bandbreite, Analytics und Entfernen von Branding gibt (häufig auf /pricing aufgeführt).

Was macht eine Vorlage "gut" für einen 30-Minuten-Portfolio-Build?

Wähle eine Vorlage, die bereits die benötigten Abschnitte hat (Hero, Projekt-Grid, Über mich, Kontakt). Mache vor der Anpassung eine mobile Vorschau.

Vermeide Vorlagen mit starken Animationen, ungewöhnlicher Navigation oder komplexen Layouts—du wirst Zeit damit verlieren, die Reaktionsfähigkeit und Lesbarkeit zu reparieren.

Wie lasse ich eine schnelle Vorlage professionell aussehen, ohne sie neu zu gestalten?

Begrenze dein „Branding“ auf ein paar konsistente Entscheidungen:

  • Eine Akzentfarbe für Buttons/Links
  • Eine Überschriften-Schrift + eine Fließtext-Schrift (oder die Template-Defaults)
  • Konsistente Abstände zwischen Abschnitten
  • Einen Button-Stil (gefüllt oder Outline)
  • Einen Bild-Ecken-Stil (eckig oder ein einheitlicher Radius)

Konsistenz wirkt „maßgeschneidert“, auch wenn du eine Vorlage nutzt.

Wie schreibe ich Projektbeschreibungen, damit sie leicht zu scannen sind?

Verwende ein wiederholbares Format, damit Menschen leicht überfliegen können:

  • Problem: Was musste gelöst werden?
  • Deine Rolle: Was hast du übernommen (und was nicht)?
  • Deliverables: Was hast du geliefert?
  • Ergebnis: Resultat/Impact, wenn du es teilen kannst

Kurz und knapp (2–5 kurze Sätze) und führe mit dem stärksten Bild als erstes.

Was sollte ich in meiner "Über mich"-Sektion aufnehmen (und was nicht)?

Nutze eine einfache Struktur, die die Frage „Soll ich dich kontaktieren?“ schnell beantwortet:

  • Was du jetzt tust + für wen
  • 1–2 Glaubwürdigkeits-Punkte (Kunden, Branchen, Ergebnisse, Tools, die du wirklich nutzt)
  • Was du als Nächstes willst (Rollen, Projekttypen, Verfügbarkeit)

Kurz genug, um in unter einer Minute gelesen zu werden, und platziere einen klaren nächsten Schritt in der Nähe (E-Mail/Kontakt-Button, optional „Lebenslauf herunterladen (PDF)“).

Was ist das beste Kontakt-Setup für eine Portfolio-Seite?

Biete 2 Optionen an (maximal 3):

  • Kontaktformular
  • Direkter E-Mail-Link
  • Ein soziales Netzwerk, das du tatsächlich überprüfst

Füge eine kurze Erwartungszeile hinzu (Antwortzeit, Verfügbarkeit) und gib deine Location/Zeitzone an, wenn du remote arbeitest. Wiederhole den Kontaktlink im Footer, damit er nach dem Scrollen leicht erreichbar ist.

Was sind die wichtigsten finalen Prüfungen vor dem Veröffentlichen und Teilen?

Führe diese schnellen Checks durch:

  • Mobil: lesbarer Text, angenehme Abstände, gut tappbare Buttons
  • Geschwindigkeit: Bilder komprimieren (oft reichen ~2000px Breite)
  • Vertrauen: klicke jeden Link; entferne Platzhalter ("Lorem ipsum")
  • Domain: DNS sorgfältig verbinden (A/CNAME), HTTPS aktivieren, bevorzugte Domain festlegen

Nach der Veröffentlichung: teile den Link auf LinkedIn, in deiner E-Mail-Signatur und in Social-Bios, beobachte, welche Projekte Klicks bekommen, und passe die Startseite entsprechend an.

Related posts