ibaurr/world-class-website-design

World-Class Website Design

Zweck

Erstelle unverwechselbare, durchdachte und produktionsreife Websites durch einen forschungsgesteuerten Designprozess und eine sorgfältige Implementierung.

Diese Fähigkeit gilt sowohl für:

• Redesigns: Verbessere eine bestehende Website, während deren Identität, Positionierung, Inhalt, Routen und funktionierende Funktionalität erhalten bleiben, es sei denn, es gibt einen klaren Grund, sie zu ändern.
• Neue Websites: Etabliere eine originelle kreative Richtung, die auf dem Produkt, der Zielgruppe und den Anforderungen basiert, anstatt auf eine generische Vorlage zurückzugreifen.

Das Ziel ist nicht, eine Designgalerie zu imitieren. Es geht darum, ein kohärentes, einprägsames Erlebnis mit hervorragender handwerklicher Qualität zu schaffen.

Kernprinzipien

1. Verstehen, bevor du änderst. Erfahre, was das Produkt oder Unternehmen tut, wem es dient und was die Website erreichen soll.
2. Recherchiere, bevor du entwirfst. Untersuche relevante Referenzen und identifiziere nützliche Designentscheidungen; kopiere keine Layouts oder visuellen Identitäten.
3. Gib jedem Projekt seine eigene Identität. Verwende nicht dieselbe visuelle Richtung, dasselbe Helden-Layout, dieselbe Abschnittsreihenfolge oder denselben dekorativen Stil für nicht zusammenhängende Projekte.
4. Entwerfe mit Absicht. Jeder Abschnitt, jede Animation, jedes Bild und jede Interaktion sollte die Kommunikation, Benutzerfreundlichkeit oder den Markencharakter unterstützen.
5. Balance zwischen Originalität und Klarheit. Sei visuell ambitioniert, ohne die Website verwirrend oder schwer zu bedienen zu machen.
6. Baue, überprüfe und verfeinere. Ein Design ist erst dann vollständig, wenn die tatsächliche Implementierung bei realistischen Viewport-Größen überprüft wurde.

Arbeitsablauf

1. Entdecke das Projekt

Bevor du Dateien bearbeitest:

• Untersuche die Repository-Struktur, das Framework, den Paketmanager, die Abhängigkeiten, Skripte und bestehenden Konventionen.
• Führe das bestehende Projekt nach Möglichkeit aus und überprüfe die aktuell gerenderte Website.
• Überprüfe alle relevanten Seiten, Routen, Navigationen, Formulare, Handlungsaufforderungen und interaktiven Zustände.
• Verstehe das Produkt, die Zielgruppe, die Positionierung, das Wertversprechen, die Markenstimme und die Conversion-Ziele.
• Identifiziere vorhandene Assets, Schriftarten, Farben, Design-Tokens, Komponenten und Integrationen.
• Behandle bei einem Redesign die bestehende Website und die Projektmaterialien als Quelle der Wahrheit. Erfinde keine Produktbehauptungen und entferne keine wichtigen Inhalte oder Funktionen ohne Begründung.

Wenn wesentliche Informationen nicht verfügbar sind, triff konservative Annahmen und unterscheide sie klar von überprüften Fakten. Stelle eine Frage nur dann, wenn die fehlenden Informationen einen sinnvollen Fortschritt blockieren.

2. Recherchiere visuelle Referenzen

Wenn Browserzugriff oder Web-Recherche verfügbar sind, untersuche eine vielfältige Auswahl hochwertiger Websites. Nützliche Entdeckungsquellen sind:

• https://www.awwwards.com/websites/
• https://www.siteinspire.com/
• https://www.siteofsites.co/
• https://curated.design/
• https://land-book.com/
• https://recent.design/
• https://minimal.gallery/
• https://www.landingfolio.com/
• https://saaslandingpage.com/
• https://www.lapa.ninja/
• https://www.framer.com/startups/ycombinator

Untersuche nach Möglichkeit tatsächliche Seiten und Interaktionen, nicht nur Miniaturansichten oder Suchausschnitte.

Studiere:

• Art Direction und Markenausdruck.
• Komposition, Raster, Abstände und visueller Rhythmus.
• Typografie, Hierarchie und lesbare Zeilenlängen.
• Farbe, Kontrast, Ränder, Oberflächen und Textur.
• Heldenabschnitte und First-Impression-Erlebnisse.
• Navigation und Informationsarchitektur.
• Produktdemonstrationen und visuelles Storytelling.
• Fotografie, Illustration, 3D und andere Assets.
• Bewegung, Übergänge und Interaktionsdetails.
• Responsives Verhalten.

Wähle Referenzen aus bestimmten Gründen aus. Erkläre intern, was an jeder Referenz nützlich ist und wie die Idee an das aktuelle Projekt angepasst werden könnte. Reproduziere nicht das unverwechselbare Design einer anderen Website in seiner Gesamtheit.

Wenn externes Browsen nicht verfügbar ist, behaupte nicht, diese Galerien durchsucht zu haben. Arbeite mit dem verfügbaren Projektkontext und gib die Einschränkung an, wenn sie relevant ist.

3. Lege die kreative Richtung fest

Vor der Implementierung eine klare Designrichtung festlegen, die für diese spezifische Marke und Zielgruppe geeignet ist.

Definiere:

• Das beabsichtigte Gefühl und die Persönlichkeit.
• Das visuelle Konzept und die Art Direction.
• Den Typografie-Ansatz und die Hierarchie.
• Die Farbpalette und Kontraststrategie.
• Die Layout- und Rasterprinzipien.
• Die Bild- und Illustrationsrichtung.
• Die Komponenten- und Oberflächensprache.
• Die Bewegungsprinzipien.
• Die Beziehung zwischen Markenausdruck und Benutzerfreundlichkeit.

Verwende bei Redesigns die bestehende Identität als Ausgangspunkt. Erhalte erkennbare Markenelemente, wenn sie noch wirksam sind, verbessere aber schwache oder inkonsistente Ausführungen.

Vermeide es, auf Folgendes zurückzugreifen:

• Generische SaaS-Landingpage-Strukturen.
• Unmotivierte Farbverläufe und Glüheffekte.
• Sich wiederholende Bento-Grids.
• Dekorative Kleckse und generische KI-Bilder.
• Übermäßige Karten, Pillen, Rahmen und Schatten.
• Willkürlich übergroße Typografie.
• Animation, die Informationen verzögert oder verdeckt.

Diese Muster sind nicht verboten; verwende sie nur, wenn sie wirklich zum Projekt passen.

4. Plane das Erlebnis

Kartiere die Seiten- oder Seitenstruktur, bevor du baust.

• Priorisiere die Fragen und Aufgaben des Benutzers.
• Etabliere eine klare Hierarchie und einen logischen Inhaltsfluss.
• Mache das Wertversprechen schnell verständlich.
• Gib jedem Abschnitt einen bestimmten Zweck.
• Verwende visuelle Variation, ohne die Kohärenz zu verlieren.
• Halte Handlungsaufforderungen klar und angemessen platziert.
• Erhalte bei Redesigns wichtige vorhandene Routen, Inhalte, Integrationen und Benutzerreisen.

Füge keine Abschnitte hinzu, nur um eine Seite länger zu machen. Entferne keine nützlichen Inhalte, nur um Minimalismus zu erreichen.

5. Designe und implementiere

Arbeite direkt in der vorhandenen Codebasis, es sei denn, der Benutzer wünscht einen separaten Prototypen.

• Folge dem Framework, den Konventionen und dem Paketmanager des Projekts.
• Verwende vorhandene Komponenten wieder und verbessere sie, wo sinnvoll.
• Erstelle wiederverwendbare Komponenten und Design-Tokens für wiederkehrende Muster.
• Verwende semantisches HTML und zugängliche Interaktionsmuster.
• Verwende nach Möglichkeit echte Projektressourcen; erfinde keine Testimonials, Kundenlogos, Statistiken, Auszeichnungen oder Produktfähigkeiten.
• Wähle Abhängigkeiten bewusst aus und vermeide unnötige Pakete.
• Stelle sicher, dass Links, Schaltflächen, Formulare, Menüs und andere Steuerelemente ihre beabsichtigten Aktionen ausführen.
• Gestalte das responsive Verhalten absichtlich, anstatt nur Desktop-Layouts zu verkleinern.
• Optimiere Bilder, Schriftarten und das Ladeverhalten.

Ersetze keine funktionierende Anwendung durch ein statisches Mockup. Behaupete nicht, dass eine Integration oder Interaktion funktioniert, es sei denn, sie wurde implementiert und getestet.

Bewegungs- und Scroll-Standards

Globales sanftes / erleichtertes Scrollen

Sanftes, erleichtertes Scrollen ist eine Standardpräferenz bei Website-Projekten.

Strebe Bewegungen an, die sich flüssig, kontrolliert und natürlich anfühlen:

• Verwende nach Bedarf sanftes/erleichtertes Scrollen.
• Stimme Erleichterung und Dauer so ab, dass die Seite auf Benutzereingaben reagiert.
• Unterstütze Mausräder, Trackpads, Tastaturnavigation und Touch-Eingabe.
• Halte die Ankernavigation sanft, ohne verwirrende Sprünge zu verursachen.
• Vermeide übermäßige Glättung, künstliche Verzögerungen oder das Gefühl, dass die Seite von der Eingabe des Benutzers losgelöst ist.
• Erhalte das erwartete Browserverhalten und vermeide unnötiges Scroll-Sperren.
• Stelle sicher, dass die Implementierung mit klebrigen Elementen, dynamischen Inhalten und Routenänderungen funktioniert.

Untersuche den vorhandenen Stack, bevor du eine Implementierung wählst. Eine Bibliothek wie Lenis kann geeignet sein, ist aber nicht zwingend erforderlich. Bevorzuge native Browserfunktionen, wenn sie die Design- und Zugänglichkeitsanforderungen erfüllen. Füge keine Scroll-Bibliothek nur um ihrer selbst willen hinzu.

Respektiere prefers-reduced-motion. Biete ein reduziertes Bewegungserlebnis und stelle sicher, dass Kerninhalte und Navigation ohne Animation verfügbar bleiben.

Optionale abschnittsspezifische Scroll-Techniken

Verwende diese selektiv, wenn sie das Storytelling oder das Verständnis verbessern:

• Angepinnte Abschnitte: Halte einen Abschnitt oder ein visuelles Element an Ort und Stelle, während sich sein Inhalt ändert.
• Scrollgesteuerte Animation: Binde den Animationsfortschritt an die Scrollposition.
• Stickiges Storytelling: Halte ein visuelles Element fest, während sich der zugehörige Text oder die Daten ändern.
• Parallax: Erzeuge zurückhaltende Tiefe durch geschichtete Bewegung.
• Horizontale Sequenzen: Bilde vertikales Scrollen auf horizontale Inhaltsbewegung ab, wenn es intuitiv ist.
• Abschnittsübergänge: Verbinde Szenen oder Abschnitte mit zielgerichteten Übergängen.
• Mikrointeraktionen: Biete reaktionsschnelles Feedback für Hover, Fokus, Drücken und Zustandsänderungen.

Verwechsle sanftes Scrollen nicht mit Scroll-Hijacking.

Vermeide es, die Kontrolle über das gesamte Scrollverhalten der Seite zu übernehmen. Benutzer dürfen sich nicht gefangen fühlen. Bewahre intuitives Scrollen, Tastaturzugriff, Touch-Verhalten, Browser-Verlauf und die Möglichkeit, Inhalte direkt zu erreichen. Wenn ein angepinnter oder scrollgesteuerter Abschnitt verwendet wird, biete eine sinnvolle mobile Alternative und eine Alternative mit reduzierter Bewegung an.

Bewegungsqualität

• Bewegung sollte Hierarchie, Zustand, Kontinuität oder Markenpersönlichkeit vermitteln.
• Verwende konsistentes Timing und konsistente Erleichterung.
• Vermeide es, jedes Element zu animieren.
• Vermeide Layoutverschiebungen und Animationen, die das Lesen oder die Interaktion blockieren.
• Bevorzuge transform und opacity für leistungsstarke Effekte, wo geeignet.
• Halte wesentliche Inhalte sichtbar und nutzbar, wenn die Animation fehlschlägt oder deaktiviert ist.

Qualitätssicherung

Höre nicht nach der ersten Implementierung auf.

Wenn die Tools und die Umgebung es erlauben:

1. Führe das Projekt mit seinen vorhandenen Skripten aus.
2. Überprüfe die gerenderte Website in einem Browser.
3. Überprüfe alle relevanten Seiten und wichtigen Zustände.
4. Teste Desktop-, Tablet- und Mobile Viewport-Größen.
5. Teste Navigation, Links, Formulare, Menüs und Handlungsaufforderungen.
6. Teste sanftes Scrollen mit Mausrad, Trackpad, Touch und Tastatur.
7. Überprüfe angepinnte Abschnitte und Scroll-Animationen auf Blockierung, Ruckeln oder Layout-Probleme.
8. Überprüfe das Verhalten bei reduzierter Bewegung.
9. Untersuche Console-Fehler und fehlgeschlagene Netzwerk-Assets.
10. Verfeinere Abstände, Typografie, Ausrichtung, responsive Layouts und Bewegung.

Wenn eine Browser-Inspektion oder ein bestimmter Test nicht verfügbar ist, sage dies, anstatt zu behaupten, dass er bestanden wurde.

Definition von „Fertig“

Ein Projekt ist fertig, wenn:

• Seine Designrichtung zur tatsächlichen Marke und Zielgruppe passt.
• Die visuelle Hierarchie und der Inhaltsfluss klar sind.
• Das Erlebnis über Seiten und Viewport-Größen hinweg kohärent ist.
• Globales sanftes/erleichtertes Scrollen sich ausgefeilt anfühlt, ohne die Kontrolle zu beeinträchtigen.
• Optionale Bewegungstechniken einen Mehrwert bieten, anstatt Reibung zu verursachen.
• Die vorhandene wesentliche Funktionalität intakt bleibt.
• Interaktive Elemente wie vorgesehen funktionieren.
• Barrierefreiheit und reduziertes Bewegungsverhalten berücksichtigt wurden.
• Die Implementierung nach Möglichkeit ausgeführt und visuell überprüft wurde.
• Bekannte Einschränkungen offengelegt sind.

Abschließende Antwort

Fasse zusammen:

• Was sich geändert hat.
• Die kreative Richtung und die wichtigsten Designentscheidungen.
• Wichtige Bewegungs- und Scroll-Verhalten.
• Aktualisierte Seiten oder Komponenten.
• Tatsächlich durchgeführte Tests.
• Alle verbleibenden Probleme oder Einschränkungen.

Behaupte keine Preiswürdigkeit, perfekte Qualität oder erfolgreiche Tests ohne Belege.