Diseñamos y construimos el sitio de Nelly Morales, profesional inmobiliaria en Caracas. En escritorio su portada no baja: ocho escenas a pantalla completa se relevan de lado mientras gira la rueda.
- Proyecto
- Sitio web inmobiliario en Caracas
- Encargo
- Diseño web, desarrollo y motion
- Idiomas
- Cinco idiomas, uno de derecha a izquierda
- Contenido
- Catálogo que edita la clienta
Un sitio inmobiliario pensado como relato antes que como catálogo.
El sitio presenta a una profesional y su manera de trabajar, con una selección de propiedades que ella misma mantiene. Por eso cada página se recorre con un gesto propio: la portada de lado y los servicios a mano.
Ocho escenas, tres costuras.
La portada de escritorio es una sola línea de tiempo atada a la rueda, con ocho capas a pantalla completa. Las unen tres tipos de costura: una capa cubre a la anterior, la desplaza a ras o se retira y descubre la que ya esperaba debajo. La primera, la cortina sobre el titular, se cierra sola cuando el lector recorre una décima parte de su distancia.
La foto ya estaba debajo.
El panel del método se aparta y detrás está la primera propiedad destacada, a toda la altura de la pantalla. Después se encoge hasta ser una ficha del carrusel, que se alimenta del catálogo.
Nueve páginas, pasadas a mano.
Los servicios son nueve páginas a pantalla completa, cada una con una palabra grande y una frase. La rueda y el teclado no las pasan, a propósito: hay que mantener presionado y arrastrar, o usar el único botón de la esquina.
Al soltar, decide un resorte.
Mantener presionado retira la imagen a un marco curvo con líneas de barrido. Arrastrar levanta la hoja por una esquina y la enrolla sobre su diagonal. Al soltarla, un resorte termina el giro si iba pasada la mitad o con velocidad, y si no la devuelve a su sitio.
Cinco idiomas, un solo catálogo.
El sitio se lee en español, inglés, ruso, chino y árabe. En árabe la página se invierte, y las escenas ancladas siguen de izquierda a derecha para que el recorrido no se rompa. La tipografía de los titulares solo cubre el alfabeto latino, así que cada escritura lleva su propia pila de fuentes y cada idioma su tope de tamaño. Las propiedades salen de un formulario de diecinueve campos que la clienta edita sola, y cada cambio llega al sitio en cerca de un minuto.
El contacto abre WhatsApp.
La página de contacto es una sola pantalla: cuatro campos con sus etiquetas a tamaño de titular. Enviar no publica nada en un servidor. Se abre WhatsApp con el mensaje ya redactado a partir de lo escrito, y las demás llamadas a la acción del sitio hacen lo mismo con una frase propia.
Una sola línea de tiempo para toda la portada
Tres costuras: cubrir, desplazar, descubrir
La cortina se cierra sola al primer gesto
Los servicios no responden a la rueda
Texto en DOM sobre el lienzo WebGL
Sin WebGL, nueve secciones apiladas y legibles
Una pila de fuentes por sistema de escritura
Catálogo en Sanity, revalidado cada 60 segundos