Kernmission

Hintergrund: Markengeschichten werden oft in Textdokumenten oder PowerPoint-Präsentationen dargestellt, wodurch ein immersiver Präsentationsstil fehlt. Eine exzellente Markenseite sollte einem visuell ansprechenden Magazin ähneln, durch das man scrollen kann. Sorgfältig gestaltetes Layout, Animationen und ein stimmiger Rhythmus ermöglichen es Besuchern, die Markenphilosophie und den Markenauftritt beim Stöbern intuitiv zu erfassen.

Spezifische Ziele:

Die Markengeschichte ist in 4-8 Erzählknoten unterteilt, wobei jeder Knoten einem visuellen Kapitel entspricht.

Analysieren Sie die Websites bekannter Marken, um visuelle Inspiration und Designreferenzen zu gewinnen.

Entwerfen Sie ein anspruchsvolles visuelles Stilsystem (Farbschema, Typografie, Layout, Bewegungseffekte), das mit der Markenidentität übereinstimmt.

Generieren Sie eine interaktive Webseite mit Scrollfunktion, die Module wie Zeitleiste, Meilensteine ​​und Produktentwicklung enthält.

Achten Sie darauf, dass die Seite optisch anspruchsvoll, elegant und minimalistisch wirkt und vermeiden Sie billige oder überdekorierte Designs.

Wichtigste Einschränkungen:

Der visuelle Stil muss mit dem Markenauftritt übereinstimmen (z. B. Tech-Marken → ruhig und zurückhaltend, Beauty-Marken → warm und sanft).

Animationseffekte sollten zurückhaltend und maßvoll sein und der Erzählung dienen, anstatt technische Fähigkeiten zur Schau zu stellen.

Eine schnelle Seitenladezeit und reibungslose Interaktion müssen für ein gutes Benutzererlebnis sorgen.

Vor der Durchführung der Aufgabe müssen die Nutzer relevante Informationen wie die Markengeschichte, den Hintergrund und die Werte angeben.

Schritt 1: Die Markengeschichte verstehen und die Erzählstruktur extrahieren

Ziel: Ein tiefes Verständnis des Kerninhalts der Markengeschichte zu erlangen und wichtige narrative Punkte sowie emotionale Kurven zu identifizieren.

Aktion:

Lesen Sie den vom Nutzer bereitgestellten Markenstory-Text sorgfältig durch und identifizieren Sie die folgenden Elemente:

-Markenursprung/Gründungshintergrund

-Kernkonzepte/Werte

- Wichtige Meilensteine ​​(Produkteinführung, Auszeichnungen, bahnbrechende Anwenderergebnisse usw.)

- Gründergeschichte oder Teamgeschichte (falls vorhanden)

-Markenvision/Zukünftige Ausrichtung

- Die Geschichte in 4-8 Erzählabschnitte unterteilen, wobei jeder Abschnitt Folgendes enthält:

- Knotentitel (prägnant und aussagekräftig, 5-10 Wörter)

-Kerninformationen (in 1-2 Sätzen zusammengefasst)

- Emotionale Grundstimmung (z. B. Wärme, Entschlossenheit, Durchbruch, Zukunftsperspektive)

Entwerfen Sie den Erzählfluss und bestimmen Sie die logischen Beziehungen und die emotionale Entwicklung zwischen den einzelnen Knotenpunkten.

Qualitätsstandards:

- Die Anzahl der Erzählknoten sollte moderat sein (zu wenige lassen die Erzählung dünn erscheinen, zu viele machen sie langatmig).

- Jeder Knotenpunkt hat einen klaren narrativen Zweck, wodurch Informationsredundanz vermieden wird.

Die Gesamterzählung hat einen Anfang, eine Entwicklung, einen Höhepunkt und eine Auflösung mit emotionalen Höhepunkten.

Schritt 2: Recherchieren Sie Benchmark-Marken und sammeln Sie visuelle Inspiration

Zielsetzung: Auf Basis des Markentons herausragende Marken-Websites mit ähnlichem oder vergleichbarem Stil suchen und analysieren, um visuelle Inspiration und Designreferenzen zu gewinnen.

Aktion:

1. Bestimmen Sie die Richtung der Benchmark-Suche:

Auf Basis der in Schritt 1 extrahierten Markenton-Keywords (z. B. "{Markenton-Keywords}") soll eine Suchstrategie erstellt werden.

Definiere 2-3 Suchdimensionen:

Vergleichswerte aus derselben Branche (z. B. herausragende inländische Kosmetikmarken)

Branchenübergreifende Kooperationen mit ähnlichen Themen (z. B. Marken aus anderen Kategorien, die ebenfalls „östliche Ästhetik“ betonen, wie etwa Teegetränke und Einrichtungsgegenstände).

Preisgekrönte Designbeispiele (z. B. preisgekrönte Websites mit ähnlichem Stil auf Awwwards und FWA)

2. Vergleichbare Marken suchen und filtern:

Verwenden Sie ein Suchtool, um nach Schlüsselwörtern wie den folgenden zu suchen:

"{Branche} + Markenwebsite + Design"

"{Ton-Keywords} + Markenwebsite + Auszeichnung"

"Bestes Webdesign der {Branche} 2024"

Wählen Sie 3-5 Marken-Websites mit visuellen Stilen aus, die als Referenz dienen können.

Priorisieren Sie Websites mit einer hochwertigen Positionierung, exzellentem Design und einer Scroll-Funktion.

3. Detaillierte Analyse von Vergleichswebseiten:

Analysieren Sie jede Benchmark-Website visuell und erfassen Sie die folgenden Elemente:

Farbschema: die Kombination aus Hauptfarbe, Hintergrundfarbe und Akzentfarbe

Schriftartverwendung: Schriftartauswahl, Größenhierarchie für Überschriften und Fließtext

Typografische Merkmale: Weißraumverhältnis, Rastersystem, Ausrichtung.

Animationsstil: Scroll-Triggermethode, Animationsdauer, Parallax-Effekt

Erzählstruktur: Kapitelaufteilung, Inhaltstempo, visueller Fokus

Wichtige Seiten oder Module als visuelle Referenzen extrahieren.

4. Designinspirationen extrahieren:

Fassen Sie die gemeinsamen Merkmale der Benchmark-Websites zusammen (z. B. „Diese Marken verwenden im Allgemeinen große Weißraumflächen + Serifenschriften für Überschriften + Farbverlaufsanimationen“).

Identifizieren Sie einzigartige Designtechniken, von denen man lernen kann (z. B. „Die Timeline von Marke A verwendet horizontales Scrollen, was sehr innovativ ist“).

Markieren Sie die Designfallen, die es zu vermeiden gilt (z. B. „Marke B hat zu viele Animationen, wodurch sie protzig wirkt“).

Entwickeln Sie 3-5 klare Designinspirationen, die als Leitprinzipien für die nachfolgende Designarbeit dienen sollen.

Qualitätsstandards:

Die Anzahl der Vergleichsmarken ist moderat (3-5) und umfasst sowohl Branchenkollegen als auch branchenübergreifende Referenzen.

Die Analyse ist umfassend und beinhaltet Farbschema, Schriftart, Typografie, Animation und Struktur.

Design sollte konkrete und umsetzbare Ideen inspirieren, anstatt vage Vorstellungen von „übergeordneten“ Konzepten.

Es muss klar zwischen Gestaltungselementen unterschieden werden, die „referenzwürdig“ sind, und solchen, die „vermeiden“ sollten.

Nach Abschluss der Studie sollte beim Nutzer nachgefragt werden, ob er mit der Lieferung zufrieden ist. Falls nicht, sollten die Anpassungen anhand des Nutzerfeedbacks vorgenommen werden, bis die Zufriedenheit erreicht ist.

Schritt 3: Definieren Sie das visuelle Markenstilsystem

Zielsetzung: Auf Basis von Benchmark-Forschungsergebnissen und in Kombination mit dem eigenen Stil der Marke soll ein anspruchsvolles, elegantes und minimalistisches visuelles Stilsystem entworfen werden.

Aktion:

Auf Basis der Markentonanalyse in Schritt 1 und der Ergebnisse der Benchmark-Studie in Schritt 2 wurden die Schlüsselwörter für den visuellen Ton ermittelt.

Farbgestaltung:

Hauptfarbschema: Wählen Sie 1-2 Hauptfarben, die den Charakter der Marke repräsentieren (geben Sie die Farbwerte an).

Sekundärfarben: 2-3 Sekundärfarben, die zum Schichten und zur optischen Verzierung verwendet werden.

Hintergrundfarbe: Bevorzugen Sie sanfte, gebrochen weiße, hellgraue oder dunkle Hintergründe und vermeiden Sie reines Weiß (#FFFFFF).

Akzentfarbe: Eine kontrastreiche Farbe, die verwendet wird, um CTA-Schaltflächen oder wichtige Informationen hervorzuheben.

Unter Berücksichtigung der Farbschemata von Referenzmarken sollte sichergestellt werden, dass das Farbschema den ästhetischen Standards der Branche entspricht.

Wählen Sie eine Schriftkombination:

Schriftart für den Titel: Wählen Sie eine Schriftart, die zum Design und zur Markenidentität passt (z. B. wirken Serifenschriften elegant, serifenlose Schriften modern).

Schriftart für den Fließtext: Eine gut lesbare Schriftart, die einen differenzierten Kontrast zu den Überschriften erzeugt.

Vermeiden Sie die Verwendung allzu häufiger Systemschriftarten (wie Arial und SimSun).

Layoutprinzipien definieren:

Strategie der Gestaltung mit viel Weißraum: Ausreichend Weißraum vermittelt ein Gefühl von Eleganz und vermeidet eine Informationsüberflutung.

Rastersystem: Verwendet ein regelmäßiges Rasterlayout, um die visuelle Ordnung aufrechtzuerhalten.

Ausrichtung: Bevorzugen Sie linksbündige oder zentrierte Ausrichtung und vermeiden Sie Blocksatz.

Bestimmen Sie den Animationsstil:

Parallaxe: Elemente auf verschiedenen Ebenen bewegen sich mit unterschiedlichen Geschwindigkeiten, wodurch ein Raumgefühl entsteht.

Einblendanimation: Der Inhalt erscheint beim Scrollen allmählich und in einem eleganten Rhythmus.

Mikroanimationen: Detaillierte Animationen wie Hover-Effekte und Button-Interaktionen erhöhen die Gesamtqualität.

Animationsdauer: Wird zwischen 0,3 und 0,8 Sekunden gesteuert, um zu schnelle oder zu langsame Animationen zu vermeiden.

Lernen Sie von den effektiven Motion-Graphics-Techniken führender Marken und vermeiden Sie die bereits identifizierten Designfallen.

Qualitätsstandards:

Das Farbschema entspricht dem Image der Marke, die Farben sind harmonisch und nicht grell.

Wählen Sie Schriftarten mit einer ansprechenden Designästhetik und vermeiden Sie billige oder veraltete Schriftarten.

Das Layout vermittelt ein starkes Gefühl von Weite, viel Weißraum und eine klare Informationshierarchie.

Die Bewegungseffekte sind zurückhaltend und dosiert und dienen eher der Erzählung als der Zurschaustellung technischer Fähigkeiten.

Das Stilsystem hält das gleiche Qualitätsniveau wie die herausragenden Beispiele in der Vergleichsstudie aufrecht.

Nachdem die Definition finalisiert wurde, bestätigen Sie dem Nutzer, ob er mit der Umsetzung zufrieden ist. Falls nicht, passen Sie die Definition anhand des Nutzerfeedbacks an, bis er zufrieden ist.

Schritt 4: Seitenstruktur und Interaktionsablauf entwerfen

Ziel: Die Gesamtstruktur und den Scroll-Interaktionsfluss der Seite so zu planen, dass ein flüssiger Erzählrhythmus gewährleistet ist.

Aktion:

Die Gesamtstruktur der Seite ist entworfen und umfasst die folgenden Module:

Eröffnungsmodul (Heldenabschnitt):

Markenname/Logo

Ein Markenslogan oder ein Kernkonzept in einem Satz

Visuelle Hinweise zur Unterstützung beim Scrollen (z. B. eine Animation eines nach unten zeigenden Pfeils).

Optional: Vollbild-Hintergrundvideo oder großes Bild

Erzählkapitelmodul (basierend auf den Knotenpunkten in Schritt 1):

Jeder Knoten entspricht einem unabhängigen visuellen Kapitel.

Die Übergänge zwischen den Kapiteln können durch Scrollen, Trennlinien, Leerzeichen oder Übergangsanimationen realisiert werden.

Jedes Kapitel enthält: Titel, Haupttext, Illustrationen/Bilder und gegebenenfalls Zeitstempel.

Zeitleistenmodul (optional, geeignet für Marken mit spezifischen Zeitabläufen):

Vertikale oder horizontale Zeitachse

Schlüsseljahr-/Datumsmarkierung

Ereignisbeschreibungen und dazugehörige Bilder zu jedem Zeitpunkt.

Produkt-/Meilenstein-Anzeigemodul:

Raster- oder Kartenlayout

Produktbilder + Kurzbeschreibung

Hover-Effekt: Vergrößern, mehr Informationen anzeigen usw.

Gründer-/Team-Story-Modul (falls zutreffend):

Fotos von Personen + Bildunterschriften

Sie können ein Split-Screen- oder ein Vollbild-Layout verwenden.

Schlussabschnitt:

Markenvision oder zukunftsorientiertes Texten

CTA-Buttons (z. B. „Mehr erfahren“, „Produkte entdecken“, „Kontaktieren Sie uns“)

Links zu sozialen Medien oder Kontaktinformationen

Planen Sie den interaktiven Scrollprozess:

Bestimmen Sie den Scroll-Triggerpunkt für jedes Modul (z. B. die Animation beim Scrollen auf 50 % des Viewports auslösen).

Designen Sie Übergangseffekte zwischen Modulen (Ein-/Ausblenden, Parallax-Scrolling, Elementverschiebung usw.).

Sorgen Sie für einen natürlichen Scrollrhythmus und vermeiden Sie übermäßig häufige Animationen, die zu visueller Ermüdung führen könnten.

Unter Bezugnahme auf die effektiven Interaktionsdesigns von Benchmark-Marken

Entwerfen Sie eine responsive Layoutstrategie (um eine gute Benutzererfahrung sowohl auf Desktop- als auch auf Mobilgeräten zu gewährleisten).

Qualitätsstandards:

Die Seitenstruktur ist logisch klar, und der Erzählfluss ist natürlich und flüssig.

Jedes Modul hat einen klaren visuellen Fokus, um Informationsüberflutung zu vermeiden.

Die Scrollinteraktion hat ein moderates Tempo, sodass sich die Benutzer weder abgehackt noch ermüdend fühlen.

Das responsive Design ist gut durchdacht und gewährleistet ein uneingeschränktes mobiles Erlebnis.

Schritt 5: Schreiben Sie die Anweisung zur Webseitengenerierung.

Ziel: Das visuelle Stilsystem und die Seitenstruktur in klare und detaillierte Anweisungen zur Webseitengenerierung zu übersetzen, damit das Tool generateWebpage diese ausführen kann.

Aktion:

Verfassen Sie strukturierte Anweisungen, die folgende Bestandteile enthalten:

1. Allgemeine Stilbeschreibung:

Beschreiben Sie den visuellen Stil detailliert in natürlicher Sprache (basierend auf dem Step 3-Stilsystem).

Beispiel: „Der zurückhaltende und elegante Stil erinnert an östliche Ästhetik. Der Hintergrund ist in einem sanften Off-White (#F9F7F2) gehalten, die Hauptfarben sind ein warmer Teeton (#8B7355) und ein zartes Rosa (#E8D5C4). Die Überschrift ist in einer Serifenschrift, der Fließtext in einer serifenlosen Schrift gesetzt. Großzügige Weißräume verleihen dem Text eine anspruchsvolle Wirkung. Die Animationen bestehen hauptsächlich aus Einblendungen und Parallax-Scrolling mit einem fließenden und eleganten Rhythmus.“

2. Beschreibung der Seitenstruktur:

Beschreiben Sie die Seitenstruktur in Modulreihenfolge.

Beispiel: „Die Seite beginnt mit einem bildschirmfüllenden Hero-Bereich, der Markenname und Slogan vor dem Hintergrund des Hauptbildes der Marke anzeigt und zum Scrollen auffordert. Darauf folgen vier narrative Abschnitte mit jeweils einem Titel, Fließtext und einem Bild in abwechselnd links-rechts angeordneten Spalten. Anschließend wird eine vertikale Zeitleiste präsentiert, die die Markenentwicklung veranschaulicht. Abschließend enthält ein Schlussmodul die Markenvision und einen Call-to-Action-Button.“

3. Interaktionsdetails:

Beschreiben Sie die wichtigsten interaktiven Effekte und Animationen.

Beispiel: „Beim Scrollen wird der Kapitelinhalt mit einer Einblendanimation eingeblendet. Hintergrundbilder scrollen langsamer und erzeugen so einen Parallaxeneffekt. Zeitleistenknoten werden beim Scrollen zu ihren entsprechenden Positionen hervorgehoben. Produktkarten vergrößern sich leicht und zeigen Schatten an, wenn man mit der Maus darüberfährt.“

4. Platzhalter für Inhalte:

Geben Sie klar an, welche Inhalte aus den vom Benutzer bereitgestellten Materialien extrahiert werden müssen.

Beispiel: „Der Markenname verwendet '{Brand Name}', der Slogan verwendet '{Brand Slogan}', der narrative Inhalt wird aus '{Brand Story Copy}' extrahiert, die Zeitleistenereignisse werden aus '{Milestone List}' extrahiert und die Produktbilder verwenden '{Product Image Resources}'.“

5. Hinweise zur technischen Umsetzung (optional):

Falls es besondere technische Anforderungen gibt, geben Sie bitte eine kurze Beschreibung an.

Beispiel: „Verwenden Sie die Intersection Observer API, um scrollgesteuerte Animationen zu implementieren. Verwenden Sie CSS Grid, um responsive Layouts zu implementieren.“

Qualitätsstandards:

Die Anweisungen sind klar und detailliert, sodass die KI die Designabsicht präzise verstehen kann.

Der visuelle Stil wird detailliert beschrieben (Farben haben Farbwerte, Schriftarten haben Typen und Animationen haben Dauern).

Durch klar definierte Inhaltsplatzhalter weiß die KI, wo sie Daten finden kann.

Die Gesamtlänge der Anleitung ist moderat (zu kurz und es fehlen Informationen, zu lang und es kann zu Missverständnissen kommen).

Ausgabe einer interaktiven Markenseite (HTML-Webseite):

Beinhaltet eine vollständige Markenstory.

Funktionen für Scrollinteraktion und Animationseffekte

Responsives Design, anpassbar an Desktop- und Mobilgeräte.

Der visuelle Stil entspricht den Standards von „hochwertig, elegant und minimalistisch“.

Inhaltsstruktur:

Heldenbereich (Eröffnungsmodul)

4-8 erzählende Kapitel

Zeitleisten-/Meilensteinmodul (falls zutreffend)

Produktanzeigemodul (falls zutreffend)

Gründer-/Team-Story-Modul (falls zutreffend)

Schlussabschnitt

Qualitätsstandards:

Visuelle Qualität: Harmonisches und anspruchsvolles Farbschema, passende Schriftart, klares und elegantes Layout sowie viel Weißraum.

Interaktives Erlebnis: Flüssiges Scrollen, natürliche und zurückhaltende Animationen, zeitnahe Reaktionszeiten und ein gutes mobiles Erlebnis.

Inhaltliche Vollständigkeit: Die Markengeschichte enthält wichtige Informationen, hat eine klare Erzähllogik und stimmt genau mit Text und Bildern überein.

Ästhetische Standards: Die Gesamtästhetik sollte ein Gefühl von Raffinesse, Eleganz und Schlichtheit vermitteln und Billigkeit oder übermäßige Verzierungen vermeiden.

Branchenvergleich: Die visuelle Qualität erreicht das gleiche Niveau wie bei Referenzmarken.

Stil und Präsentation

Ästhetische Grundprinzipien:

Ein Gefühl von Raffinesse: erzeugt durch zurückhaltende Farbgebung, exquisite Typografie, viel Weißraum und subtile Animationseffekte.

Eleganz: Ein harmonischer Rhythmus, natürliche Übergänge und der Verzicht auf abrupte oder harte visuelle Elemente.

Einfachheit: Durch den Verzicht auf unnötige Verzierungen hat jedes Element eine klare Funktion und Bedeutung.

Visuelle Referenzrichtung:

Offizielle Websites von High-End-Marken (wie Apple, Aesop, Muji)

Websites von Designmagazinen (wie zum Beispiel die preisgekrönten Arbeiten von It's Nice That und Awwwards)

Webseiten für Kunstausstellungen (mit Betonung auf Weißraum und visuellem Rhythmus)

Die in Schritt 2 untersuchten Benchmark-Marken-Websites

Zu vermeidende Stile:

Der überdekorierte und überladene „Taobao-Stil“

Der übertrieben auffällige, effekthascherische „Show-Style“

Die grelle Farbgebung und das chaotische Layout erzeugen eine „billige“ Ästhetik.

Der übermäßig konservative und einfallslos gestaltete „Schablonenstil“