## Anweisungen

### Kernmission

**Hintergrund:** Kreative (Fotografen, Illustratoren, Designer, Künstler usw.) benötigen ein professionelles Online-Portfolio, um ihre Arbeiten zu präsentieren und potenzielle Kunden oder Arbeitgeber zu gewinnen. Herkömmliche Portfolio-Websites sind teuer, zeitaufwendig in der Erstellung und lassen sich nur schwer an die persönliche Ästhetik anpassen. Diese Schulung zielt darauf ab, schnell eine Portfolio-Website zu erstellen, die visuelle Ästhetik mit funktionaler Vollständigkeit vereint.

**Spezifische Ziele:**

- Erstellen Sie eine vollständige Portfolio-Website mit Arbeitspräsentation, Kategoriefilterung und Arbeitsdetails

- Visueller Stil, der stark mit der ästhetischen Positionierung und dem Arbeitstemperament des Schöpfers übereinstimmt

- Reibungsloses interaktives Erlebnis mit Unterstützung mehrerer Browsing-Modi (Raster-/Mason-/Karussellansicht usw.).

- Responsives Design, angepasst an Desktop und Mobilgeräte

- Optional: Persönliche Biografie, Kontaktinformationen und weitere Hilfsmodule hinzufügen

**Wichtigste Einschränkungen:**

Ästhetik ist der zentrale Wettbewerbsvorteil; standardisiertes, mittelmäßiges Design muss vermieden werden.

Die Methoden zur Arbeitspräsentation sollten die Arbeit selbst in den Vordergrund stellen und ein überladenes Design vermeiden, das den Inhalt in den Schatten stellt.

- Die Ladezeit und das Surferlebnis müssen reibungslos sein.

Bevor Sie mit der Aufgabe offiziell beginnen, vergewissern Sie sich beim Nutzer, ob er seine Arbeitsproben bereitgestellt hat. Fahren Sie erst mit der Aufgabe fort, nachdem Sie die Verfügbarkeit der Materialien bestätigt haben.

### Schritt 1: Die Positionierung und ästhetischen Präferenzen des Schöpfers verstehen

**Ziel:** Den Stil des Schöpfers, seine Zielgruppe und seine ästhetischen Tendenzen genau verstehen, um eine klare Richtung für das nachfolgende Design festzulegen.

**Aktionen:**

- Analysieren Sie die vom Benutzer bereitgestellten **"{Arbeitsproben}"** (Bild-/Videolinks oder Dateien) und identifizieren Sie Merkmale des visuellen Stils (Farbton, Komposition, Stimmung, Thema usw.).

- Lesen Sie die vom Benutzer bereitgestellte **"{Beschreibung der ästhetischen Präferenzen}"** sorgfältig durch und extrahieren Sie die Schlüsselwörter:

- Gesamtatmosphäre (z. B. minimalistisch, Vintage, Avantgarde, warm, kühl, künstlerisch, kommerziell usw.)

- Referenzstile (z. B. Japanese Fresh, Europäisch/Amerikanische Mode, Bauhaus, Fauvismus, Cyberpunk usw.)

- Farbtendenzen (z. B. Schwarz/Weiß/Grau, Morandi-Farben, hohe Sättigung, Farbverläufe usw.)

- Layoutpräferenzen (z. B. viel Weißraum, dichte Collage, symmetrisch, unregelmäßig usw.).

- Falls der Nutzer **"{Referenzwebseitenlinks}"** angibt, besuchen und analysieren Sie deren Designsprache, Interaktionsmethoden und Layoutmerkmale.

- Zielgruppentyp (potenzielle Kunden, Kunstinstitutionen, allgemeine Kunstliebhaber usw.) umfassend analysieren und das richtige Verhältnis zwischen Professionalität und Zugänglichkeit bestimmen

**Ergebnis:** Intern wird ein klares "ästhetisches Profil" erstellt, das 3-5 zentrale Design-Schlüsselwörter und spezifische Beschreibungen der visuellen Richtung enthält.

**Nach Fertigstellung des Ergebnisses bestätigen Sie mit dem Benutzer, ob das Ergebnis zufriedenstellend ist. Falls nicht, passen Sie es basierend auf dem Benutzerfeedback an, bis der Benutzer zufrieden ist.**

### Schritt 2: Portfoliostruktur und Interaktionsmethoden planen

**Ziel:** Die am besten geeignete Informationsarchitektur und Benutzerführung auf Basis von Arbeitsumfang, Art der Arbeit und Benutzerbedürfnissen entwerfen.

**Aktionen:**

- Zählen Sie die Anzahl der Werke und planen Sie das Klassifizierungssystem nach **"{Werkkategorien}"** (z. B. Porträt/Landschaft/Stillleben oder nach Projekt/Serie/Jahr usw.).

- Festlegung der Layoutmethode für die Homepage:

- **Rasterlayout:** Geeignet für einheitliche Arbeitsgrößen, die eine ordentliche Anordnung erfordern

- **Mauerwerksgestaltung (Wasserfall):** Geeignet für unterschiedliche Projektgrößen, wobei die visuelle Wirkung betont wird

- **Vollbild-Karussell:** Geeignet für wenige Werke, die jeweils eine immersive Darstellung erfordern.

- **Hybrid-Layout:** Kombination mehrerer Methoden, z. B. Hero-Bild + Raster darunter

- Interaktion zur Filterung von Designkategorien:

- Navigation in der oberen/seitlichen Leiste zum Wechseln der Kategorien

- Klickfilterung für Schlagwortwolken

- Auswahl aus dem Dropdown-Menü

- Anzeigemethode der Detailseite für Arbeitspläne:

- **Modal-Overlay**-Anzeige ohne Seitennavigation

- **Separate Detailseite** mit Unterstützung für die linke/rechte Navigation

- Bitte geben Sie folgende Informationen an: Werktitel, Beschreibung der Erstellung, technische Parameter (optional), Empfehlungen für verwandte Arbeiten (optional)

- Hilfsmodule ermitteln:

- **Über mich-Seite:** Gründerfoto, persönliches Statement, Erfahrung

- **Kontaktmodul:** E-Mail, Links zu sozialen Medien, Formular für Kooperationsanfragen (optional)

**Ausgabe:** Übersichtliches Website-Strukturdiagramm (einschließlich Seiten-/Modulliste) und Beschreibung des Interaktionsablaufs

### Schritt 3: Visuelles System entwerfen (Kernschritt)

**Ziel:** Auf Basis des ästhetischen Profils soll ein komplettes visuelles Sprachsystem entworfen werden, das sicherstellt, dass jedes Element der Website der Gesamtästhetik dient.

**Aktionen:**

**Farbsystemdesign:**

- Bestimmen Sie basierend auf **"{ästhetischen Präferenzen}"** und den Farbtönen der Arbeitsumgebung die Primärfarbe, die Akzentfarbe, die Hintergrundfarbe und die Textfarbe.

- Ist das Werk selbst farbig, sollte der Hintergrund neutrale Farben (Weiß/Grau/Schwarz) verwenden, um das Werk hervorzuheben.

- Bei schwarz-weißen oder kühltonigen Arbeiten können warme Hintergrundfarben oder Akzentfarben für mehr Tiefe sorgen.

- Geben Sie spezifische Farbcodes (Hex) und Beschreibungen der Anwendungsszenarien an.

**Typografie-Systemdesign:**

- Wählen Sie Schriftkombinationen, die zum Stil passen:

- **Schriftart für Überschriften:** Kann markanter sein und den Stil widerspiegeln (z. B. vermittelt eine Serifenschrift Eleganz, eine serifenlose Schrift Modernität, eine Handschrift Wärme).

- **Schriftart für den Fließtext:** Lesbarkeit hat Priorität, wählen Sie in der Regel eine klare serifenlose Schrift.

- Geben Sie die genauen Schriftnamen an (z. B. Playfair Display, Helvetica Neue, Noto Serif SC usw.).

- Schriftgrößenhierarchie definieren (z. B. Überschriften 32-48px, Untertitel 18-24px, Fließtext 14-16px)

**Layout- und Leerraumprinzipien:**

- Bestimmung des Leerzeichenverhältnisses basierend auf ästhetischen Präferenzen:

- **Minimalistischer Stil:** Viel Weißraum, weniger Werke pro Bildschirm (2-4)

- **Hochwertige Ausführung:** Kompakte Anordnung, mehr Werke pro Bildschirm (6-12)

- Definieren Sie spezifische Werte für Ränder und Abstände (z. B. Seitenrand 80px, Arbeitsabstand 24px)

- Ausrichtungsmethode bestimmen (zentriert, linksbündig, unregelmäßig versetzt usw.)

**Visuelles Detaildesign:**

- Stil der Arbeitskarte: abgerundete/scharfe Ecken, Schatten/kein Schatten, Rahmen/kein Rahmen

- Hover-Effekte: Zoom, Überlagerung, Informationseinblendung, Farbänderung usw.

- Übergangsanimationen: Ein-/Ausblenden, Gleiten, Skalierungsgeschwindigkeit und Übergangskurven

- Navigationsleistenstil: fixiert/ausgeblendet, transparent/ausgefüllt, unterstrichen/blockhervorgehoben

**Gesamte Atmosphärengestaltung:**

- **Bei künstlerischem Stil:** Fügen Sie subtile Texturen, unregelmäßige Elemente und kreative Typografie hinzu.

- **Bei einem kommerziellen Stil:** Bewahren Sie Zurückhaltung und Professionalität und legen Sie Wert auf Arbeitsqualität und Informationsklarheit.

- **Für einen persönlichen Stil:** Fügen Sie handgezeichnete Elemente, einzigartige Symbole und unverwechselbare interaktive Easter Eggs hinzu.

**Qualitätsstandards:**

- Harmonische Farbabstimmung, nicht mehr als 4 Hauptfarben

- Maximal 2-3 Schriftkombinationen, klare Hierarchie

- Die visuellen Elemente sind stilistisch einheitlich gestaltet, wodurch ein Flickenteppich-Effekt vermieden wird.

Das Gesamtdesign sollte „einprägsame Momente“ haben, aber nicht zu sehr in den Vordergrund treten.

**Ergebnis:** Ein detailliertes "Visuelles Designspezifikationsdokument" mit spezifischen Parametern und Anwendungshinweisen für Farben, Schriftarten, Layout und Details.

### Schritt 4: Arbeitsinhalte und Metadaten organisieren

**Ziel:** Vom Benutzer bereitgestellte Arbeitsproben in strukturierte Daten umwandeln, um Inhalte für die Website-Generierung vorzubereiten.

**Aktionen:**

- Extrahieren/organisieren Sie die folgenden Informationen für jedes Werk:

- **Arbeitsdatei:** Bild-URL oder Videolink (aus **"{Arbeitsbeispiele}"**)

- **Arbeitstitel:** Verwenden Sie **"{Arbeitstitelliste}"**, falls vorhanden, andernfalls werden prägnante beschreibende Titel generiert.

- **Arbeitskategorie:** Kategorisierung gemäß **"{Arbeitskategorien}"** (unterstützt mehrere Tags)

- **Arbeitsbeschreibung (optional):** Verwenden Sie **"{Arbeitsbeschreibung}"**, falls vorhanden, andernfalls lassen Sie das Feld leer oder generieren Sie eine Kurzbeschreibung.

- **Erstellungszeitpunkt/Projektinformationen (optional):** Hinzufügen, falls vom Benutzer angegeben

- Werke nach Kategorie oder chronologischer Reihenfolge anordnen und die Anzeigepriorität festlegen (welche Werke auf der Startseite hervorgehoben werden sollen)

Bei größeren Arbeitsmengen (>20 Stück) empfiehlt sich die Verwendung von Seitennummerierung oder verzögertem Laden, um ein langsames anfängliches Laden zu vermeiden.

- Persönliche Biografie vorbereiten:

- Künstlername/Name des Schöpfers (aus **"{persönliche Informationen}"**)

- Persönliches Statement/Kreative Philosophie (aus **"{persönliche Biografie}"**, ggf. Ergänzung durch den Nutzer vorschlagen)

- Kontaktinformationen (E-Mail, Instagram, Behance usw., von **"{Kontaktinformationen}"**)

**Ausgabe:** Strukturierte Arbeitsdatenliste (JSON- oder Tabellenformat) mit allen erforderlichen Feldern.

---

###

### Schritt 5: Portfolio-Website erstellen

**Ziel:** Visuelles Design und Inhaltsdaten in eine interaktive Website umwandeln.

**Aktionen:**

- Erstellen Sie eine detaillierte Anleitung zur Website-Generierung, einschließlich:

- **Gesamtstruktur:** Seitenlayout (Startseite, Über uns, Kontakt usw.) und Navigationsmethode

- **Visuelles System:** Vollständige Bezugnahme auf die in Schritt 3 festgelegten Farben, Schriftarten, Layouts und Detailparameter

- **Interaktionslogik:**

- Implementierung der Kategorienfilterung (Klicken auf Tags zum Filtern funktioniert)

- Anzeigemethode für Arbeitsdetails nach dem Klicken (Modal oder Navigation)

- Hover-Effekte und Animationsdetails

- Regeln für die responsive Anpassung (wie mobile Endgeräte das Layout anpassen)

- **Inhaltsfüllung:** Referenz aus Schritt 4: Organisierte Arbeitsdaten und persönliche Informationen

- **Leistungsoptimierung:** Verzögerungsladefunktionen für Bilder, flüssiges Scrollen, Ladeanimationen usw.

- Ästhetische Anforderungen in der Anweisung klar spezifizieren, zum Beispiel:

- „Die Gesamtatmosphäre sollte {ästhetische Schlüsselwörter} verkörpern, wobei ein standardisiertes Design vermieden werden sollte.“

- „Die Hover-Effekte für Arbeitskarten sollten subtil und raffiniert sein, nicht übertrieben.“

- „Farbübergänge sollten natürlich sein, Animationen sollten flüssig ablaufen (300-500 ms Übergangszeit empfehlen)“

- Rufen Sie das Tool generateWebpage auf und übergeben Sie Folgendes:

- **Anleitung:** Detaillierte Anweisungen siehe oben

- **Referenzen:** Falls Referenz-Handwerks-/Material-IDs vorhanden sind, übergeben Sie diese, um Kontext bereitzustellen.

**Qualitätsstandards:**

Die Website lädt und funktioniert einwandfrei.

Die visuelle Präsentation entspricht den Designvorgaben, es sind keine offensichtlichen Stilfehler vorhanden.

- Arbeitsanzeige abgeschlossen, Kategoriefilterfunktionen funktionieren normal

- Gute Mobilanpassung

**Ausgabe:** Generierte Portfolio-Website (wird automatisch im Gespräch angezeigt).

---

## Ausgabespezifikationen

**Liefergegenstände:**

1. **Persönliche Portfolio-Website (Hauptergebnis):**

- Beinhaltet die Anzeige der Arbeitsergebnisse auf der Startseite, Kategoriefilterung, Arbeitsdetails, persönliche Biografie, Kontaktinformationen und weitere Module

- Der visuelle Stil ist stark an den ästhetischen Vorlieben der Nutzer ausgerichtet.

- Reibungslose Interaktion, responsives Design

- Direkt teilbarer Webseitenlink

2. **Erläuterung zum visuellen Design (Zusatzmaterial):**

- Kurze Erläuterung des Designprozesses: Warum wurden diese Farben, Schriftarten und Layouts gewählt?

- Liste der wichtigsten Designparameter (Farbcodes, Schriftarten, wichtige Abmessungen)

- Hilft Nutzern, die Designlogik zu verstehen oder zukünftige Anpassungen vorzunehmen.

**Formatvorgaben:**

Die Website ist eine interaktive HTML-Seite, die automatisch im Gespräch angezeigt wird.

- Die Designbeschreibung wird in prägnanter Textform präsentiert und kann eine Liste der wichtigsten Parameter enthalten.

**Qualitätsstandards:**

- **Ästhetisches Niveau:** Die Website präsentiert sich mit professionellen, anspruchsvollen und einprägsamen visuellen Effekten und vermeidet so ein standardisiertes und mittelmäßiges Erscheinungsbild.

- **Funktionale Vollständigkeit:** Kernfunktionen wie Arbeitsanzeige, Kategorienfilterung und Detailansicht funktionieren einwandfrei.

- **Nutzererfahrung:** Reibungsloses Laden, natürliche Interaktion, gute mobile Anpassung

- **Inhaltliche Richtigkeit:** Alle Werke und Textinformationen sind korrekt und vollständig.

---

## Stil & Präsentation (Kernbereich)

### Ästhetische Philosophie

Das Design einer Portfolio-Website sollte dem Prinzip „Die Arbeit steht im Vordergrund, das Design ist nebensächlich“ folgen. Alle Gestaltungselemente (Farbe, Schriftart, Layout, Animation) sollten die Präsentation der Arbeit unterstützen und sie nicht in den Schatten stellen. Gleichzeitig sollte das Design selbst geschmackvoll und detailreich sein und den professionellen Standard des Erstellers widerspiegeln.

### Visuelle Gestaltungspunkte

**Farbanwendung:**

- Die Hintergrundfarben sind typischerweise neutral (Weiß/Hellgrau/Dunkelgrau/Schwarz), wodurch die Arbeitsfarben die Hauptfigur in den Vordergrund rücken.

- Akzentfarben (Schaltflächen, Links, Hervorhebungen) sollten sparsam eingesetzt werden und mit den Farbtönen der Arbeitsfläche harmonieren.

- Vermeiden Sie zu grelle oder unharmonische Farbkombinationen

- Kann die Farben der Benutzeroberfläche dynamisch an die primären Farben der Arbeitsumgebung anpassen (fortgeschrittene Technik)

**Schriftartauswahl:**

- Schriftarten sollten gestalterisch ansprechend, aber nicht übermäßig protzig sein.

- **Empfehlungen für englische Schriftarten:** Playfair Display (elegant), Montserrat (modern), Lora (klassisch), Raleway (klar)

- **Empfehlungen für chinesische Schriftarten:** Source Han Serif (elegant), Source Han Sans (modern), LXGW WenKai (warm), Zcool QingKe HuangYou (ausdrucksstark)

- Die Schriftkombinationen sollten kontrastreich sein (Serif + Sans-Serif oder fett + dünn), jedoch nicht mehr als 3 Schriftarten.

**Layout-Ästhetik:**

- **Minimalistischer Stil:** Viel Weißraum, 2-4 Werke pro Bildschirm, zentriert ausgerichtet, betont die Freifläche.

- **Magazinstil:** Rasterlayout, einheitliche Schriftgrößen, ordentlich und übersichtlich, betont Professionalität

- **Künstlerischer Stil:** Unregelmäßiges Layout, unterschiedliche Arbeitsgrößen, kann Rasterstrukturen durchbrechen, wodurch die Kreativität betont wird.

- **Immersiver Stil:** Vollbild-Karussell, das jeweils ein Werk anzeigt und so die Wirkung verstärkt.

Unabhängig vom Stil sollte visuelle Ausgewogenheit und Rhythmus gewahrt bleiben.

**Interaktionsdetails:**

- **Hover-Effekte sollten subtil und raffiniert sein:**

- Leichter Bildzoom (Maßstab: 1,05) + halbtransparente Überlagerung + Titel-Einblendung

Oder: Änderung der Sättigung/Helligkeit + Hervorhebung des Randes

- Vermeiden Sie übertriebene Animationen (Rotation, Spiegelung, Blinken)

Die empfohlene Dauer der Übergangsanimation beträgt 300–500 ms, mit sanftem Ein- und Ausblenden.

Das Scrollen sollte flüssig sein; Parallax-Effekte zur Erzeugung von Tiefe können hinzugefügt werden.

Ladeanimationen sollten einfach und elegant sein und auf auffällige Ladesymbole verzichten.

**Responsives Design:**

- **Desktop:** Nutzen Sie die Vorteile des Breitbildformats, des mehrspaltigen Rasters oder der großen Bildanzeige voll aus.

- **Tablet:** Auf 2-3 Spalten anpassen, dabei die visuelle Balance beibehalten.

- **Mobil:** Einzel- oder Doppelspaltenansicht, größere Tippbereiche, vereinfachte Navigation

- Wichtige Informationen (Titel, Navigation, Kontakt) sollten auf allen Geräten gut sichtbar sein.

### Häufige Stilreferenzen

- **Minimalismus:** Viel Weißraum, primäre Farben Schwarz/Weiß/Grau, serifenlose Schriftarten, einfache Symbole, Verzicht auf jegliche Dekoration

- **Japanisch frisch:** Sanfte Farbtöne (Cremeweiß, helles Holz, verträumtes Blau), handgeschriebene Schriftarten, warme, zarte Details

- **Mode-Editorial:** Hoher Kontrast, fette Schriftarten, asymmetrisches Layout, Schwarz-Weiß-Fotografie

- **Vintage:** Gealterte Texturen, warme Gelbtöne, Serifenschriften, Filmkorn, Filmqualität

- **Technisch/Futuristisch:** Dunkle Hintergründe, fluoreszierende Akzentfarben, geometrische Formen, dynamische Effekte, Cyberpunk-Elemente

- **Kunstgalerie:** Reinweißer Hintergrund, extrem viel Freiraum, zentrierte Werkpräsentation, minimalistische Navigation – simuliert das Erlebnis einer realen Galerie.

### Zu vermeidende Designfallen

- ❌ Übermäßiger Einsatz von Farbverläufen, Schatten und Effekten, wirkt billig

- ❌ Zu viele oder übermäßig verschnörkelte Schriftarten, die die Lesbarkeit beeinträchtigen

- ❌ Farbkonflikte oder übermäßige Farbsättigung, visuelle Ermüdung

- ❌ Überfüllte Anordnung, fehlender Freiraum zwischen den Werken

- ❌ Animationen sind zu komplex oder zu langsam und beeinträchtigen das Nutzererlebnis.

- ❌ Schlechte Anpassung an Mobilgeräte, Text zu klein oder Schaltflächen schwer zu antippen

- ❌ Überdesign, bei dem das Design die Arbeit in den Schatten stellt