Skip to content
Un olivo joven en una maceta blanca sobre una mesa verde pálido, contra una pared rosa suave.
#web

Olea Sacra

Web narrativa y tienda online

> for olea sacraweb · 2017
01· el proyecto
> Desarrollado para Olea Sacra.

Una historia contada por capítulos.

Olea Sacra regala olivos nacidos de esquejes de un olivo joven enviado desde el Huerto de Getsemaní, a cambio de un donativo a los franciscanos que cuidan de Tierra Santa. Su web tenía que contar esa historia antes de pedir nada.

La hicimos en siete capítulos, cada uno una pantalla completa con su propio color, una cita y paneles que se abren sobre cartas, fotos y documentos, con transiciones animadas de un capítulo al siguiente. El último capítulo es la tienda: elegir cuántos olivos y cuánto donar, pagar con tarjeta o transferencia y seguir el pedido por email hasta que el olivo llega con su certificado de origen. Detrás, un panel para pedidos, facturas y envíos.

> cat /works/olea-sacra.md
TIPOWEB
CLIENTEOLEA SACRA
AÑO2017
construido con
  • Ruby on Rails
  • React
  • MongoDB
  • PayPal
  • SendGrid
  • Docker
#web
02· en cifras
7> capítulos
4> emails del pedido a la entrega
2> formas de pago: tarjeta y transferencia
03· cómo funciona
El capítulo uno en verde pálido: "Ocho olivos milenarios viven en el huerto de Getsemaní", con "Olivos santos" en letras grandes abajo.
01

Leer

Siete capítulos, cada uno con su cita y paneles que se abren sobre cartas y fotos.

El capítulo cuatro en amarillo: "Un olivo joven descendiente de los olivos santos de Getsemaní", con una rama de olivo dibujada a línea.
02

Avanzar

Transiciones animadas llevan de un capítulo al siguiente.

La página de compra en escritorio: "Comprar un olivo", la foto del árbol, cuántos olivos y el donativo a elegir.
03

Donar

Se eligen los olivos y el donativo, con tarjeta o transferencia.

La misma página de compra en el móvil.
04

Seguir

Los emails acompañan el pedido del pago a la entrega.

04· créditos
for olea sacra. DESIGN - WEB - E-COMMERCE. 2017

¿Tienes algo parecido entre manos? Cuéntanos qué necesitas.

05· siguiente proyecto
> cd /works/las-lomas-de-denia
Las Lomas de Denia> Web
> navbar collapsed · scroll to the end
Crowtec