Markenstory-Website
Anweisungen
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“
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Diese Fähigkeit verwandelt Markengeschichten in ein immersives visuelles Magazin und schafft durch sorgfältiges Layout, elegante Animationen und flüssige Erzählung eine anspruchsvolle, minimalistische interaktive Webseite, die Nutzer die Markenfaszination tief erleben lässt.
Verwandeln Sie Markenstory-Texte und -Materialien in eine ästhetisch ansprechende, scrollbare Erzählwebseite, die durch visuelles Design und interaktive Effekte Markenwerte und Emotionen vermittelt.
Ä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.
Markenstory-Website
Anweisungen
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“
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Diese Fähigkeit verwandelt Markengeschichten in ein immersives visuelles Magazin und schafft durch sorgfältiges Layout, elegante Animationen und flüssige Erzählung eine anspruchsvolle, minimalistische interaktive Webseite, die Nutzer die Markenfaszination tief erleben lässt.
Verwandeln Sie Markenstory-Texte und -Materialien in eine ästhetisch ansprechende, scrollbare Erzählwebseite, die durch visuelles Design und interaktive Effekte Markenwerte und Emotionen vermittelt.
Ä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.