Webdesign "Kai Escher"
Erkunde mein Projekt „Portfolio-Website“. Tauche ein in den Designprozess hinter dieser Seite, entdecke meinen kreativen UX- Prozess.
In diesem Projekt zeige ich dir, wie ich mein Portfolio als UX-Projekt entwickelt habe. Meine Herangehensweise war klar strukturiert und stets auf die Nutzer ausgerichtet. Von der ersten Recherche und der Ideenfindung, über detaillierte Skizzen und Wireframes in der Prototypenphase, bis zu umfassenden Nutzertests im High-Fidelity-Stadium und schließlich der finalen Live-Schaltung. Dabei habe ich mir wertvolle Kenntnisse in WordPress und Elementor angeeignet, um den Entwicklungsprozess methodisch zu gestalten und wichtige Erfahrungen im CMS-Bereich zu sammeln.
Projektaufbau
Rolle: UX-UI Designer, Web-Designer
Phase 1
Research
In der ersten Phase habe ich mit der Recherche begonnen. Dabei habe ich grundlegende Fragen geklärt: Welche Arten von UX- Portfolios gibt es? Welche wichtigen Aspekte muss ein UX- Portfolio abdecken? Wie sollte der Aufbau gestaltet sein? Und wie erstelle ich meine Website sinnvoll und strukturiert? Zusätzlich habe ich Best Practices analysiert, um zu verstehen, welche Inhalte besonders überzeugend wirken und wie erfolgreiche UX- Portfolios ihre Projekte präsentieren. Diese Erkenntnisse bildeten die Basis für meinen weiteren Prozess und halfen mir, klare inhaltliche sowie gestalterische Ziele zu definieren.
Klarer Prozess (Storytelling)
Nicht nur das Ergebnis soll gezeigt werden, sondern auch der Weg dorthin. Jede Case Study folgt einer klaren Erzählstruktur – Herausforderung, Forschung, Iteration, Ergebnis – um den Denkprozess nachvollziehbar zu machen.
Fokus auf die Rolle
Designer:innen die in Teams arbeiten, kennzeichnen eindeutig ihre spezifische Rolle (z. B. Lead UX Researcher, UI Design & Prototyping). Dies schafft Vertrauen und sorgt für Klarheit.
Executive Summary
Die besten Portfolios enthalten zu Beginn jeder Case Study eine Kurzfassung. So erkennt der Recruiter sofort worum es geht und ob das Projekt relevant ist.
Visuelle Hierarchie & Scannbarkeit
Großzügige Abstände (Whitespace), klare Überschriften und Bullet Points machen den Inhalt leicht scannbar. So wird vermieden, dass der Leser durch lange Textblöcke frustriert wird.
Klarheit > Kreativität
Die Website darf ästhetisch ansprechend sein, aber niemals auf Kosten der Orientierung. UX-Recruiter:innen verbringen im Durchschnitt weniger als drei Minuten auf einem Portfolio.
Authentizität ist ein Wettbewerbsvorteil
Fast alle verwenden dieselben Worthülsen („Empathy-driven problem solver“).
Ein ehrlicher, menschlicher Ton wirkt stärker als Buzzword-Bingo.
Echte Learnings – auch aus Fehlschlägen – wirken reflektiert und nicht unsicher.
Auswahl des richtigen CMS
Oft werden Plattformen wie Webflow oder WIX Studio verwendet. Ich habe mich jedoch für das CMS WordPress entschieden, da es eine weit verbreitete Plattform ist, die mir sowohl große Designfreiheit als auch zahlreiche Möglichkeiten für zukünftige Projekte bietet. Außerdem setzen viele Unternehmen auf WordPress, sodass ich wertvolle Kenntnisse im Umgang mit diesem CMS erwerbe und mein Wissen gezielt ausbauen kann.
Persona
Auf Grundlage dieser Erkenntnisse konnte ich die Anforderungen meiner Zielgruppen klarer definieren und die nächsten Schritte im Designprozess vorbereiten. Im weiteren Verlauf dienen die entwickelten Personas als zentrale, nutzerorientierte Grundlage und stellen sicher, dass die Perspektive der Nutzer:innen stets im Fokus bleibt.
Phase 2
Ideen skizzieren
Auf Basis der ersten Recherche wurden Papierprototypen entwickelt. Diese eignen sich besonders, da sie schnell erstellt und flexibel angepasst oder verworfen werden können. Zusätzlich wurden die Entwürfe anhand der zuvor definierten Personas überprüft, um sicherzustellen, dass die Bedürfnisse und Erwartungen der Zielgruppen berücksichtigt werden. Diese frühen Modelle bilden die Grundlage für alle weiteren Entscheidungen im Designprozess.
Phase 3
Wireframes/Wireflow
Dabei wurde besonders auf folgende Aspekte geachtet:
- Designprinzipien: Ein klares und harmonisches Design wurde durch Prinzipien wie Nähe, Ähnlichkeit, Orientierung und Wiederholung gewährleistet.
- Grid-Layout: Mit einem 10 px-Grid und 10 Columns wurden die Elemente übersichtlich und konsistent angeordnet.
Aufbauend darauf wurden Klickpfade erstellt, um den User Flow / Benutzerflüsse – in sogenannte Wireflows – zu visualisieren und im weiteren Verlauf zu testen. So lassen sich Interaktionen und Benutzererfahrungen frühzeitig optimieren und eine klare, nachvollziehbare Führung durch das Produkt sicherstellen.
Phase 4
Testen / auswerten der Prototypen
In Phase 4 wurden erste Usability-Tests durchgeführt. Die in Figma erstellten Wireflows wurden dabei mit mehreren Proband:innen getestet, um frühzeitig wertvolles Feedback zur Nutzerführung und zum Nutzererlebnis zu sammeln.
Die Tests fanden bewusst in einer frühen Projektphase statt und waren schnell sowie rudimentär angelegt. So konnten zügig Erkenntnisse gewonnen werden, welche direkt in den iterativen Designprozess einflossen.
Finales Ergebnis der getesteten Wireframes
Phase 5
Styleguide / Hifi-Prototyp
Bei der Farbwahl lag der Fokus auf einer Palette, die sowohl seriös wirkt als auch eine freundliche, zugängliche Ausstrahlung vermittelt. Vorwiegend wurden Grautöne verwendet, die Ruhe und Neutralität ausstrahlen, ergänzt durch einen Blauton, der gezielt für Highlights und Überschriften eingesetzt wird, um Aufmerksamkeit zu erzeugen und wichtige Inhalte hervorzuheben.
Ebenso entscheidend war die sorgfältige Auswahl der Schriftarten, wobei stets die Prinzipien optimaler Lesbarkeit im Vordergrund standen. So wird sichergestellt, dass die Texte klar und verständlich sind und das Design jederzeit professionell und einheitlich wirkt.
Der Styleguide enthält außerdem genaue Definitionen für Buttongrößen sowie die Ausrichtung der Elemente, inklusive Abstände oben, unten, rechts und links.
Teilausschnitt des Styleguides
Auf Basis der zuvor erarbeiteten Wireframes und Wireflows wurden High-Fidelity-Prototypen erstellt. Diese detaillierten Prototypen bilden das finale Design nahezu pixelgenau ab und enthalten alle visuellen Elemente, Interaktionen und Micro-Animationsdetails. Ziel war es, ein realistisches Nutzererlebnis zu simulieren und die zuvor getesteten Konzepte auf ihre Praxistauglichkeit zu überprüfen.
Durch die High-Fidelity-Prototypen konnten Interaktionen, Animationen und Übergänge präzise dargestellt und frühzeitig Feedback zu Nutzerführung, Lesbarkeit und visueller Hierarchie eingeholt werden. So lassen sich Anpassungen gezielt vornehmen, bevor die finale Umsetzung in WordPress erfolgt.
Diese Phase stellt sicher, dass das Design nicht nur funktional, sondern auch ästhetisch konsistent und intuitiv bedienbar ist, wodurch eine professionelle und durchdachte Nutzererfahrung gewährleistet wird.
Phase 6
Testen / auswerten des Hifi-Prototypen
Nachdem die High-Fidelity-Prototypen erstellt waren, folgte die Testphase. Ziel war es, das Nutzererlebnis unter realistischen Bedingungen zu überprüfen und wertvolles Feedback zu sammeln. Die Prototypen wurden dazu mit mehreren Testpersonen erprobt, wobei sowohl die Interaktionsführung als auch die visuelle Klarheit und Verständlichkeit der Inhalte im Fokus standen.
Die gesammelten Erkenntnisse wurden systematisch ausgewertet. Typische Probleme in der Navigation, Unklarheiten bei Buttons oder Interaktionen sowie Verbesserungspotenziale in der Informationsarchitektur konnten so frühzeitig identifiziert werden. Auf Basis dieser Ergebnisse wurden gezielte Anpassungen vorgenommen, um die Benutzerfreundlichkeit zu optimieren und eine konsistente, intuitive User Journey zu gewährleisten.
Durch diesen iterativen Testprozess konnte sichergestellt werden, dass das finale Produkt nicht nur visuell ansprechend, sondern auch funktional und nutzerfreundlich ist.
Phase 7
Release des Portfolios 25.11.2025
Mit dem Abschluss dieses Projekts konnte ich wertvolle Erkenntnisse gewinnen. Besonders deutlich wurde, wie wichtig es ist, die Nutzer:innen stets in den Mittelpunkt zu stellen. Nur so lassen sich digitale Produkte entwickeln, die tatsächlich verständlich, intuitiv und nützlich sind.
Darüber hinaus konnte ich meine Kenntnisse im UI-Design erweitern und verschiedene UX-Methoden praktisch anwenden – von Research und Personas über Wireframes bis hin zu High-Fidelity-Prototypen und Usability-Tests. Auch im Bereich Content-Management-Systeme habe ich mich weiterentwickelt: Ich habe fundierte Kenntnisse in WordPress erworben und gelernt, wie man mithilfe von Elementor den Entwicklungsprozess effizient gestaltet.
Die fertige Webseite wird kontinuierlich geprüft, getestet und weiterentwickelt, um sowohl Nutzererfahrung als auch technische Umsetzung stetig zu optimieren.
Der Release des finalen Portfolios markiert nicht nur den erfolgreichen Abschluss des Projekts, sondern auch den Transfer dieser Erfahrungen in zukünftige UX- und UI-Projekte. Ich konnte meine gestalterischen Fähigkeiten vertiefen und zugleich methodisches Arbeiten sowie nutzerzentriertes Denken fest in meinen Workflow integrieren.
Änderungen / Updates
28.11.2025
- SEO Optimierung
- Kontaktformular Anzahl der Wörter auf 300 erhöht
- Der Projektname wurde von Portfolio „Kai Escher“ zu Webdesign „Kai Escher“ geändert, damit eine KI klar zwischen dem Projekt Webdesign „Kai Escher“ und der Website „Kai Escher“ unterscheiden kann.
- „Über mich“ Seite in mobiler Ansicht überarbeitet.
Danke das du dir die Zeit genommen hast...
Mir ist es wichtig, dass die Website sich stetig weiterentwickelt. Wenn dir etwas auffällt oder du Verbesserungsvorschläge bzw. Anregungen hast, freue ich mich über dein Feedback – gerne per E-Mail oder über das Kontaktformular. 🙂