Portfolio Mode Design
Von der Vision zur Live-Website: Fashion-Portfolio mit 95+ Lighthouse Score in unter 2 Sekunden.
Portfolio Mode Design
Technologien
95+ Lighthouse Score: Fashion-Portfolio von der Vision bis zum Live-Deploy
01 — Auf einen Blick
IMPACT
Problem
Ana María schickte für jede Bewerbung Dutzende Dateien per E-Mail – unprofessionell für die Modebranche.
Ansatz
Discovery & Moodboarding, Projects-First IA, TypeScript-Entwicklung mit Performance-Budget.
Ergebnis
95+ Lighthouse Score, unter 2s Ladezeit – Bewerbungsreibung vollständig eliminiert.
0+
Lighthouse Score
<0s
Ladezeit
0%
Responsive Design
02 — Projektziel
Projektziel
Ana María schickte für jede Bewerbung einen E-Mail-Anhang mit dutzenden Dateien – ineffizient und unprofessionell für die Modebranche. Sie brauchte eine zentrale digitale Präsenz, die ihre Arbeiten professionell inszeniert und mit einem einzigen Link statt eines Archivs überzeugt. Ziel: Eine Portfolio-Website, die ihre kreative Identität authentisch transportiert und gleichzeitig technisch einwandfrei funktioniert.
03 — Rolle & Verantwortung
Rolle & Verantwortung
Solo-Projekt — Anforderungserhebung im Kundengespräch (Discovery), UX/UI Design, Frontend-Entwicklung (TypeScript, Next.js) und Deployment. Vollständige Client-Ownership: von der ersten Briefing-Session bis zum Live-Launch ohne Engineering-Abhängigkeit.
04 — Drei Entscheidungen, die das Ergebnis geprägt haben
Drei Entscheidungen, die das Ergebnis geprägt haben
Moodboard vor dem ersten Wireframe
Ana Marías kreative Richtung analysiert, bevor auch nur ein Frame geöffnet wurde. Ein visuelles Moodboard definierte Typografie, Farbpalette und Stimmung — als gemeinsame Referenz für alle Folgeentscheidungen.
Eine Stunde Discovery spart drei Stunden Überarbeitung. Verstehen kommt vor Gestalten.
Projects-First IA — Portfolio im Zentrum, alles andere sekundär
Wireframes entschieden die Informationsarchitektur: Projekte als primäre Navigationselemente, biographische Infos bewusst im zweiten Plan. Keine Navigation die vom Portfolio ablenkt.
Discovery + Iteration statt Präsentation fertiger Ergebnisse: Anforderungen aus dem Gespräch, nicht aus Annahmen. Das ist Client-Ownership.
TypeScript + Performance-Budget als Produktentscheid
Image-Optimierung, Code-Splitting und saubere Architektur nicht als Nachaufgabe — sondern als Teil der Produktdefinition von Anfang an. TypeScript für Type-Safety und wartbaren Code.
95+ Lighthouse und unter 2 Sekunden entstehen nicht zufällig — sie sind Architekturentscheidungen.
05 — Ergebnisse
Ergebnisse
Lighthouse Score 95+, Ladezeit unter 2 Sekunden, 100% responsive. Bewerbungsreibung eliminiert – alle Arbeiten zentral und sofort zugänglich über einen einzigen Link. Die Kundin bewirbt sich jetzt professionell, ohne einen Gedanken an Dateianhänge zu verschwenden.
06 — KEY LEARNINGS
LEARNINGS
Vision verstehen vor dem ersten Pixel
Ein ausführliches Discovery-Gespräch und ein visuelles Moodboard vor dem Design spart mehr Zeit als jede spätere Überarbeitung. Ich habe gelernt, erst zu verstehen – dann zu gestalten.
Performance ist kein Nice-to-have
95+ Lighthouse Score und unter 2 Sekunden Ladezeit entstehen nicht zufällig. Image-Optimierung, Code-Splitting und saubere Architektur sind Teil des Produkts – nicht nachträgliche Aufgaben.
Kundeninput über eigene Ästhetik
Meine Designpräferenzen spielen keine Rolle. Was zählt: dass Ana Marías Persönlichkeit authentisch durchkommt. Iterative Abstimmung statt Präsentation fertiger Ergebnisse – das ist echter Client-Fokus.
Projektbilder
