Landing page ecológica a medida

Project Gallery

Maqueta de página completa de un sitio ecológico diseñado en Figma, con sección hero de energía sostenible, tarjetas de contenido modulares redondeadas y una jerarquía visual centrada en la conservación ambiental.
Maqueta minimalista de página de inicio ecológica diseñada en Figma, con identidad de energía solar y tonos verdes orgánicos.

El encargo

Una empresa de energía sostenible llegó con una landing que hacía justo lo contrario de lo que su marca defiende. Era densa, ruidosa y estaba construida sobre los mismos patrones agresivos de cualquier plantilla de conversión: banners apilados, llamadas a la acción compitiendo entre sí, casi nada de aire.

Su producto habla de calma y de pensar a largo plazo. La página parecía un anuncio de descuentos. Esa distancia era el problema real que había que resolver, no lo visual.

Cómo lo abordé

Traté el espacio en blanco como la herramienta principal de diseño, no como lo que sobra. En vez de preguntarme cuánto cabía antes del primer scroll, me pregunté qué tenía que conseguir cada sección y quité todo lo que no servía a eso.

Tres decisiones cargaron con casi todo el peso:

Una paleta contenida. Verdes bosque y neutros cálidos, con un solo acento reservado para las acciones. Limitar la paleta hace que la llamada a la acción no necesite gritar para encontrarse.

Un sistema modular de tarjetas. En lugar de un maquetado a medida por sección, construí un conjunto pequeño de tarjetas reutilizables con esquinas suaves y espaciado consistente. Eso da profundidad sin ruido visual, y permite añadir secciones después sin que el diseño se desarme.

Tipografía con aire. Una escala tipográfica clara con interlineado generoso, para que la experiencia de lectura coincida con el tono que la marca vende.

Maqueta de página completa de un sitio ecológico diseñado en Figma, con sección hero de energía sostenible, tarjetas de contenido modulares redondeadas y una jerarquía visual centrada en la conservación ambiental.

Pensado para la entrega

Todo el maquetado se produjo en Figma con componentes y auto layout, no como mockups planos. Cada tarjeta, botón y sección es un componente reutilizable con sus estados definidos, así que quien lo construya recibe tokens de espaciado y variantes en vez de tener que adivinar.

También dejé especificada la ruta de exportación desde el principio: imágenes en WebP, dimensionadas al tamaño real en que se muestran. Una página sobre eficiencia energética que sirve imágenes de varios megabytes contradice su propio mensaje, y ese peso menor es la diferencia entre una página rápida y una lenta en conexiones móviles.

Qué consigue

El resultado es una página que se lee sin esfuerzo. La jerarquía lleva de la propuesta de valor a la oferta solar y al formulario de contacto en una sola pasada, y la biblioteca de componentes permite que la marca haga crecer el sitio sin encargar un rediseño cada vez.

¿Necesitas una landing que refleje tu producto?

Diseño y construyo páginas que siguen siendo legibles a medida que crecen, con un sistema de componentes que tu equipo de desarrollo pueda usar de verdad. Hablemos de qué necesita la tuya.

¿Tienes un proyecto en mente? Trabajemos juntos.