Website

Website-Design für Waldrenaturierung

Entdecken Sie Second Spring, wo ein interaktiver umgestürzter Ast zu Feldgeschichten über den Wald, einem Renaturierungsplan und simulierten Möglichkeiten zur Unterstützung führt.

OpenDesignDesign und Produktion
Offiziell
Interaktive Naturschutzkampagne3 Abschnitte
Website-Design für Waldrenaturierung: vollständige Waldeinführung und lebender Baumstamm
DeepSeek V4.1 Flash · EvaluierungsbeispielScreenshot 1 von 3

LLM Arena Sep 2026

Fallnotizen
Modell
DeepSeek V4.1 Flash
Design-Aufgabe
Erstellen Sie Second Spring, ein interaktives Erlebnis zur Waldrenaturierung mit Pflanzen, die durch Zeigerbewegungen wachsen.
Ausgabe
Website

Geeignet für

  • RenaturierungskampagnenVerknüpfen Sie einen naturbezogenen Einstieg mit einer konkreten Projekterklärung.
  • Redaktionelle UmweltinhalteGeben Sie einzelnen Feldgeschichten einen eigenen, fokussierten Lesebereich.
  • Prototypen für gemeinnützige OrganisationenStellen Sie beispielhafte Budgets und lokale Beteiligungsabläufe transparent dar.

Wichtige Merkmale

  • Eine lebendige FeldstudieDer Einstieg kennzeichnet den Ast als Gegenstand der Beobachtung.
  • Vier fokussierte Dialoge mit FeldgeschichtenBoden, Wasser, Pilze und Kronendach öffnen sich als separate Leseansichten.
  • Ein sichtbarer RenaturierungsplanDie Vorlage unterscheidet zwischen Projektumfang, Budget und Beispielspenden.

Ein Website-Design für Waldrenaturierung mit Totholz im Mittelpunkt

Second Spring platziert einen großen umgestürzten Ast unter einer zweizeiligen Serifenschrift-Überschrift. Belaubte Ränder und Regen umgeben einen hellen zentralen Bereich und lassen Raum für den Text. Die Benutzeroberfläche bezeichnet den Ast als Field Study / 001 und lädt dazu ein, sich über das Holz zu bewegen. Durch diese Rahmung wird das Objekt zu etwas, das untersucht werden soll, und nicht bloß zur Hintergrunddekoration eines Spendenaufrufs.

Der Einstieg trennt die Überschrift von einem darunterliegenden Interaktionsbereich. Touch grow mode, Tastaturhinweise, Zurücksetzen, Drehen, reduzierte Bewegung und Keep a moment sind um die Szene herum angeordnet. Die Ruheanzeige erläutert einen stillen Zustand. Ohne sie könnten Besucher das ausbleibende Wachstum für eine fehlgeschlagene Interaktion halten, insbesondere bevor sie erfahren, wohin sie den Zeiger bewegen sollen.

Die vollständige Einstiegsansicht stellt Second Spring und den umgestürzten Ast als interaktive Feldstudie vor.
Die vollständige Einstiegsansicht stellt Second Spring und den umgestürzten Ast als interaktive Feldstudie vor.

Ein Objekt mit redaktioneller Funktion

Das umgestürzte Holz erscheint zunächst als große, strukturierte Form und später als Gegenstand der Geschichte Soil. Diese Wiederholung verknüpft ein sichtbares Objekt mit der Erklärung von Lebensraum und Zersetzung. Die Seite hat damit einen spezifischeren Ausgangspunkt als ein allgemeines Waldfoto, das mit einem abstrakten Aufruf zum Schutz der Natur kombiniert wird.

Unterschiedliche Steuerelemente für unterschiedliche Anforderungen

Drehen und reduzierte Bewegung sind separate Steuerelemente. Das eine verändert, wie das Objekt untersucht wird; das andere betrifft das Ausmaß der Bewegung innerhalb des Erlebnisses. Die Vorlage zeigt außerdem Hinweise zu Pfeiltasten und Leertaste (Space). Diese Beschriftungen sind hilfreiche Interaktionshinweise, doch die Behauptung einer vollständigen Tastaturzugänglichkeit würde Tests sämtlicher Fokus- und Eingabezustände erfordern.

Ein Moment, kein dauerhaftes Renaturierungsergebnis

Die Interaktion beschreibt Wachstum, das der Aufmerksamkeit folgt und später wieder verblasst. Keep a moment ist eine separate Aufnahmeaktion, sodass das Design zwischen einer vorübergehenden Szene und einem gespeicherten Bild unterscheidet. Weder das visuelle Wachstum noch eine exportierte Karte belegen eine tatsächliche Wiederherstellung von Lebensraum; der spätere Kampagnenabschnitt benötigt dafür eine eigene Erklärung.

Renaturierungsumfang, Budget und Beispielspenden voneinander trennen

Der Pflegeabschnitt nennt einen Projektumfang von 20 Hektar über drei Jahre und zeigt anschließend £32.450 im Verhältnis zu einem beispielhaften Renaturierungsziel von £60.000. Dabei handelt es sich um unterschiedliche Arten von Informationen: Die erste Angabe beschreibt eine erdachte Fläche und einen Zeitraum, während die zweite einen beispielhaften Finanzierungsstand beschreibt. Die Seite belegt nicht, dass ein bestimmter Prozentsatz des Geldes bedeutet, dass derselbe Prozentsatz der Fläche renaturiert wurde.

Drei Spendenschaltflächen verknüpfen Beträge mit Lebensraum, Setzlingen und Feldarbeit. Beim Öffnen einer Spendenoption wird erklärt, dass die Kosten Richtwerte sind und die Beiträge ein gemeinsames Budget unterstützen. So wird verhindert, dass eine ansprechende Verknüpfung von Betrag und Maßnahme stillschweigend zu dem Versprechen wird, eine einzelne Zahlung finanziere ein separat nachverfolgtes Ergebnis.

Die vollständige Komposition des unteren Seitenbereichs verknüpft vier Links zu Feldgeschichten mit dem Renaturierungsziel, simulierten Spenden und der Erläuterung der Methode.
Die vollständige Komposition des unteren Seitenbereichs verknüpft vier Links zu Feldgeschichten mit dem Renaturierungsziel, simulierten Spenden und der Erläuterung der Methode.
Das beispielhafte Budget von £60.000 aus der Vorlage
KategorieBetragWas dadurch sichtbar wird
Feldarbeit£30.000Arbeitsleistung wird als wesentlicher Bestandteil der Renaturierung behandelt und nicht als unsichtbarer Gemeinkostenposten.
Pflanzen und Nachsorge£15.000Die Pflanzung wird mit anschließender Pflege verbunden, statt als das gesamte Projekt dargestellt zu werden.
Monitoring£9.000Die Beobachtung wird nach dem anfänglichen Eingriff fortgesetzt.
Koordination£6.000Der Plan umfasst neben der Durchführung auch die Organisation der Arbeiten.

Mit Dialogen für Feldgeschichten die Hauptseite kurz halten

Soil, Water, Fungi und Canopy erscheinen als vier nummerierte Links neben Nothing grows alone. Jeder Link öffnet einen separaten Dialog mit einer Feldgeschichte, statt einen Absatz im Hauptlayout aufzuklappen. Die Ansicht Soil erklärt, wie umgestürztes Holz organisches Material beiträgt, und nennt anschließend Bodenbedeckung, Verdichtung und die Aktivität wirbelloser Tiere als Beobachtungspunkte für das fiktive Feldteam.

Diese Entscheidung hält den Hauptablauf kompakt, doch die Erklärungen sind erst nach einer Aktion zugänglich. Besucher, die an den vier Beschriftungen vorbeiscrollen, lesen die Details nicht. Die kurze sichtbare Einführung muss daher deutlich machen, dass sich das Öffnen der Links lohnt; die Seite darf nicht davon ausgehen, dass die in den Dialogen enthaltene Tiefe bereits wahrgenommen wurde.

  1. Von der Szene zu einer konkreten Frage gelangen

    Der umgestürzte Ast führt auf natürliche Weise zur Geschichte Soil. Water behandelt Feuchtigkeit und Oberflächenabfluss, Fungi die Zersetzung und Canopy führt die Themen Zeit, Licht und Überleben von Setzlingen ein. Die vier Themen erweitern die Perspektive schrittweise, ohne das Objekt aufzugeben, das dem Einstieg seinen Fokus verleiht.

  2. Zum selben Lesepfad zurückkehren

    Jede Geschichte bietet Return to the forest an. Da die Erklärung in einem Dialog bleibt, können Leser zur kurzen Hauptseite zurückkehren, statt von einer anderen URL zurücknavigieren zu müssen. Das Steuerelement zur Rückkehr muss gut erkennbar bleiben, insbesondere wenn die Geschichte auf einem schmalen Bildschirm geöffnet wird.

  3. Den Plan vor dem Footer erläutern

    How this imagined project works ist eine separate Erläuterung unterhalb der Pflegeoptionen. Sie priorisiert den Erhalt von Totholz und bestehenden Bäumen, anschließend die natürliche Regeneration und, wo nötig, Pflanzungen. Der Hinweis zum Budget und zum simulierten Ablauf erscheint in dieser Erklärung und gibt den Beteiligungsschaltflächen einen Kontext, der über ihre Preise hinausgeht.

Was dieser fiktive Renaturierungsprototyp umfasst

Die bereitgestellte Datei enthält eine lokale Naturszene, Dialoge mit Feldgeschichten, Dialoge zu beispielhaften Beiträgen und eine simulierte Anmeldung für Freiwillige. Die Unterstützungsbeträge, das Budget, der Projektumfang und das Veranstaltungsdatum sind fiktive Beispiele und keine verifizierten Ergebnisse einer Spendenkampagne oder Renaturierung. Es wird keine Zahlung eingezogen und kein E-Mail-Dienst ist angebunden. Das Modell-Token wurde aus dem Namen der hochgeladenen Datei übernommen und nicht zu einer unbelegten Angabe über Anbieter oder Version erweitert.

So erstellen Sie in OpenDesign ein Website-Design für Waldrenaturierung

  1. OpenDesign herunterladen und installieren

    Desktop-App herunterladen, installieren und Einrichtung abschließen. Ein Projekt für das Design anlegen.

    OpenDesign herunterladen
  2. Den Ast mit der Lesesequenz verknüpfen

    Legen Sie fest, was Besucher sehen, was sie verändern können und was sie als Nächstes erfahren. Die erste Feldgeschichte sollte dasselbe umgestürzte Holz erklären, das in der Eröffnungsszene verwendet wird. Halten Sie die Überschrift von den ausführlicheren Interaktionsanweisungen getrennt.

    Vorgeschlagener Prompt

    Erstelle für eine fiktive Kampagne namens Second Spring ein Website-Design zur Waldrenaturierung. Verwende eine helle, regennasse redaktionelle Komposition mit belaubten Rändern, einer zweizeiligen Serifenschrift-Überschrift und einem großen umgestürzten Ast als Feldstudie 001. Lass durch Zeigerinteraktion vorübergehend Pflanzen auf dem Holz wachsen. Biete Steuerelemente zum Zurücksetzen, Drehen, Reduzieren von Bewegungen und Festhalten eines Moments sowie gut lesbare Tastaturhinweise. Zeige darunter vier nummerierte Links zu Boden, Wasser, Pilzen und Kronendach, die jeweils einen fokussierten Dialog mit einer Feldgeschichte und einer eindeutigen Rückkehraktion öffnen. Füge einen kompakten Pflegeabschnitt hinzu, der eine beispielhafte Projektfläche und Laufzeit von einem beispielhaften Finanzierungsziel trennt. Nimm drei simulierte Spendenoptionen und einen Hinweis auf, der das gemeinsame Budget und die Renaturierungsmethode erläutert. Speichere alle Beiträge und Rückmeldungen von Freiwilligen ausschließlich lokal. Setze weder das auf dem Bildschirm dargestellte Wachstum noch den Finanzierungsfortschritt mit tatsächlich wiederhergestelltem Lebensraum gleich.

  3. Für jede Zahl die Einheit erläutern

    Lesen Sie die Angaben zu Fläche, Laufzeit, Finanzierungsziel und Spenden unabhängig voneinander. Prüfen Sie, ob jede Zahl eine Einheit hat und ob der fiktive Status vor jeder Bestätigung sichtbar ist. Die ausführliche Methodenerklärung sollte die gemeinschaftlich finanzierten Arbeiten erläutern und kein separat gemessenes Ergebnis für jede Schaltfläche versprechen.

  4. Den vollständigen Öffnungs- und Rückkehrablauf testen

    Öffnen Sie jede Feldgeschichte, kehren Sie zur Seite zurück, öffnen Sie eine Spendenoption und schließen Sie sie ohne Bestätigung. Wiederholen Sie dies auf einem schmalen Bildschirm. Prüfen Sie anschließend die Ansicht mit reduzierter Bewegung, damit die zentralen Leseinhalte und die Erläuterung zur Beteiligung auch ohne die Animation des Astes verfügbar bleiben.

  5. Exportieren und Share-Link erhalten

    Das fertige Design exportieren und anschließend über „Teilen" in OpenDesign einen Share-Link abrufen. Den Link in einem separaten Browserfenster öffnen und prüfen, ob die gewünschte Version sowie alle Assets vorhanden sind, bevor er weitergegeben wird.

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows