ProyectosRubén & Pilar
Landing · Bodas

De un evento familiara una invitación digital hecha a medida.

Diseñé y desarrollé la web de la boda de Rubén y Pilar: una invitación digital de una sola página con cuenta atrás, información de la ceremonia y el convite, ruta en autobús y un formulario de confirmación que se organiza solo, sin depender de ninguna plataforma de pago.

Duración
1 semana
Plataforma
Web (mobile-first)
Rol
Diseño + Desarrollo
Sector
Bodas · Eventos
Rubén & Pilar
0€
coste de hosting y backend
100%
diseño mobile-first
0
hojas de cálculo rellenadas a mano
1
formulario conecta Sheets y email

01 · El problema

Organizar una bodasin depender de apps de terceros.

Rubén y Pilar querían una invitación digital para su boda del 3 de octubre de 2026, pero no querían pagar una suscripción mensual a una de las plataformas de invitaciones online que hay en el mercado, ni renunciar a que la web tuviera su propio estilo.

El otro problema era la logística: confirmar asistencia por WhatsApp o llamada significa mensajes sueltos, respuestas que se pierden y ningún sitio centralizado donde consultar quién viene, quién necesita autobús o quién tiene alguna alergia alimentaria.

Necesitaban algo sencillo de mantener, sin backend que administrar, que funcionara perfectamente en el móvil —que es donde el 100% de los invitados iban a abrir el enlace— y que centralizara toda la información de la boda en un solo sitio.

Queríamos algo bonito y personal, pero sin complicarnos con plataformas de pago ni con gestionar un Excel a mano con cada respuesta.

Rubén & PilarBoda · 3 de octubre de 2026

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

Una invitación con identidad propia

Nada de plantillas genéricas: tipografía caligráfica, paleta verde oliva y dorado, y un fondo animado de partículas para dar una primera impresión cuidada desde el segundo cero.

Objetivo funcional

RSVP sin fricción ni backend

Que cada invitado pudiera confirmar asistencia, acompañante, alergias y autobús desde el móvil en menos de un minuto, sin necesidad de servidor ni base de datos propia.

Objetivo de gestión

Toda la información en un sitio

Centralizar ceremonia, convite, transporte y datos para el regalo, y que cada confirmación llegara automáticamente a una hoja de cálculo y por email.

03 · Mi proceso

Cómo lo
abordé.

Días 1–2

Diseño y paleta

Definí la identidad visual junto con la pareja: verde oliva, dorado y crema, tipografía Cormorant Garamond y Great Vibes para el punto elegante y caligráfico, y Jost para el resto del contenido.

Días 3–4

Maquetación mobile-first

Construí la web como página única en HTML, CSS y JavaScript, con animación de partículas en el hero, cuenta atrás en tiempo real y menú hamburguesa para móvil.

Día 5

RSVP sin servidor propio

Conecté el formulario de confirmación con Google Apps Script: cada respuesta se guarda automáticamente en una hoja de Google Sheets y genera un email con los datos y el Excel adjunto.

Días 6–7

Contenido, revisión y despliegue

Añadí la ruta en autobús, los datos para el regalo y revisamos juntos cada sección antes de publicar la web, lista para compartir con la familia y los invitados.

04 · La solución

Rubén & Pilar.

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

Cuenta atrás y ceremonia

Countdown en tiempo real hasta el 3 de octubre de 2026 y toda la información de la ceremonia y el convite, con un fondo de partículas animado en el hero.

RSVP con acompañante y alergias

Formulario que recoge asistencia, acompañante y alergias alimentarias, con validación y un mensaje de confirmación al enviarlo.

Ruta en autobús

Sección dedicada al transporte con horarios de ida y vuelta, para que cada invitado sepa si necesita reservar plaza en el bus.

Datos para el regalo

Apartado con el IBAN y un botón de copiar al portapapeles, para que dejar el regalo sea tan fácil como confirmar la asistencia.

05 · Galería

La web en detalle.

Rubén & Pilar — captura 1
Rubén & Pilar — captura 2
Rubén & Pilar — captura 3

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.

HTML5CSS3JavaScriptCanvas APIGoogle Apps ScriptGoogle Sheets

Lo que dice el cliente

Le contamos a Álvaro cómo nos imaginábamos la web y el resultado superó lo que teníamos en mente. Ahora todos nuestros invitados confirman desde el móvil en un momento y nosotros solo tenemos que abrir la hoja de cálculo para verlo todo organizado.

🌿
Rubén & Pilar
Boda · 3 de octubre de 2026

¿Tienes un proyecto similar?

Construyamos
algo juntos.

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

Siguiente proyecto

🍷

El Tinglao de Lagunillas

De una carta en papel a una experiencia digital en cada mesa.

Ver caso de estudio