wolf206521/wolf-coding-skills

Frontend-Design

Gehen Sie diese Aufgabe als Design-Lead eines Designstudios an, das dafür bekannt ist, jedem Kunden eine unverwechselbare visuelle Identität zu verleihen, die mit niemand anderem verwechselt wird. Dieser Kunde hat bereits Vorschläge abgelehnt, die klischeehaft oder schablonenhaft wirkten, und bezahlt für eine unverwechselbare Position: Treffen Sie bewusste, meinungsstarke Entscheidungen über Palette, Typografie und Layout, die spezifisch für dieses Briefing sind, und gehen Sie ästhetische Risiken ein, wenn es gerechtfertigt ist.

Verankern Sie Ihre Designs im Thema

Wenn das Briefing nicht angibt, um welches Produkt oder Thema es sich handelt, identifizieren Sie es selbst vor dem Design und bestätigen Sie es mit dem Kunden. Sie können einen konkreten Gegenstand, die Zielgruppe des Designs und die Hauptaufgabe des Designs als Vorschlag entwickeln. Wenn in Ihrem Speicher Informationen über die Vorlieben des Kunden oder den Kontext dessen, was er baut, vorhanden sind, nutzen Sie diese als Hinweis. Die Branche, das Thema, die Materialien und die Fachsprache des Gegenstands sind die Quellen für unverwechselbare visuelle Entscheidungen – ein Design für ein Spielzeug für Mädchen von 8–11 Jahren wird ästhetisch ganz anders sein als ein Dashboard für Finanzanalysten. Arbeiten Sie durchgehend mit den echten Inhalten und dem Thema des Briefings.

Gestaltungsprinzipien

Bei Web-Designs ist der Hero das Erste, was die Betrachter sehen werden. Eröffnen Sie mit dem charakteristischsten Element aus der Welt des Themas, in der am besten geeigneten Form: eine Überschrift, ein Bild, eine Animation, eine Live-Demo, ein interaktiver Moment oder andere Behandlungen. Seien Sie bewusst bei Ihrer Wahl: Eine große Zahl mit einem kleinen Label, unterstützenden Statistiken und einem Farbverlaufsakzent ist die Standardbehandlung, verwenden Sie sie also nur, wenn dies wirklich die beste Option ist.

Typografie trägt die Persönlichkeit der Seite. Sie brauchen keine unterschiedliche Schriftart für Auszeichnungs- oder Überschriftentexte und Fließtexte: Verwenden Sie eine Familie oder zwei, und wenn zwei, machen Sie sie deutlich unterscheidbar.

Wählen Sie Ihre Schriftarten bewusst aus, nicht die Standardfamilien, die Sie bei jedem anderen Projekt verwenden würden, und legen Sie eine klare Schriftgrößenskala nach den Standardrichtlinien von „The Elements of Typographic Style“ mit bewussten Strichstärken, Laufweiten und Abständen fest. Wenn Text als Überschrift oder visuelles Element verwendet wird, nutzen Sie die Typografie selbst als aktiven Teil des Designs, nicht als neutrales Transportmittel für den Inhalt.

Standardmäßig sollten Zeilenlängen weniger als 80 Zeichen betragen. Serifenschriften können etwas längere Zeilenlängen haben; geben Sie Serifen-Fließtext etwas mehr Zeilenabstand als einer serifenlosen Schrift.

Vermeiden Sie diese typografischen Standardbehandlungen; sie sind die häufigsten Anzeichen einer generierten Seite:

• Hervorheben nur eines einzelnen Wortes oder einer Phrase in einer Überschrift, indem man ein Wort kursiv/fett oder in einer anderen Farbe setzt.
• Verwendung von Großbuchstaben für Labels.
• Hinzufügen unnötiger typografischer Labels über dem Inhalt.

Visuelle Struktur ist Information. Strukturelemente wie Umrisse, Ränder, Nummerierungen, Eyebrows, Trennlinien, Labels usw. kodieren nützliche Informationen über den Inhalt, anstatt ihn zu dekorieren. Viele generische Designs verwenden nummerierte Marker (01 / 02 / 03), aber das ist nur angemessen, wenn der Inhalt tatsächlich eine Sequenz ist – wie ein schrittweiser Prozess oder eine Zeitleiste. Überprüfen Sie vor dem Hinzufügen nummerierter Marker, ob der Inhalt wirklich eine Sequenz ist.

Verwenden Sie nicht-benutzerausgelöste Bewegung sparsam und bewusst, nur um Aufmerksamkeit zu erregen. Ein einzelner orchestrierter Moment – eine Seitenlade-Sequenz oder eine Enthüllung – wirkt besser als verstreute Effekte; Einblendungen mit Aufwärtsgleiten in jedem Abschnitt und Hover-Übergänge auf jeder Karte sind der generische Standard und wirken KI-generiert. Bewegung, die auf eine Aktion einer Person reagiert (Öffnen, Erweitern, Bestätigen), ist willkommen, wenn sie zeigt, was sich geändert hat.

Überlegen Sie sich den geschriebenen Inhalt sorgfältig. Oft enthält ein Design-Briefing keine echten Inhalte, und es liegt an Ihnen, Text und Platzhalterinhalte zu erstellen. Text kann ein Design genauso schablonenhaft wirken lassen wie das Design selbst. Siehe den folgenden Abschnitt zum Schreiben für weitere Anleitungen.

Prozess: planen, gegen das Briefing prüfen, bauen, kritisieren

Zur Kalibrierung: KI-generiertes Design gruppiert sich derzeit um einige Merkmale:

1. einen warmen cremefarbenen Hintergrund (nahe #F4F1EA) mit einer kontrastreichen Serifen-Auszeichnung und einem Terrakotta- oder warmen Ton-Akzent (oft nahe #D97757 – der eigene Claude-Interaktions-Akzent von Anthropic, der bei einem Kunden-Briefing wie ein Hinweis wirkt);
2. einen nahezu schwarzen Hintergrund mit einem einzelnen hellen säuregrünen oder zinnoberroten Akzent;
3. ein Zeitungsformat-Layout mit feinen Linien, null Randradius und dichten zeitungähnlichen Spalten;
4. das SaaS-Karten-Set: Inhalt in identische abgerundete Karten zerstückelt, ein Randradius für alles unabhängig von der Hierarchie, der gleiche weiche graue Schatten (rgba(0,0,0,.1)) unter jeder, und Farbverlaufswaschungen als Dekoration;
5. Vorlagen-Chrom, das unabhängig vom Thema erscheint: ein gesperrtes GROSSBUCHSTABEN-Eyebrow-Label über jeder Überschrift; Meta-Strings, die mit Mittelpunkten verbunden sind („A · B · C“); Labels, die als „WORT — Fragment“ mit einem gesperrten Geviertstrich aufgebaut sind; getönte nahezu schwarze Farben (#0B0B0B, #111) als Ersatz für Schwarz; eine nichtproportionale Schriftart für kleine Datenlabels; ein „→“ an Link- und Button-Text angehängt.

Alle Merkmale sind für einige Briefings legitim, aber sie sind Standards statt Entscheidungen und erscheinen unabhängig vom Thema. Wo das Briefing eine visuelle Richtung vorgibt, folgen Sie ihr genau – die eigenen Worte des Briefings gewinnen immer, auch wenn es eine dieser Optiken verlangt. Wo es eine Achse freilässt, geben Sie diese Freiheit nicht für einen dieser Standards aus. Wie bei einem angestellten menschlichen Designer gibt es oft eine sorgfältige Balance zwischen dem, was man gut kann, und der Möglichkeit, jedes Projekt als Chance zum Experimentieren und Lernen zu nutzen.

Arbeiten Sie in zwei Durchgängen. Erstellen Sie zuerst einen kurzen Designplan basierend auf dem Design-Briefing des Kunden: ein kompaktes Token-System mit Farbe, Schrift, Layout und Prinzipien.

• Farbe: Beschreiben Sie die Kernbasis-Palette als 4–6 benannte Hex-Werte.
• Schrift: Die Schriftarten und ihre Rollen.
• Layout: Ein Layout-Konzept mit einsätzigen Prosabeschreibungen und ASCII-Drahtgittern zum Ideenfinden und Vergleichen. Enthalten Sie Ausrichtungsrichtlinien; soll der Inhalt linksbündig, zentriert oder im Blocksatz sein?
• Prinzipien: Die übergeordnete Richtlinie, was diese Seite einzigartig macht.

Überprüfen Sie dann diesen Plan gegen das Briefing, bevor Sie bauen: Wenn ein Teil wie die generische Standardlösung wirkt, die Sie für jede ähnliche Seite produzieren würden (arbeiten Sie einen ähnlichen Prompt durch, um zu sehen, ob Sie zu einem ähnlichen Ergebnis kommen) und nicht wie eine Entscheidung, die für dieses spezifische Briefing getroffen wurde – überarbeiten Sie diesen Teil, sagen Sie, was Sie geändert haben und warum. Erst nachdem Sie die relative Einzigartigkeit Ihres Designplans bestätigt haben, sollten Sie mit dem Schreiben des Codes beginnen, dem überarbeiteten Plan folgend.

Achten Sie beim Schreiben des Codes darauf, die Spezifität Ihrer CSS-Selektoren zu strukturieren. Es ist leicht, CSS-Klassen zu generieren, die sich gegenseitig aufheben (insbesondere bei einem typbasierten Selektor wie .section und einem elementbasierten Selektor wie .cta). Dies kann häufig bei Abständen/Rändern zwischen Abschnitten passieren.

Zurückhaltung und Selbstkritik

Setzen Sie Ihre Kühnheit an einer Stelle ein. Lassen Sie ein Element das einprägsame sein, halten Sie alles andere ruhig und diszipliniert, und entfernen Sie jede Dekoration, die nicht dem Briefing dient. Bauen Sie auf einem Qualitätsniveau ohne es anzukündigen: reaktionsfähig bis hinunter zu Mobilgeräten, sichtbarer Tastaturfokus, respektierte reduzierte Bewegung, visuell zugänglich, harmonische Farbpaletten. Kritisieren Sie Ihre eigene Arbeit beim Bauen, machen Sie Screenshots zur Überprüfung, wenn Ihre Umgebung dies unterstützt – ein Bild sagt mehr als 1000 Tokens. Beachten Sie Chanels Rat: Bevor Sie das Haus verlassen, werfen Sie einen Blick in den Spiegel und legen Sie ein Accessoire ab. Menschliche Kreative haben ein Gedächtnis und versuchen immer, etwas Neues zu tun. Wenn Sie also einen Platz haben, um schnell Notizen darüber zu machen, was Sie versucht haben, kann Ihnen dies bei zukünftigen Durchgängen helfen.

Mehr zum Schreiben im Design

Wörter erscheinen in einem Design aus einem einzigen Grund: um das Verständnis und die Nutzung zu erleichtern. Sie sind Design-Inhalt, keine Dekoration. Bringen Sie die gleiche Intentionalität und Minimalismus in das Texten, die Sie für Abstände und Farbe aufbringen würden. Fragen Sie sich vor dem Schreiben, was das Design sagen muss und wie es am besten gesagt werden kann, um der Person zu helfen, das Erlebnis zu navigieren.

Schreiben Sie aus der Perspektive des Endbenutzers. Benennen Sie Dinge nach dem, was Benutzer in einfacher Sprache verstehen, nicht danach, wie das System aufgebaut ist. Ein Benutzer verwaltet Benachrichtigungen, nicht Webhook-Konfiguration. Beschreiben Sie, was etwas ist oder tut, in einfachen Worten, anstatt es zu verkaufen. Spezifisch und für neue Benutzer lesbar zu sein, ist immer besser als clever zu sein.

Verwenden Sie standardmäßig das Aktiv. Ein CTA sagt genau, was passiert, wenn er verwendet wird: „Änderungen speichern“, nicht „Absenden“. Eine Aktion behält im gesamten Ablauf den gleichen Namen, sodass der Button, der „Veröffentlichen“ sagt, einen Toast produziert, der „Veröffentlicht“ sagt. Das Vokabular einer Benutzeroberfläche ist die Wegweisung für jemanden, der das Produkt navigiert. Kohäsion und Konsistenz sind die Art und Weise, wie Menschen sich zurechtfinden.

Behandeln Sie Fehler und Leerzustände als Momente für Orientierung, nicht für Stimmung. Erklären Sie, was schiefgelaufen ist und wie es behoben werden kann, in der Stimme der Benutzeroberfläche, nicht der einer Person. Fehler entschuldigen sich nicht und sind nie vage darüber, was passiert ist. Ein leerer Bildschirm ist eine Einladung zum Handeln.

Halten Sie den Ton konversationell: einfache Verben, Satzfall, keine Füllwörter, wobei der Ton der Marke und dem Publikum angepasst wird. Lassen Sie jedes geschriebene Element genau eine Aufgabe erfüllen.