🎨 Schlicht-elegante Webseite
Anweisungen
Erstellen Sie eine Webseite basierend auf den vom Benutzer bereitgestellten Inhalten. Die Anforderungen an den Webseitenstil sind wie folgt:
### I. Visuelle Stilpositionierung – **Künstlerischer, handgezeichneter Stil**: Verwendung eines Linienkunststils, der modernes digitales Design mit traditioneller, handgezeichneter Ästhetik verbindet. – **Farbschema**: Verwendung neutraler Farben (Cremeweiß/Hellgrau) als Basis, kombiniert mit dunkelgrauem Haupttext und Orangerot (Akzentfarbe) als visueller Fokus. – **Markenton**: Raffiniert, künstlerisch und warm, für eine anspruchsvolle Zielgruppe. ### II. Layout-Strukturprinzipien **Hero-Bereich (Design des ersten Bildschirms)** - Links-Rechts-Spaltenlayout (60:40 Goldener Schnitt) - Linke Seite: - Übergroßer Titel (Display-Schriftart, 72-96px), dunkle Schrift, starke visuelle Wirkung - Wichtige Daten in Akzentfarbe hervorgehoben (z. B. „15 Städte, 4749 Standorte“) - Prägnanter und aussagekräftiger Untertitel, der das zentrale Wertversprechen darlegt - Viel Weißraum für ein hochwertiges Erscheinungsbild - Rechte Seite: - Individuelle, handgezeichnete Illustrationen, die 50 % des visuellen Raums einnehmen - Einheitlicher Illustrationsstil: Strichzeichnung + lokale Farbakzente - Illustrationsinhalte eng mit der Markengeschichte verknüpft - **Design der Navigationsleiste** - Minimalistische Top-Navigation, feste Positionierung - Logo + 2-3 Hauptmenüpunkte - Symbolgruppe rechts (Suche/Favoriten/Menü) - Transparenter oder reinweißer Hintergrund mit dezenten Schatten - **Bereich der Inhaltskarten** - Kartenraster-Layout (3-4 Spalten, responsiv) - Jede Karte enthält: - Titel (Überschrift 3, 32–40 px) – Beschreibung (2–3 Zeilen, 16–18 px, Zeilenhöhe 1,6) – Begleitende handgezeichnete Illustration (passend zum visuellen Hauptstil) – Heller Hintergrund (#F5F3F0), abgerundete Ecken (8–12 px) – Hover-Effekt: Leicht ansteigend + vertiefter Schatten – ### III. Spezifikationen des Illustrationssystems **Richtlinien für die Illustrationserstellung** 1. 2. **Linienverarbeitung**: – Verwenden Sie 1–2 px lange, unregelmäßige, handgezeichnete Linien, um eine realistische Malstruktur zu simulieren. – Achten Sie auf glatte Linien mit einem Hauch von Künstlichkeit und vermeiden Sie übermäßige Mechanischeität. 3. **Farbverwendung:** - 80 % graue Linien + 20 % Markenfarbe - Orangerot wird nur zur Hervorhebung von Elementen (Personen, Fenster, wichtige Gebäude) verwendet - Hintergrund mit beigem Farbverlauf (#FDFBF7 → #F5F1EB) - 5. **Szenenkomposition:** - Stadtszenen: Kombination von markanten Gebäuden und Alltagsszenen - Draufsicht oder isometrische Perspektive - Hinzufügen kleiner Figuren zur Verstärkung der Erzählung und Schaffung von Nähe - 7. **Detaildichte:** - Detailreicher Vordergrund, leicht vereinfachter Mittelgrund und umrissener Hintergrund - Beibehaltung der visuellen Hierarchie, um den Blick auf wichtige Informationen zu lenken - 9. ### IV. Schriftartsystem – **Schriftart (Titel):** Serifenschrift, fett und ausdrucksstark (z. B. Freight Display, Tiempos) – **Schriftart (Textkörper):** Serifenlose Schrift, gut lesbar (z. B. Inter, Manrope) – **Schriftgrößenverhältnis:** Modulares Skalierungsmodell (1,25 oder 1,333) – **Schriftstärken:** Light (300) / Regular (400) / Medium (500) / Bold (700) – ### V. Interaktionsdetails – **Mikroanimationen:** Karten heben sich beim Überfahren mit der Maus um 4–8 Pixel an, Übergangszeit 300–400 ms – **Ladestatus:** Geschütztes Layout für einheitliches Branding – **Responsive Breakpoints:** Desktop: ab 1440 Pixel – Tablet: 768–1439 Pixel – Mobilgerät: 375-767px - - ### VI. Anforderungen an die Designausgabe Jede Designausgabe sollte Folgendes beinhalten: 1. 2. Klare visuelle Hierarchie (erreicht durch Größe/Farbe/Weißraum) 3. 4. Mindestens eine individuelle Illustration (eng mit dem Inhalt verbunden, erstellt mit Nano Banana Pro) 5. 6. 2-3 Akzentfarben (maximal 7). 8. Ausreichend Freiraum (Abstandsabstand ≥ 120px) 9. 10. Klare Benutzerführung 11. --- **Designphilosophie**: Verwenden Sie eine künstlerische Bildsprache, um die Einzigartigkeit und Wärme der Marke zu vermitteln. Jedes Pixel erzählt eine Geschichte und dient nicht nur der Darstellung von Funktionalität. Das Design soll den Nutzern das Gefühl vermitteln: „Das ist für Menschen, die das Leben schätzen“, und nicht das Gefühl vermitteln, ein kaltes, kommerzielles Produkt zu sein.
Die Illustrationen auf der Webseite wurden alle mit Nano Banana Pro erstellt.
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Mit dieser Fertigkeit können Sie Ihre Inhalte in eine schlichte, elegante, handgezeichnete Kunst-Webseite verwandeln, die modernes digitales Design mit traditioneller Ästhetik vereint. Sie generiert intelligent maßgeschneiderte Illustrationen nach Ihren Anforderungen und verwendet ein raffiniertes Farb- und Schriftartensystem, um eine Webseite voller künstlerischem Flair und Markenwärme zu schaffen, die Ihr Produkt oder Ihre Dienstleistung visuell hervorhebt.
Verwandeln Sie Ihre Inhalte in eine künstlerisch handgezeichnete Webseite. Feine Linienillustrationen und abgestimmte Farben verleihen Ihren Inhalten Wärme und Stil.
Ä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.
🎨 Schlicht-elegante Webseite
Anweisungen
Erstellen Sie eine Webseite basierend auf den vom Benutzer bereitgestellten Inhalten. Die Anforderungen an den Webseitenstil sind wie folgt:
### I. Visuelle Stilpositionierung – **Künstlerischer, handgezeichneter Stil**: Verwendung eines Linienkunststils, der modernes digitales Design mit traditioneller, handgezeichneter Ästhetik verbindet. – **Farbschema**: Verwendung neutraler Farben (Cremeweiß/Hellgrau) als Basis, kombiniert mit dunkelgrauem Haupttext und Orangerot (Akzentfarbe) als visueller Fokus. – **Markenton**: Raffiniert, künstlerisch und warm, für eine anspruchsvolle Zielgruppe. ### II. Layout-Strukturprinzipien **Hero-Bereich (Design des ersten Bildschirms)** - Links-Rechts-Spaltenlayout (60:40 Goldener Schnitt) - Linke Seite: - Übergroßer Titel (Display-Schriftart, 72-96px), dunkle Schrift, starke visuelle Wirkung - Wichtige Daten in Akzentfarbe hervorgehoben (z. B. „15 Städte, 4749 Standorte“) - Prägnanter und aussagekräftiger Untertitel, der das zentrale Wertversprechen darlegt - Viel Weißraum für ein hochwertiges Erscheinungsbild - Rechte Seite: - Individuelle, handgezeichnete Illustrationen, die 50 % des visuellen Raums einnehmen - Einheitlicher Illustrationsstil: Strichzeichnung + lokale Farbakzente - Illustrationsinhalte eng mit der Markengeschichte verknüpft - **Design der Navigationsleiste** - Minimalistische Top-Navigation, feste Positionierung - Logo + 2-3 Hauptmenüpunkte - Symbolgruppe rechts (Suche/Favoriten/Menü) - Transparenter oder reinweißer Hintergrund mit dezenten Schatten - **Bereich der Inhaltskarten** - Kartenraster-Layout (3-4 Spalten, responsiv) - Jede Karte enthält: - Titel (Überschrift 3, 32–40 px) – Beschreibung (2–3 Zeilen, 16–18 px, Zeilenhöhe 1,6) – Begleitende handgezeichnete Illustration (passend zum visuellen Hauptstil) – Heller Hintergrund (#F5F3F0), abgerundete Ecken (8–12 px) – Hover-Effekt: Leicht ansteigend + vertiefter Schatten – ### III. Spezifikationen des Illustrationssystems **Richtlinien für die Illustrationserstellung** 1. 2. **Linienverarbeitung**: – Verwenden Sie 1–2 px lange, unregelmäßige, handgezeichnete Linien, um eine realistische Malstruktur zu simulieren. – Achten Sie auf glatte Linien mit einem Hauch von Künstlichkeit und vermeiden Sie übermäßige Mechanischeität. 3. **Farbverwendung:** - 80 % graue Linien + 20 % Markenfarbe - Orangerot wird nur zur Hervorhebung von Elementen (Personen, Fenster, wichtige Gebäude) verwendet - Hintergrund mit beigem Farbverlauf (#FDFBF7 → #F5F1EB) - 5. **Szenenkomposition:** - Stadtszenen: Kombination von markanten Gebäuden und Alltagsszenen - Draufsicht oder isometrische Perspektive - Hinzufügen kleiner Figuren zur Verstärkung der Erzählung und Schaffung von Nähe - 7. **Detaildichte:** - Detailreicher Vordergrund, leicht vereinfachter Mittelgrund und umrissener Hintergrund - Beibehaltung der visuellen Hierarchie, um den Blick auf wichtige Informationen zu lenken - 9. ### IV. Schriftartsystem – **Schriftart (Titel):** Serifenschrift, fett und ausdrucksstark (z. B. Freight Display, Tiempos) – **Schriftart (Textkörper):** Serifenlose Schrift, gut lesbar (z. B. Inter, Manrope) – **Schriftgrößenverhältnis:** Modulares Skalierungsmodell (1,25 oder 1,333) – **Schriftstärken:** Light (300) / Regular (400) / Medium (500) / Bold (700) – ### V. Interaktionsdetails – **Mikroanimationen:** Karten heben sich beim Überfahren mit der Maus um 4–8 Pixel an, Übergangszeit 300–400 ms – **Ladestatus:** Geschütztes Layout für einheitliches Branding – **Responsive Breakpoints:** Desktop: ab 1440 Pixel – Tablet: 768–1439 Pixel – Mobilgerät: 375-767px - - ### VI. Anforderungen an die Designausgabe Jede Designausgabe sollte Folgendes beinhalten: 1. 2. Klare visuelle Hierarchie (erreicht durch Größe/Farbe/Weißraum) 3. 4. Mindestens eine individuelle Illustration (eng mit dem Inhalt verbunden, erstellt mit Nano Banana Pro) 5. 6. 2-3 Akzentfarben (maximal 7). 8. Ausreichend Freiraum (Abstandsabstand ≥ 120px) 9. 10. Klare Benutzerführung 11. --- **Designphilosophie**: Verwenden Sie eine künstlerische Bildsprache, um die Einzigartigkeit und Wärme der Marke zu vermitteln. Jedes Pixel erzählt eine Geschichte und dient nicht nur der Darstellung von Funktionalität. Das Design soll den Nutzern das Gefühl vermitteln: „Das ist für Menschen, die das Leben schätzen“, und nicht das Gefühl vermitteln, ein kaltes, kommerzielles Produkt zu sein.
Die Illustrationen auf der Webseite wurden alle mit Nano Banana Pro erstellt.
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Mit dieser Fertigkeit können Sie Ihre Inhalte in eine schlichte, elegante, handgezeichnete Kunst-Webseite verwandeln, die modernes digitales Design mit traditioneller Ästhetik vereint. Sie generiert intelligent maßgeschneiderte Illustrationen nach Ihren Anforderungen und verwendet ein raffiniertes Farb- und Schriftartensystem, um eine Webseite voller künstlerischem Flair und Markenwärme zu schaffen, die Ihr Produkt oder Ihre Dienstleistung visuell hervorhebt.
Verwandeln Sie Ihre Inhalte in eine künstlerisch handgezeichnete Webseite. Feine Linienillustrationen und abgestimmte Farben verleihen Ihren Inhalten Wärme und Stil.
Ä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.