Lerne, wie du ohne zu programmieren eine professionelle Portfolio-Website erstellst — von der Wahl des No‑Code-Builders über Templates, Inhalte, SEO bis zur Veröffentlichung.
Eine Portfolio-Website ist ein einfacher, professioneller Ort für deine Arbeit — ein Link, den du überall teilen kannst. Gut gemacht erfüllt sie drei Aufgaben gleichzeitig: sie schafft Vertrauen, zeigt echte Belege und macht es leicht, dich zu kontaktieren.
Glaubwürdigkeit: Wenn jemand deinen Namen sucht oder auf deinen Link klickt, sollte er sofort eine saubere, konsistente Präsentation sehen, die „echt“ wirkt. Eine persönliche Website signalisiert, dass du deine Arbeit ernst nimmst.
Anfragen (Chancen): Deine Seite sollte Besucher zu einem klaren nächsten Schritt führen — dir eine E-Mail zu schicken, einen Call zu buchen, ein Angebot anzufragen oder den Lebenslauf herunterzuladen. Wenn Leute deine Arbeit mögen, aber nicht wissen, wie sie dich erreichen, erfüllt die Seite ihre Aufgabe nicht.
Arbeitsnachweis: Social Feeds und Marktplätze sind nützlich, zeigen aber nicht immer deine beste Arbeit im Kontext. Dein Online-Portfolio erlaubt es dir, Ziel, Rolle und Ergebnis zu erklären — so verstehen Besucher, was du tatsächlich leisten kannst.
Dieser Schritt-für-Schritt-Ansatz richtet sich an Menschen, die eine No‑Code-Portfolio-Website schnell veröffentlichen wollen:
Wenn du ziehen, ablegen und Text bearbeiten kannst, kannst du einen Portfolio-Website-Builder oder ein Drag-and-Drop-Tool nutzen, um das zu erledigen.
Hinweis: Wenn du etwas flexibleres willst als klassisches No‑Code (aber immer noch nicht manuell coden möchtest), kann eine „Chat-to-app“-Plattform wie Koder.ai eine starke Option sein. Du beschreibst per Chat, was du willst, und sie erzeugt eine echte Web-App, die du veröffentlichen kannst — nützlich, wenn dein Portfolio custom Seiten, Formulare oder interaktive Bereiche jenseits typischer Templates braucht.
Bis du alle Abschnitte durcharbeitest, wirst du haben:
Die meisten Menschen können eine erste Version in einem Wochenende (oder ein paar fokussierten Abenden) veröffentlichen, wenn die Inhalte bereit sind.
Das Budget hängt von deiner Wahl ab:
yourname.com). Manche Builder bündeln Domain und Hosting in ihren Plänen, was die Einrichtung vereinfacht.Das Ziel ist nicht Perfektion — es geht darum, eine saubere, klare Seite zu veröffentlichen, die du später verbessern kannst.
Bevor du einen Portfolio-Website-Builder öffnest oder Templates durchstöberst, kläre zwei Dinge: Was soll die Seite für dich tun und wen musst du in den ersten 30 Sekunden überzeugen.
Eine No‑Code-Portfolio-Website lässt sich am einfachsten bauen, wenn jede Entscheidung (Layout, Projekte, Texte, Buttons) durch einen einfachen Filter geht: „Hilft das meinem idealen Besucher, den nächsten Schritt zu machen?“
Entscheide dich für das wichtigste Ergebnis gerade jetzt:
Sekundäre Ziele sind ok, aber gib einem Ziel Priorität, damit die Startseite nicht wie ein Menü ungeordneter Optionen wirkt.
Deine Zielgruppe kann ein Recruiter, Hiring Manager, potenzieller Kunde oder ein Kooperationspartner sein. Jede Gruppe sucht nach anderen Beweisen.
Frage dich:
„Für alles offen“ zu sein, macht deine persönliche Website vergesslich. Wähle eine Zielrolle (z. B. „Junior UX Designer“) oder eine Kernleistung (z. B. „Brand Identity für Startups“) und optional eine zweite, eng verwandte Option.
Deine Drag-and-Drop-Website sollte Besucher zu einem klaren nächsten Schritt leiten:
Platziere diese CTA in der Kopfzeile und wiederhole sie gegen Ende der Startseite (z. B. verlinkt zu /contact).
Bevor du ein Template anfasst, entscheide, was deine Seite tun muss: jemandem schnell zeigen, wer du bist, was du kannst und wie man dich kontaktiert. Eine einfache Struktur macht jeden No‑Code-Builder leichter bedienbar und verhindert, dass Besucher mobil verloren gehen.
Die meisten Portfolio-Sites funktionieren am besten mit einem kleinen Kern, der in eine Top-Navigation passt:
Wenn du unsicher bist, beginne mit diesen vier Seiten. Du kannst jederzeit mehr hinzufügen, ohne alles neu zu bauen.
Optionale Seiten helfen nur, wenn sie Entscheidungen für Besucher leichter machen:
Verwende Labels, die Besucher erwarten: „Work“ oder „Projects“, nicht kreative Namen. Platziere den wichtigsten Link früh (oft Work) und den Conversion-Link zuletzt (Contact). Ein gängige Reihenfolge:
Home → Projects → About → Contact
Auf Handys wird dein Menü zu einem kleinen Icon, also beschränke Top-Level-Items auf 4–6. Wenn du mehr Inhalte hast, gruppiere sie unter einem Punkt (z. B. „Mehr“ oder „Ressourcen“) oder verlinke sie aus dem Footer.
Bevor du Farben oder Templates auswählst, entscheide dich für das Tool. Der „beste" Builder ist der, den du tatsächlich aktualisieren wirst — also priorisiere Einfachheit und Passung, nicht Features, die du nie nutzt.
Website-Builder (am flexibelsten): Wix, Squarespace, Webflow, Framer, WordPress.com. Vollwertige Websites mit Seiten, Menüs und Publishing.
Portfolio-Plattformen (am schnellsten): Behance, Dribbble, Adobe Portfolio. Gut, wenn du Arbeit schnell posten und von Communities profitieren willst, aber mit weniger Struktur- und Branding-Kontrolle.
All-in-one / Minimalistische Tools (gut für einfache Portfolios): Notion-basierte Sites, Carrd oder One-Page-Builder. Perfekt für eine schlanke Präsenz, besonders am Anfang.
Chat-to-app Builder (schnell, individueller als Templates): Wenn dein Portfolio sich eher wie eine kleine Web-App verhalten soll (custom Formulare, dynamische Projektseiten, geschützte Case Studies oder einzigartige Layouts), erwäge eine Chat-getriebene Plattform wie Koder.ai. Du beschreibst, was du willst, iterierst im Gespräch und veröffentlichst — ohne bei Null in einem visuellen Editor zu starten.
Achte auf diese Basics (wichtigere als ausgefallene Animationen):
Gratispläne sind nützlich zum Testen, bringen aber oft mit sich:
Wenn du dich bewirbst oder Kunden pitchst, ist ein bezahlter Plan mit eigener Domain meist sinnvoll.
Wähle 2–3 Tools, erstelle in jedem eine schnelle Entwurfs-Startseite und entscheide dann basierend auf deinem Ziel:
Wenn du dich entschieden hast, bleib dabei — Tool-Wechsel während des Baus verlangsamt dich am meisten.
Ein Template ist dein Shortcut zu einem bewusst wirkenden Portfolio von Anfang an. Ziel ist nicht „das perfekte Design“ zu finden, sondern ein Layout, das dem entspricht, wie Leute in deinem Bereich Arbeit erwarten — und es dann so anzupassen, dass es nach dir aussieht.
Die meisten Builder filtern Templates nach Use Case. Das spart Zeit, weil Sektionen und Seiten bereits auf deine Bedürfnisse abgestimmt sind.
Öffne die Template-Vorschau und bewerte sie wie ein Besucher:
Achte auf:
Wenn möglich, sieh dir die Vorschau auf dem Handy an (oder ziehe das Browserfenster schmal), bevor du wählst.
Einige Templates wurden gebaut, um Effekte zu zeigen, nicht deine Arbeit.
Vermeide Templates mit überladenen Animationen, versteckter Navigation, Autoplay-Video oder hellgrauem Text auf weißem Hintergrund. Wenn Besucher erst „herausfinden“ müssen, wie man die Seite liest, gehen sie meist weiter — besonders mobil.
Bevor du Zeit ins Befüllen steckst, prüfe, ob du die Elemente schnell anpassen kannst, die deine persönliche Marke ausmachen:
Eine gute Faustregel: Wenn du das Template nicht in 15–20 Minuten nach deinem Stil (Farben, Schriften, Abstände, ein paar Sections tauschen) anpassen kannst, wähle ein einfacheres Template. Dein Portfolio soll deine Projekte hervorheben — nicht das Template.
Bevor du den Builder öffnest, sammle, was wirklich auf die Seite soll. Das spart später Stunden, weil du nicht alle paar Minuten nach einem Foto, einer Bio oder einem Screenshot suchen musst.
Deine Headline ist das Erste, was Leute lesen — mach sie sofort verständlich. Eine Satzformulierung, die was du machst und wem du hilfst kombiniert, reicht.
Beispiele zum Anpassen:
Wenn du vielseitig bist, liste nicht alles auf. Wähle den Service, den du jetzt öfter willst.
Lege einen Ordner mit Unterordnern an, sodass der Aufbau eher Assemblieren als Suchen ist.
Was du zusammentragen solltest:
Tipp: Exportiere Bilder in webfreundlichen Formaten (JPG/PNG; WebP, wenn dein Tool es unterstützt) und gib beschreibende Dateinamen (z. B. brand-redesign-homepage.jpg).
Eine kleine Auswahl starker Projekte überzeugt mehr als eine lange Liste „okay“er Projekte. Für jedes Projekt schreibe 3–5 Bullet-Punkte in klarem Deutsch:
Wenn du Anfänger bist, nutze:
Du brauchst keinen vollständigen Brand-Guide. Konsistenz reicht.
Sind die Inhalte fertig, wird der No‑Code-Bau größtenteils Drag-and-Drop — denn die echte Arbeit (Klarheit) ist schon erledigt.
Deine Startseite hat eine Aufgabe: innerhalb weniger Sekunden zeigen, wer du bist, was du tust und was der nächste Schritt ist. Wenn Besucher dich „herausfinden“ müssen, verschwinden sie meist.
Starte mit einer kurzen Intro, die Rolle + Spezialität + Outcome kombiniert. Ziel: ein Satz, den ein Kunde oder Hiring Manager suchen würde.
Beispiel:
„Product Designer mit Fokus auf B2B SaaS — ich helfe Teams, klarere Workflows zu liefern und die Aktivierung zu steigern.“
Füge eine zweite Zeile hinzu, die das unterstützt (deine Nische, Tools oder typische Projekte). Halte es knapp.
Mach es Besuchern nicht schwer, deine Arbeit zu finden. Platziere einen kleinen Bereich „Featured Projects“ direkt auf der Startseite.
Halte jede Projektkarte scannbar:
Bist du am Anfang, präsentiere persönliche Projekte, freiwillige Arbeit, Redesign-Konzepte oder Klassenprojekte — Klarheit und Präsentation zählen mehr als ein großes Logo.
Wähle einen Haupt-Button und wiederhole ihn 1–2 Mal (oben und gegen Ende): Kontakt oder Call buchen. Verlinke ihn zu /contact.
Vermeide konkurrierende Buttons wie „CV herunterladen“, „E-Mail“, „Folgen“ und „Buchen“ gleichzeitig — wähle eine primäre Aktion und mache alles andere sekundär.
Nutze kurze Sektionen, klare Überschriften und Weißraum. Eine einfache Homepage-Struktur reicht oft:
Intro → Featured Projects → Kurzes About → Testimonials/Kunden (optional) → CTA
Projektseiten sind der Ort, an dem dein Portfolio Vertrauen verdient. Ein simples, wiederholbares Format hilft Besuchern zu verstehen, was du getan hast — ohne sie zu überfordern.
Erstelle eine Projektseiten-Vorlage in deinem Builder und dupliziere sie für jedes neue Projekt. Strebe diesen Ablauf an:
Anfänger denken oft, sie hätten „nicht genug“ zu zeigen. Prozess füllt diese Lücke und signalisiert echte Fähigkeiten. Zeige schnelle Einblicke in dein Denken — Skizzen, Entwürfe, Schlüsselentscheidungen oder Vorher/Nachher-Vergleiche.
Regel: Wenn jemand fragt „Wie bist du von Idee zum Ergebnis gekommen?", sollte deine Seite die Antwort liefern.
Ein paar Sätze Kontext können ein kleines Projekt groß wirken lassen:
Bei Kunden- oder Firmenprojekten schreibe eine „gesäuberte" Case Study: erkläre Ziel, deine Verantwortung, deinen Ansatz und die Wirkung in allgemeinen Begriffen. Du kannst sensible Visuals durch vereinfachte Versionen (Wireframes, redigierte Screenshots oder nachgestellte Beispiele) ersetzen und vermerken, was entfernt wurde.
Beende jedes Projekt mit einer kleinen CTA: „Möchtest du so etwas? Kontaktiere mich über /contact."
Auf der About-Seite entscheidet ein Besucher, ob du „die richtige Person" bist. Halte sie warm, konkret und einfach zu überfliegen — besonders mobil.
Schreibe einen kurzen Absatz, der beantwortet: was du tust, wem du hilfst und welche Ergebnisse du anstrebst. Füge ein Detail hinzu, das dich erinnerungswürdig macht (Nische, Methode oder Wert).
Beispielstruktur: „Ich bin [Rolle], die [Zielgruppe] bei [Art der Arbeit] unterstützt. Ich spezialisiere mich auf [Fokus]. Kürzlich habe ich an [Art von Projekten/Ergebnissen] gearbeitet. Ich bin ansässig in [Ort/Zeitzone] und verfügbar für [Festanstellung/Freelance/Kooperationen]."
Wähle 3–6 Glaubwürdigkeits-Signale, die für deine Arbeit relevant sind:
Bist du am Anfang, nutze vorhandene Nachweise: Kursarbeiten, freiwillige Projekte, Praktika oder einen klar beschriebenen Prozess.
Eine kurze Service-Liste reduziert unnötige Rückfragen. Halte es konkret und nenne typischerweise enthaltene Leistungen (und was nicht).
Biete mehrere Kontaktmöglichkeiten und setze Erwartungen:
Füge eine Zeile hinzu wie: „Ich antworte innerhalb von 1–2 Werktagen“ plus wofür du offen bist („Freelance, Festanstellungen, Kooperationen"). Dieses kleine Detail schafft Vertrauen und spart beiden Seiten Zeit.
Du musst kein SEO-Profi sein, um deine Portfolio-Seite auffindbar zu machen. Ein paar Einstellungen helfen Suchmaschinen und echten Menschen.
Jede Seite sollte einen eigenen Seitentitel und eine Meta-Beschreibung haben. Denk an den Titel wie an die Headline in Google und an die Meta-Beschreibung als kurzen Pitch.
Wenn dein Builder SEO-Einstellungen pro Seite anbietet, ist dort der richtige Ort.
Nutze Überschriften, um eine klare Struktur zu schaffen:
Halte URLs lesbar und konsistent, z. B.:
/ (Home)/about/work/project-name/contactVermeide unlesbare, automatisch generierte Slugs wie /page123.
Portfolios sind bildlastig — sorge für schnelle Ladezeiten:
Alt-Text hilft Screenreadern und macht deine Arbeit für Suchmaschinen klarer.
Füge in jeden Footer:
Das verbessert die Usability und macht es Kunden leichter, dich von jeder Seite aus zu erreichen.
Eine eigene Domain (z. B. yourname.com) macht dein Portfolio professioneller und leichter zu teilen (Lebenslauf, LinkedIn, Signatur). Ziel: einen leicht eingabbaren Namen wählen, ihn mit dem Builder verbinden und nach einer kurzen Qualitätskontrolle veröffentlichen.
Prüfe den „laut aussprechen"-Test: Kann jemand, der den Namen einmal hört, ihn korrekt buchstabieren?
Gute Optionen:
vornamefamilienname.com (am üblichsten)familienname.design / familienname.dev / familienname.photo (falls passend)vornamecreates.com (falls dein Name vergeben ist)Vermeide Bindestriche, doppelte Buchstaben, die Tippfehler verursachen, und zu clevere Wortspiele.
Wenn du eine Domain kaufst, liegt sie beim Registrar. Deine Portfolio-Seite liegt beim Builder (Squarespace, Wix, Webflow, Framer, Carrd usw.). DNS sind die „Wegweiser", die dem Internet sagen, wohin Besucher gesendet werden. Praktisch fügst du ein paar Records vom Builder im Registrar ein:
www auf deine SeiteDie meisten Builder zeigen Schritt-für-Schritt-Anweisungen und bestätigen, wenn alles verbunden ist. Änderungen brauchen Minuten bis ein paar Stunden, bis sie weltweit wirksam sind.
Wenn du mit einer Plattform baust, die Hosting und Deployment beinhaltet (z. B. Koder.ai unterstützt Deployment/Hosting und Custom Domains), kann das Veröffentlichen noch einfacher sein — besonders, wenn du die Option willst, später Quellcode zu exportieren.
Vor dem Publish prüfe:
Mach einen finalen Sweep auf:
Wenn das alles passt, veröffentliche — und teile deine Domain überall, wo Menschen dich finden sollen.
Veröffentlichen ist nicht das Ende — es ist der Moment, ab dem die Seite für dich arbeitet. Kleine Pflege hält sie aktuell, benutzerfreundlich und auf die Ergebnisse fokussiert, die du möchtest (Anfragen, Calls, Bewerbungen).
Die meisten No‑Code-Builder bieten eingebaute Statistiken oder einfache Integrationen. Schalte Basis-Analytics an, damit du beantworten kannst:
Wenn du willst, verbinde Google Analytics oder eine datenschutzfreundliche Alternative. Halte es simpel: Einmal im Monat prüfen und nach Trends suchen, nicht täglichem Rauschen.
Pageviews sind nett, Konversionen zeigen Wert. Wähle 1–3 Aktionen, die zählen, und tracke sie:
Führe notfalls ein kleines Spreadsheet: Datum, Änderung, Ergebnis nach ein paar Wochen. Das reicht, um zu lernen, was Anfragen verbessert.
Pflege ist am einfachsten, wenn sie geplant ist:
Strebe „aktuell und klar" an, nicht „perfekt".
Mach dein Portfolio sichtbar:
Kleine Verbesserungen summieren sich — besonders, wenn du misst, anpasst und regelmäßig präsent bist.
Eine Portfolio-Website soll drei Dinge erreichen:
Wenn Besucher deine Arbeit mögen, dich aber nicht schnell erreichen können, funktioniert die Seite noch nicht.
Die meisten Menschen können eine solide erste Version in einem Wochenende (oder ein paar konzentrierten Abenden) veröffentlichen, wenn die Inhalte bereit sind.
Ein realistischer Plan:
Starte einfach; du kannst die Seite nach dem Livegang verbessern.
Rechne mit:
yourname.com.Wenn du dich auf Jobs bewirbst oder Kunden ansprechen willst, lohnt sich in der Regel ein Upgrade für eine eigene Domain.
Wähle ein primäres Ziel, damit die Startseite nicht wie ein beliebiges Menü wirkt:
Setze dann eine Haupt-CTA, die dazu passt (z. B. „Kontakt“, „Call buchen“ oder „Lebenslauf herunterladen“) und wiederhole sie in der Kopfzeile und gegen Ende der Startseite.
Beginne mit den vier Kernseiten:
Füge zusätzliche Seiten nur hinzu, wenn sie dein Ziel unterstützen (z. B. für Freelancer, für Bewerbungen).
Wähle basierend darauf, was du pflegen wirst:
Mach eine Shortlist von 2–3 Tools, baue in jedem eine schnelle Entwurfs-Startseite und entscheide dich dann.
Vermeide Templates, die Effekte statt deine Arbeit zeigen.
Achte auf:
Überspringe starke Animationen, versteckte Navigation, Autoplay-Video und niedrigen Kontrast. Wenn du das Template nicht in an Farben/Schriften/Abstände anpassen kannst, wähle ein einfacheres Template.
Halte es schlank und konsistent:
So fühlt sich das Bauen eher wie Zusammensetzen an, statt ständig Inhalte suchen zu müssen.
Nutze eine wiederholbare Struktur, damit du schneller veröffentlichen kannst:
Wenn du neu bist, ist Prozess dein Vorteil — zeige Skizzen, Entwürfe, Entscheidungen oder Vorher/Nachher-Vergleiche.
Mach die Basics, die Auffindbarkeit und Zugänglichkeit verbessern:
/about, /work/project-name, /contact.Vor dem Veröffentlichen: Mobilansicht prüfen, defekte Links, Formular testen, Tippfehler und Bildqualität kontrollieren.