Fotografie-Portfolio
Anweisungen
## 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ögerungsladen von Bildern, 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 Anpassung an mobile Geräte
**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.
### Allgemeine 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 mobile Endgeräte, Text zu klein oder Schaltflächen schwer zu antippen
- ❌ Überdesign, bei dem das Design die Arbeit in den Schatten stellt
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Dieser Skill erstellt atemberaubende, personalisierte Portfolio-Websites, die Ihre Arbeit wirklich zur Geltung bringen. Er gestaltet jedes visuelle Detail sorgfältig, sodass Ihre einzigartige Ästhetik ohne Kompromisse erstrahlt.
Gestalten Sie ein Online-Portfolio für Ihre Fotografie. Zeigen Sie Ihre Kunst mit maßgeschneidertem Design, perfekten Layouts und flüssigen Interaktionen, damit Ihre Werke elegant erstrahlen.
Ähnliche Fähigkeiten
Alle anzeigen
WebseiteErklärseiten-Builder
Ein Bericht erklärt. Eine Seite lässt Menschen selbst herausfinden. YouMind kann bereits Webseiten erstellen. Explorable Explainer entscheidet, was gebaut wird – er verwandelt ein Forschungsergebnis, einen Datensatz oder ein Thema in eine einzelne interaktive Seite in der Tradition von Newsroom-Grafiken und erkundbaren Erklärungen: scroll-getriebene Erzählung, echte Diagramme, Bedienelemente, die du bewegen kannst, Quellen, die du prüfen kannst. Es plant, bevor es codiert. Du genehmigst zuerst einen Bauplan: die eine Frage, die die Seite beantwortet, die Enthüllung – der Moment, in dem die Leserin oder der Leser „Oh!“ sagen soll – eine Scroll-Struktur aus fünf bis acht Abschnitten, zwei bis vier Interaktionen, die jeweils dadurch gerechtfertigt sind, was die Leserin oder der Leser durch die Bewegung lernt, und ein Datenvertrag, der jede Zahl und ihre Herkunft auflistet. Dann erstellt es eine einzelne eigenständige HTML-Datei ohne Build-Schritt. Semantisches Markup. Alle Zahlen in einer einzigen bearbeitbaren DATA-Konstante am Anfang. Scroll-Enthüllungen, die auf dem Handy nicht brechen. Jedes Bedienelement ist ein echtes, über die Tastatur bedienbares Formularelement mit Live-Text, der seinen aktuellen Wert beschreibt. Barrierefreiheit ist eingebaut und nicht nachgerüstet: 4,5:1-Kontrast, sichtbare Fokusringe, Alt-Texte überall, keine Bedeutung, die nur durch Farbe transportiert wird, reduzierte Bewegung wird respektiert, responsiv ab 360px. Vor der Übergabe führt es eine Selbstprüfung mit fünf Punkten durch und berichtet die Ergebnisse ehrlich: Kommt die Enthüllung wirklich an, liest sich die Seite auch ohne JavaScript, ist die Tab-Reihenfolge sinnvoll, ist jede Zahl nachvollziehbar, animiert etwas, das die Leserin oder der Leser stoppen möchte? Zwei Regeln, die es nicht bricht: Es erfindet nie Daten, um ein Diagramm gut aussehen zu lassen, und es sagt dir, wenn deine Zahlen deinem Entwurf widersprechen. Für Forschende, Analystinnen und Analysten, Journalistinnen und Journalisten, Lehrende, Indie-Gründerinnen und -Gründer sowie Beraterinnen und Berater, die möchten, dass ihre Arbeit erkundet statt nur überflogen wird.
WebseiteSchwebende Soft-Light-Webseite
Ein Webdesign-System im Soft-Light-Tagesstil: hellblauer Canvas (#ebf5ff), übergroße Display-Schrift mit fester Schriftstärke 500 (responsiv bis 148px), 32px abgerundete Karten + 9999px Pillen, fast schwarzer CTA in #181d27, pastellfarbene Blöcke und schwebende 3D-Clay-Illustrationen. Die Tiefenwirkung entsteht ausschließlich durch die Farbabstufung zwischen Canvas und Karten; die Karten selbst haben keine Schatten. Geeignet für Anforderungen wie „Soft-Light-Tagesstil“, „3D-Illustrations-Landingpage“, „hellblauer Canvas“, „abgerundete Karten“, „SaaS-Website“, „Linear/Framer-Stil“ usw. Inklusive integrierter Vorgaben für Barrierefreiheit und responsives Design.
WebseiteFashion Creative Design-Stil
Webdesign-System im Stil von Mode-Editorial-Postern: warmer, cremefarbener Papierhintergrund (#fffef7), übergroße Überschriften mit Schriftgewicht 300 (64–84px), randlose Fotografie, keine Schatten, Karten mit rechten Winkeln und Buttons mit Pillenform (1440px Radius). Geeignet für Anforderungen wie „Mode-Design-Stil“, „Magazin-Layout“, „Poster-Stil“, „Art-Photobook-Webseiten“, „Studio-Portfolios“, „Galerie-Seiten“ usw. Beliebige Inhalte lassen sich in hochwertige Seiten im Mode-Editorial-Stil verwandeln.
Fotografie-Portfolio
Anweisungen
## 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ögerungsladen von Bildern, 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 Anpassung an mobile Geräte
**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.
### Allgemeine 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 mobile Endgeräte, Text zu klein oder Schaltflächen schwer zu antippen
- ❌ Überdesign, bei dem das Design die Arbeit in den Schatten stellt
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Dieser Skill erstellt atemberaubende, personalisierte Portfolio-Websites, die Ihre Arbeit wirklich zur Geltung bringen. Er gestaltet jedes visuelle Detail sorgfältig, sodass Ihre einzigartige Ästhetik ohne Kompromisse erstrahlt.
Gestalten Sie ein Online-Portfolio für Ihre Fotografie. Zeigen Sie Ihre Kunst mit maßgeschneidertem Design, perfekten Layouts und flüssigen Interaktionen, damit Ihre Werke elegant erstrahlen.
Ähnliche Fähigkeiten
Alle anzeigenWebseiteErklärseiten-Builder
Ein Bericht erklärt. Eine Seite lässt Menschen selbst herausfinden. YouMind kann bereits Webseiten erstellen. Explorable Explainer entscheidet, was gebaut wird – er verwandelt ein Forschungsergebnis, einen Datensatz oder ein Thema in eine einzelne interaktive Seite in der Tradition von Newsroom-Grafiken und erkundbaren Erklärungen: scroll-getriebene Erzählung, echte Diagramme, Bedienelemente, die du bewegen kannst, Quellen, die du prüfen kannst. Es plant, bevor es codiert. Du genehmigst zuerst einen Bauplan: die eine Frage, die die Seite beantwortet, die Enthüllung – der Moment, in dem die Leserin oder der Leser „Oh!“ sagen soll – eine Scroll-Struktur aus fünf bis acht Abschnitten, zwei bis vier Interaktionen, die jeweils dadurch gerechtfertigt sind, was die Leserin oder der Leser durch die Bewegung lernt, und ein Datenvertrag, der jede Zahl und ihre Herkunft auflistet. Dann erstellt es eine einzelne eigenständige HTML-Datei ohne Build-Schritt. Semantisches Markup. Alle Zahlen in einer einzigen bearbeitbaren DATA-Konstante am Anfang. Scroll-Enthüllungen, die auf dem Handy nicht brechen. Jedes Bedienelement ist ein echtes, über die Tastatur bedienbares Formularelement mit Live-Text, der seinen aktuellen Wert beschreibt. Barrierefreiheit ist eingebaut und nicht nachgerüstet: 4,5:1-Kontrast, sichtbare Fokusringe, Alt-Texte überall, keine Bedeutung, die nur durch Farbe transportiert wird, reduzierte Bewegung wird respektiert, responsiv ab 360px. Vor der Übergabe führt es eine Selbstprüfung mit fünf Punkten durch und berichtet die Ergebnisse ehrlich: Kommt die Enthüllung wirklich an, liest sich die Seite auch ohne JavaScript, ist die Tab-Reihenfolge sinnvoll, ist jede Zahl nachvollziehbar, animiert etwas, das die Leserin oder der Leser stoppen möchte? Zwei Regeln, die es nicht bricht: Es erfindet nie Daten, um ein Diagramm gut aussehen zu lassen, und es sagt dir, wenn deine Zahlen deinem Entwurf widersprechen. Für Forschende, Analystinnen und Analysten, Journalistinnen und Journalisten, Lehrende, Indie-Gründerinnen und -Gründer sowie Beraterinnen und Berater, die möchten, dass ihre Arbeit erkundet statt nur überflogen wird.
WebseiteSchwebende Soft-Light-Webseite
Ein Webdesign-System im Soft-Light-Tagesstil: hellblauer Canvas (#ebf5ff), übergroße Display-Schrift mit fester Schriftstärke 500 (responsiv bis 148px), 32px abgerundete Karten + 9999px Pillen, fast schwarzer CTA in #181d27, pastellfarbene Blöcke und schwebende 3D-Clay-Illustrationen. Die Tiefenwirkung entsteht ausschließlich durch die Farbabstufung zwischen Canvas und Karten; die Karten selbst haben keine Schatten. Geeignet für Anforderungen wie „Soft-Light-Tagesstil“, „3D-Illustrations-Landingpage“, „hellblauer Canvas“, „abgerundete Karten“, „SaaS-Website“, „Linear/Framer-Stil“ usw. Inklusive integrierter Vorgaben für Barrierefreiheit und responsives Design.
WebseiteFashion Creative Design-Stil
Webdesign-System im Stil von Mode-Editorial-Postern: warmer, cremefarbener Papierhintergrund (#fffef7), übergroße Überschriften mit Schriftgewicht 300 (64–84px), randlose Fotografie, keine Schatten, Karten mit rechten Winkeln und Buttons mit Pillenform (1440px Radius). Geeignet für Anforderungen wie „Mode-Design-Stil“, „Magazin-Layout“, „Poster-Stil“, „Art-Photobook-Webseiten“, „Studio-Portfolios“, „Galerie-Seiten“ usw. Beliebige Inhalte lassen sich in hochwertige Seiten im Mode-Editorial-Stil verwandeln.
Finde deine nächste Lieblingsfähigkeit
Entdecke weitere kuratierte KI-Fähigkeiten für Recherche, Kreativität und den Arbeitsalltag.