Sitio web

Diseño web de restauración forestal

Explora Second Spring: una rama caída interactiva da paso a relatos del bosque, un plan de restauración y formas simuladas de colaborar.

OpenDesignDiseño y producción
Oficial
Campaña interactiva de conservación3 secciones
Diseño web de restauración forestal: introducción completa al bosque y tronco interactivo
DeepSeek V4.1 Flash · Ejemplo de evaluaciónCaptura de pantalla 1 de 3

LLM Arena sep. 2026

Notas del caso
Modelo
DeepSeek V4.1 Flash
Tarea de diseño
Crea Second Spring, una experiencia interactiva de restauración forestal con plantas que crecen al mover el puntero.
Resultado
Sitio web

Usos recomendados

  • Campañas de restauraciónConecta una apertura centrada en la naturaleza con una explicación concreta del proyecto.
  • Contenido editorial ambientalDa a cada relato de campo su propio espacio de lectura.
  • Prototipos para organizaciones sin ánimo de lucroPresenta con transparencia presupuestos de ejemplo y recorridos de participación locales.

Características destacadas

  • Un estudio de campo interactivoLa apertura presenta la rama como el objeto que se va a observar.
  • Cuatro diálogos con relatos específicosSuelo, agua, hongos y dosel se abren en vistas de lectura separadas.
  • Un plan de restauración visibleEl original distingue entre escala del proyecto, presupuesto y donaciones de ejemplo.

Un diseño web de restauración forestal centrado en la madera caída

Second Spring coloca una gran rama caída bajo un titular con serifas en dos líneas. Las hojas de los bordes y la lluvia rodean una zona central clara que deja espacio para el texto. La interfaz llama a la rama Field Study / 001 e invita a moverse por la madera. Así, el objeto se presenta como algo que examinar, no como una simple decoración de fondo para pedir donaciones.

La apertura separa el titular de una zona de interacción inferior. Touch grow mode, las indicaciones de teclado, el reinicio, la rotación, el movimiento reducido y Keep a moment rodean la escena. La etiqueta de reposo explica un estado tranquilo. Sin ella, un visitante podría confundir la ausencia de crecimiento con un fallo de interacción, especialmente antes de saber dónde mover el puntero.

La vista inicial completa presenta Second Spring y la rama caída como un estudio de campo interactivo.
La vista inicial completa presenta Second Spring y la rama caída como un estudio de campo interactivo.

Un objeto con una función editorial

La madera caída aparece primero como una gran forma con textura y después como el tema del relato Soil. Esta repetición conecta un objeto visible con la explicación del hábitat y la descomposición. La página tiene un punto de partida más concreto que una fotografía genérica del bosque acompañada de una petición abstracta de ayuda a la naturaleza.

Controles distintos para necesidades distintas

La rotación y la reducción del movimiento son controles separados. Uno cambia la forma de examinar el objeto; el otro regula la cantidad de movimiento de la experiencia. El original también muestra indicaciones para las flechas y Space. Estas etiquetas son pistas útiles de interacción, aunque afirmar una accesibilidad completa por teclado exigiría probar todos los estados de foco y entrada.

Un momento, no un resultado duradero de restauración

La interacción describe un crecimiento que sigue la atención y luego se desvanece. Keep a moment es una acción de captura separada, por lo que el diseño distingue una escena temporal de una imagen guardada. Ni el crecimiento visual ni una tarjeta exportada demuestran una restauración real del hábitat; la sección posterior de la campaña necesita su propia explicación.

Separa la escala de restauración, el presupuesto y las donaciones de ejemplo

La sección de cuidados indica una escala de proyecto de 20 hectáreas durante tres años y luego muestra 32.450 £ frente a un objetivo ilustrativo de restauración de 60.000 £. Son tipos de información diferentes: el primero describe una superficie y un periodo imaginarios, mientras que el segundo representa un estado de financiación de ejemplo. La página no establece que un porcentaje del dinero equivalga al mismo porcentaje de terreno restaurado.

Tres botones de donación relacionan importes con hábitat, plantones y trabajo de campo. Al abrir una donación se explica que los costes son orientativos y que las aportaciones sostienen un presupuesto común. Esto evita que una etiqueta atractiva que asocia una cantidad con una actividad se convierta, sin explicación, en la promesa de que un pago compra un resultado con seguimiento individual.

La composición completa de la parte inferior conecta cuatro relatos de campo con el objetivo de restauración, las donaciones simuladas y la explicación del método.
La composición completa de la parte inferior conecta cuatro relatos de campo con el objetivo de restauración, las donaciones simuladas y la explicación del método.
El presupuesto ilustrativo de 60.000 £ del original
CategoríaImporteQué hace visible
Trabajo de campo30.000 £La mano de obra se trata como una parte sustancial de la restauración, no como un gasto indirecto invisible.
Plantas y cuidados posteriores15.000 £La plantación se acompaña de cuidados posteriores en lugar de presentarse como todo el proyecto.
Seguimiento9.000 £La observación continúa después de la intervención inicial.
Coordinación6.000 £El plan incluye tanto organizar el trabajo como llevarlo a cabo.

Usa diálogos de relatos de campo para mantener breve la página principal

Soil, Water, Fungi y Canopy aparecen como cuatro enlaces numerados junto a Nothing grows alone. Cada uno abre un diálogo independiente con un relato de campo, en lugar de desplegar un párrafo dentro del diseño principal. La vista Soil explica cómo la madera caída aporta materia orgánica y después enumera la cobertura del suelo, la compactación y la actividad de los invertebrados como observaciones para el equipo de campo ficticio.

Esta elección mantiene compacto el recorrido principal, pero las explicaciones requieren una acción adicional. Un visitante que pase de largo por las cuatro etiquetas no leerá los detalles. Por tanto, la breve introducción visible debe dar motivos para abrir los enlaces; la página no puede asumir que el contenido detallado de los diálogos ya se ha consultado.

  1. Pasa de la escena a una pregunta concreta

    La rama caída conduce de forma natural al relato Soil. Water aborda la humedad y la escorrentía, Fungi trata la descomposición y Canopy introduce el tiempo, la luz y la supervivencia de las plántulas. Los cuatro temas amplían la perspectiva progresivamente sin abandonar el objeto que dio su enfoque a la apertura.

  2. Vuelve al mismo recorrido de lectura

    Cada relato ofrece Return to the forest. Mantener la explicación en un diálogo permite volver a la breve página principal en lugar de regresar desde otra URL. El control de regreso debe seguir siendo evidente, especialmente al abrir un relato en una pantalla estrecha.

  3. Explica el plan antes del pie de página

    How this imagined project works es una explicación desplegable independiente situada bajo las opciones de cuidado. Prioriza conservar la madera muerta y los árboles existentes, después la regeneración natural y la plantación donde haga falta. El presupuesto y el aviso sobre el proceso simulado aparecen en esta explicación, aportando a los botones de participación un contexto que va más allá de sus precios.

Qué incluye este prototipo ficticio de restauración

El archivo proporcionado incluye una escena natural local, diálogos con relatos de campo, diálogos de aportaciones ilustrativas y una inscripción simulada de voluntariado. Los importes de apoyo, el presupuesto, la escala del proyecto y la fecha del evento son ejemplos ficticios, no resultados verificados de recaudación o restauración. No se cobra ningún pago ni hay un servicio de correo conectado. El identificador del modelo se conserva tal como figura en el nombre del archivo subido, sin convertirlo en una afirmación no verificada sobre el proveedor o la versión.

Cómo crear un diseño web de restauración forestal en OpenDesign

  1. Descargar e instalar OpenDesign

    Descarga la aplicación de escritorio, instálala y completa la configuración. Crea un proyecto para tu diseño.

    Descargar OpenDesign
  2. Conecta la rama con el recorrido de lectura

    Define qué ve el visitante, qué puede cambiar y qué aprende después. Haz que el primer relato de campo explique la misma madera caída que aparece en la escena inicial. Mantén el titular separado de las instrucciones de interacción más detalladas.

    Prompt sugerido

    Crea un diseño web de restauración forestal para una campaña ficticia llamada Second Spring. Usa una composición editorial clara y empapada de lluvia, con bordes de hojas, un titular con serifas en dos líneas y una gran rama caída presentada como Estudio de campo 001. La interacción con el puntero debe generar crecimiento temporal sobre la madera. Incluye controles para reiniciar, rotar, reducir el movimiento y capturar la escena, con instrucciones de teclado legibles. Debajo, muestra cuatro enlaces numerados para Suelo, Agua, Hongos y Dosel; cada uno debe abrir un diálogo centrado en su relato, con una acción clara para volver. Añade una sección de cuidados compacta que separe la superficie y duración ilustrativas del proyecto de un objetivo de financiación de ejemplo. Incluye tres opciones de donación simulada y una explicación desplegable del presupuesto común y el método de restauración. Mantén todas las aportaciones y respuestas de voluntariado en el entorno local. No equipares el crecimiento en pantalla ni el progreso de financiación con hábitats realmente restaurados.

  3. Aclara la unidad de cada cifra

    Lee por separado la superficie, la duración, el objetivo de financiación y las etiquetas de donación. Comprueba que cada cifra tenga una unidad y que el carácter ficticio sea visible antes de confirmar cualquier acción. La explicación ampliada del método debe describir el trabajo financiado en común, no prometer un resultado medido individualmente para cada botón.

  4. Prueba el recorrido completo de apertura y regreso

    Abre cada relato de campo, vuelve a la página, abre una donación y ciérrala sin confirmar. Repite el proceso en una pantalla estrecha. Después, comprueba la vista con movimiento reducido: la lectura principal y la explicación de cómo participar deben seguir disponibles sin depender de la animación de la rama.

  5. Exportar y obtener un enlace para compartir

    Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.

OpenDesign Desktop

Un sistema de diseño. Tu marca, coherente en cada resultado

En el Vibe Design Workspace completo, aplica las mismas reglas de marca a sitios web, presentaciones, prototipos interactivos, dashboards, imágenes y vídeo HTML. Conecta Codex, Claude Code, Cursor y otros agentes de código locales y crea gratis.

  • Web, presentaciones, prototipos, dashboards, imágenes y vídeo
  • Más de 140 sistemas de diseño y la biblioteca completa de plantillas y skills
  • Codex local y más de 21 agentes de código · Gratis
Descargar gratis

Disponible para macOS y Windows