Proyectos›María & Alfredo
Landing · Bodas

De una invitación en papela un sobre que se abre en el móvil.

Diseñé y desarrollé la invitación digital de la boda de María y Alfredo: un sobre animado con lacre que se abre al tocarlo, portada a pantalla completa, cuenta atrás, horarios con mapas, fotos de la pareja y un formulario de confirmación que guarda cada respuesta en Google Sheets.

Duración
1 semana
Plataforma
Web (mobile-first)
Rol
Diseño + Desarrollo
Sector
Bodas · Eventos
María & Alfredo
0€
coste de hosting y backend
1
sobre animado que abre la invitación
100%
diseño mobile-first
8
datos por invitado guardados en Sheets

01 · El problema

Una invitación quesorprenda desde el primer toque.

María y Alfredo se casan el 1 de mayo de 2027 en Sevilla y querían una invitación digital que no pareciera una plantilla: algo con la emoción de abrir un sobre de verdad, pero que se pudiera enviar por WhatsApp a toda la familia.

También necesitaban centralizar la logística. Confirmar por mensajes sueltos significa perder respuestas y no saber quién viene, quién trae acompañante, quién necesita autobús o quién tiene alguna intolerancia alimentaria.

Todo tenía que funcionar perfectamente en el móvil, cargar rápido con fotos de alta calidad y no depender de ninguna plataforma de invitaciones de pago ni de un servidor que mantener.

“

Queríamos que abrir la invitación fuera un momento especial, no un enlace más, y tener todas las confirmaciones en un solo sitio sin perseguir a nadie.

— María & Alfredo, Boda · 1 de mayo de 2027

02 · Objetivos

Lo que necesitaba
conseguir.

Antes de escribir una sola línea de código, me senté con el cliente para entender qué significaba el éxito para él — y para sus usuarios.

Objetivo de diseño

Un sobre que se abre de verdad

Un sobre verde salvia con lacre de cera que se rompe al tocarlo, la solapa se abre y una luz cálida da paso a la portada. Con animación reducida, un simple fundido.

Objetivo funcional

Confirmación segura sin backend

Que cada invitado confirmara asistencia, acompañante, autobús e intolerancias en menos de un minuto, con validación, protección contra bots y sin exponer ninguna URL privada.

Objetivo de gestión

Toda la boda en una sola página

Cuenta atrás, ceremonia y celebración con mapas, autobuses, fotos de la pareja y datos para el regalo, todo en una página rápida y fácil de compartir.

03 · Mi proceso

Cómo lo
abordé.

Días 1–2

Identidad visual y sobre

Definí la paleta (ciruela, malva, crema y salvia), la tipografía con Space Grotesk e Instrument Serif, y renderé el sobre, el lacre y las capas de la solapa para animarlas en el navegador.

Días 3–4

Maquetación mobile-first

Construí la página en HTML, CSS y JavaScript sin dependencias: portada a pantalla completa, cuenta atrás, horarios con enlaces a Google Maps, animaciones al hacer scroll y parallax en las fotos.

Día 5

RSVP con función serverless

El formulario envía a una función de Vercel que valida y limpia los datos y los reenvía a un Apps Script que escribe cada respuesta en Google Sheets. La URL del script nunca se expone en el navegador.

Días 6–7

Fotos, revisión y despliegue

Optimicé las fotos de la pareja, añadí el apartado de regalo con copia del IBAN, revisamos cada sección juntos y publicamos la web en Vercel, lista para compartir.

04 · La solución

María & Alfredo.

Una solución que desapareció del radar — en el mejor sentido. Cuando algo funciona bien, no lo notas.

Sobre animado con lacre

Al entrar aparece un sobre cerrado con un lacre de cera. Al tocarlo se rompe el sello, se abre la solapa y una luz cálida llena la pantalla antes de mostrar la portada.

Cuenta atrás y horarios con mapas

Countdown en tiempo real hasta el 1 de mayo de 2027, horarios de ceremonia y celebración con botón de cómo llegar, y la información de los autobuses.

Confirmación en Google Sheets

Formulario con asistencia, acompañante, autobús, intolerancias y teléfono. Cada respuesta llega a una hoja de cálculo a través de una función serverless con validación y campo trampa anti-bots.

Fotos, regalo y botón flotante

Galería con las fotos de la pareja, apartado de regalo con el IBAN y botón de copiar, y un botón flotante para confirmar asistencia desde cualquier punto de la página.

05 · Galería

La web en detalle.

María & Alfredo — captura 1
María & Alfredo — captura 2
María & Alfredo — captura 3
María & Alfredo — captura 4

Tech stack

Lo técnico, siempre al servicio del objetivo. Elegí estas herramientas no porque fueran las más modernas, sino porque eran las más adecuadas para este proyecto.

HTML5CSS3JavaScriptVercel FunctionsGoogle Apps ScriptGoogle Sheets

Lo que dice el cliente

“

Cuando enviamos el enlace, casi todo el mundo nos escribió para decirnos lo bonito que era abrir el sobre. Y nosotros tenemos las confirmaciones ordenadas en una hoja sin tener que perseguir a nadie.

💌
María & Alfredo
Boda · 1 de mayo de 2027

¿Tienes un proyecto similar?

Construyamos
algo juntos.

Cada proyecto que termino viene de una conversación honesta. Cuéntame el tuyo.

Siguiente proyecto

🏋️

Sport Miraflores

De WhatsApp y llamadas a una app propia en semanas.

Ver caso de estudio