Proyecto conceptual: negocio ficticio

Una web de tejados con el precio antes de llamar

Thornrigg Roofing & Guttering es una empresa familiar de tejados ficticia en Leeds, inventada para enseñar cómo trabajamos. Su web de una sola página está pensada para que los propietarios preocupados reserven una inspección gratis, y para que quien tiene una gotera llame con un solo toque.

Sector
Empresas de tejados
Ubicación
Leeds, Reino Unido
Objetivo principal
Inspecciones gratis y llamadas por goteras
Idiomas
EN

Abre la web de demostración. Es un negocio ficticio, así que los formularios y botones no contactan con nadie.

El encargo

Una buena empresa de tejados que parece una más

Thornrigg es una empresa familiar inventada de Kirkstall, en Leeds: Mick, que la fundó en 1998; su hija Jess, en la oficina, y el marido de Jess, Imran, al frente de la segunda cuadrilla. En el encargo que imaginamos, los clientes nuevos la encuentran en Google Maps junto a una docena de empresas de tejados más y no saben quién es honrado, así que retrasan la llamada por miedo al precio. El otro grupo no puede esperar nada: le entra agua por el techo y quiere hablar con una persona ya. La web tenía que mostrar precios justos y el trabajo en sí, reservar inspecciones gratis y tener la línea de goteras a un toque, de día o de noche.

Para quién es la página

Propietarios de Leeds, casi siempre desde el móvil, que han visto una pizarra suelta, una mancha de humedad o un canalón atascado y quieren un precio justo antes de llamar. Y un grupo más pequeño y urgente con una gotera ahora mismo, a menudo por la noche.

Anatomía de la página

Anatomía de una web de tejados que consigue llamadas

Una web Launch es una sola página larga, así que esta es la web entera: 13 secciones, desde lo alto de la pantalla del móvil hacia abajo.

Thornrigg Roofing & Guttering — Proyecto conceptual: negocio ficticio
  1. Una franja amarilla de goteras encima del logo

    “¿Tienes una gotera ahora?” y un botón de llamada con el número, antes que cualquier otra cosa en la página. De 22:00 a 7:00, hora del Reino Unido, cambia a “¿Gotera esta noche?” y el botón abre una guía de qué hacer, porque a esa hora no se atiende el teléfono.

  2. Titular, dos botones y estado en directo

    “Reparación de tejados en Leeds, bien hecha a la primera.” dice el trabajo y la ciudad. Debajo: “Reserva una inspección gratis” y “Llama al 0113 496 0412”, tres promesas breves (sin cargo por desplazamiento, fotos de cada problema, precio cerrado por escrito) y una línea que dice si la oficina está abierta ahora mismo. Sigue una franja con cuatro datos: empresa familiar desde 1998, garantía de 10 años, seguro de 5 millones de libras y visitas por goteras el mismo día.

  3. Precios “desde” para 8 trabajos y una calculadora

    Ocho trabajos habituales en tres grupos, cada uno con una frase sencilla y un precio “desde” con IVA y retirada de residuos incluidos, desde 80 £ por limpiar un canalón hasta 6800 £ por un tejado nuevo completo. Cada fila tiene un botón Calcular. Te lleva a la calculadora, donde eliges el trabajo y el tipo de casa (40 combinaciones) y obtienes un rango de precios, el tiempo de obra y la garantía.

  4. Un comparador de antes y después

    Una casa adosada de Hyde Park, con tres días de diferencia. Arrastra el tirador, o usa las flechas del teclado, para comparar. Debajo: qué se hizo, 3 días de obra, un precio final de 2480 £, “igual que el presupuesto por escrito”, y una garantía de 10 años. Siguen dos trabajos recientes más, cada uno con la zona, el tiempo que llevó y el precio.

  5. “¿Entra agua por el techo? Haz esto ya.”

    Cuatro pasos sencillos: recoge el agua, asegura la electricidad, haz fotos para el seguro y llama. Ayuda a quien está en pleno susto y demuestra que la empresa conoce su oficio. Por la noche, el botón de llamada pasa a ser “Reserva una visita a primera hora”, con una cuenta atrás hasta que Jess vuelva a atender el teléfono.

  6. Garantía, proceso, la familia y reseñas de ejemplo

    La garantía detalla cuánto tiempo cubre cada tipo de trabajo, junto a un certificado de ejemplo que muestra exactamente lo que recibes al final. Luego, cinco pasos desde la primera llamada hasta la entrega, las tres personas con las que tratarías y cuatro reseñas, cada una marcada claramente como contenido de muestra.

  7. Código postal, preguntas y un formulario en dos pasos

    Escribe un código postal y la página te dice si está cubierto; luego un botón lo lleva al formulario de reserva. Antes del formulario hay ocho respuestas breves a preguntas frecuentes. El formulario pregunta primero por el problema y después por tus datos, junto al teléfono, el email, el horario con el día de hoy resaltado y la dirección del almacén.

Por qué consigue llamadas y reservas

Cinco decisiones pensadas para conseguir llamadas

Precios antes de la llamada

La gente retrasa la llamada a una empresa de tejados porque teme la factura. Aquí cada trabajo habitual muestra un precio “desde”, y la calculadora da un rango en dos toques. Pulsa “Reservar mi inspección gratis” y el cálculo va contigo: el formulario lo muestra arriba y rellena el trabajo y el tipo de casa.

La línea de goteras, siempre al alcance del pulgar

El número está en la franja de goteras, el bloque principal, los pasos de urgencia, las preguntas frecuentes, el bloque de contacto y el pie. En el móvil, una barra con “Llamar ya” e “Inspección gratis” está fija abajo. Se aparta mientras los botones de arriba, la calculadora o el formulario están a la vista, y mientras escribes, así que nunca tapa el formulario.

Modo noche en vez de una línea cerrada

La página comprueba la hora en el Reino Unido. Entre las 22:00 y las 7:00, la franja de goteras, la sección de urgencias y la barra inferior cambian sus botones de llamada por “Qué hacer ahora” y una reserva de visita a primera hora, y la línea de estado dice cuándo abre la oficina. Quien entra tarde sigue recibiendo ayuda, y la visita queda reservada igualmente.

Pruebas que se ven, no una fila de estrellas

En un oficio donde la gente teme dar con un chapucero, la web enseña el trabajo y los papeles: un comparador de antes y después, tres trabajos recientes con sus precios y un certificado de garantía de ejemplo. Las reseñas también están, pero no son la prueba principal.

Un formulario que se hace corto

Dos pasos: primero el problema, luego tus datos. Eliges una franja de dos horas, no “el martes en algún momento”, y los domingos, los sábados por la tarde y las franjas que empiezan en menos de dos horas ya vienen descartados. Si eliges “Gotera ahora” en horario de día, el formulario te dice que es más rápido llamar. La foto del problema es opcional.

Puntuaciones medidas

  • 88Rendimiento
  • 100Accesibilidad
  • 100Buenas prácticas

Google Lighthouse, móvil, 4G simulado, medido el 19 de septiembre de 2026. El SEO no se puntúa: las demos conceptuales están ocultas a Google a propósito (noindex), y Lighthouse lo cuenta en su contra. Compruébalo tú en la demo.

Notas técnicas

  • HTML, CSS y JavaScript escritos a mano, sin framework: 89 KB de CSS y JavaScript sin comprimir, 23 KB con gzip. Sin scripts de seguimiento y sin cookies.
  • Fotos en AVIF y WebP, de dos a cuatro tamaños cada una, con una alternativa en JPEG. Solo la foto principal se carga de inmediato; las demás se cargan a medida que bajas. Un móvil descarga unos 470 KB en la primera carga, fuentes incluidas.
  • Source Serif 4 para los títulos, una serif sólida que transmite trayectoria, y Work Sans para el texto y los botones. Las dos están alojadas en el propio servidor, así que no hay llamadas a Google Fonts.
  • Colores sacados de un tejado de Leeds: pizarra galesa para el texto y el pie, bruma de los montes Peninos para los fondos y amarillo liquen para la franja de goteras y los botones de reservar o llamar.
  • Accesibilidad: enlace para saltar al contenido, contornos de foco claros, un comparador que se mueve con las flechas del teclado, cambios de precio anunciados a los lectores de pantalla, mensajes de error vinculados a su campo y animaciones desactivadas para quien activa el movimiento reducido.
  • Paquete Launch: esta demo es la web entera, una sola página larga en inglés. Una web Launch estándar tiene de 8 a 10 secciones y un formulario de contacto corto; la calculadora, el comparador de antes y después, el comprobador de código postal y el formulario en dos pasos son extras a medida que se suman.
Paleta
Tipografías
Source Serif 4 + Work Sans

El paquete que representa

Launch

Este concepto es el tipo de web que tienes con Launch: 590 £ de creación y después desde 39 £/mes de mantenimiento. Los extras interactivos, como calculadoras y presupuestos al instante, se presupuestan aparte.

Páginas web por sector: Empresas de tejados →

Vista previa gratis

¿Quieres una web así para tu empresa de tejados?

Dinos a qué se dedica tu negocio y diseñamos cómo podría ser tu nueva página de inicio, gratis y antes de que pagues nada. Sin tarjeta y sin compromiso.

  • Sin tarjeta
  • Tu dominio a tu nombre
  • Cancela el mantenimiento cuando quieras tras 3 meses