Documentación del Proyecto

Este documento detalla el proceso creativo y técnico detrás del micro-sitio "Colonia de Aloe Vera", sirviendo como ejemplo para la clase de Diseño Digital y Publicidad.

1. El Proceso Creativo (La Idea)

El brief inicial era simple: crear una experiencia web interactiva para un producto ficticio, "Colonia de Aloe Vera". El objetivo era transmitir **frescura, naturaleza y un toque premium**.

Evolución del Concepto

Al principio, se consideró un enfoque familiar, pero para alinear mejor con una colonia de adulto, se reorientó hacia una **pareja joven**. Esto definió dos escenarios clave que vemos en las imágenes de marca:

Concept Art y Dirección de Arte

La dirección de arte se basó en el propio producto. Esta imagen de *concept art* fue la piedra angular para definir la paleta de colores y la estética general.

Concept art de la planta de Aloe Vera con paleta de colores

2. Teoría de Color y Paleta

Abandonamos la idea inicial de una paleta monocromática simple. El *concept art* nos mostró que la belleza del aloe radica en sus sutiles variaciones: desde verdes amarillentos hasta profundos verdes oscuros, con puntas de un vibrante naranja/rojizo.

Por lo tanto, la paleta final se basa en una teoría de **Análogos-Complementarios**:

Paleta Final (Definida en style.css)

Esto se traduce en nuestro CSS usando dos HUE principales y variaciones de luminosidad/saturación:

--color-bg-body (H 25, 15%, 50%)
--color-bg-card (H 90, 100%, 98%)
--color-green-light (H 90, 40%, 75%)
--color-green-medium (H 90, 55%, 45%)
--color-green-dark (H 90, 70%, 30%)
--color-warm-light (H 25, 70%, 70%)
--color-warm-dark (H 25, 70%, 50%)
--color-text-primary (H 90, 60%, 15%)
--color-text-secondary (H 25, 20%, 30%)

3. La Experiencia (El "Funnel" Interactivo)

La web se diseñó como un "funnel" (embudo) de 3 pasos que guía al usuario desde la curiosidad hasta el producto a través de la interacción.

Página 1 (index.html): La Atracción

El usuario aterriza en una escena minimalista. La interacción es doble:

Página 2 (juego.html): La Interacción (Gamificación)

En lugar de un simple enlace, el usuario debe "jugar" para encontrar el producto. Esto aumenta el *engagement*. El juego de las 6 puertas (.door) usa imágenes PNG transparentes (puerta_abierta.png, puerta_cerrada.png) para crear un efecto de revelación.

Página 3 (producto.html): La Recompensa

Tras ganar el juego, el usuario llega a la página del producto. Aquí, la imagen producto_real.jpg se muestra estática, mientras que el fondo del body se convierte en un carrusel (slideshow) dinámico con las imágenes de marca (la pareja, el hombre, la mujer), conectando el producto con las escenas de estilo de vida.

4. Estructura y Conceptos Técnicos

Estructura de Archivos

.
├── app.js               (JS para la hierba en index.html)
├── documentacion.html   (Este archivo)
├── images/
│   ├── boceto_con_paleta_color.jpg
│   ├── hombre_con_colonia.jpg
│   ├── logo.jpg
│   ├── logo_transparente.png
│   ├── mujer_con_colonia.jpg
│   ├── pareja_jugando_colonia.jpg
│   ├── producto_real.jpg
│   ├── puerta_abierta.png
│   ├── puerta_cerrada.png
│   └── tile_fondo_marca.jpg
├── index.html           (Página 1: Home/Hierba)
├── juego.html           (Página 2: Juego de puertas)
├── juego.js             (JS para la lógica del juego)
├── launch.sh            (Script para lanzar servidor Python)
├── producto.html        (Página 3: Producto final)
├── producto.js          (JS para el slideshow de fondo)
└── style.css            (Hoja de estilos ÚNICA para todas las páginas)

Conceptos Técnicos Clave

Animación de Hierba (app.js)

Juego de Puertas (juego.js)

Slideshow de Fondo (producto.js)


← Volver al inicio