Projeto conceptual: negócio fictício

Um site de telhados com o preço antes da chamada

A Thornrigg Roofing & Guttering é uma empresa familiar fictícia de telhados em Leeds, inventada para mostrar como trabalhamos. O seu site de uma só página foi feito para transformar proprietários preocupados em inspeções grátis marcadas e para pôr quem tem uma infiltração ao telefone com um só toque.

Setor
Telhados
Localização
Leeds, Reino Unido
Objetivo principal
Inspeções grátis e chamadas por infiltrações
Idiomas
EN

Abre o site de demonstração. É um negócio fictício, por isso os formulários e os botões não contactam ninguém.

O briefing

Uma boa empresa de telhados que parece igual às outras

A Thornrigg é uma empresa familiar inventada, de Kirkstall, em Leeds: o Mick, que a fundou em 1998, a filha Jess no escritório e o marido dela, o Imran, à frente da segunda equipa. No nosso briefing imaginário, os novos clientes encontram-nos no Google Maps ao lado de uma dúzia de outras empresas de telhados e não conseguem perceber quem é honesto, por isso adiam a chamada com medo do preço. O outro grupo não pode esperar nada: está a entrar água pelo teto e querem falar já com uma pessoa. O site tinha de mostrar preços justos e o próprio trabalho, marcar inspeções grátis e manter a linha de infiltrações a um toque, de dia ou de noite.

Para quem é a página

Proprietários de Leeds, quase sempre no telemóvel, que repararam numa telha fora do sítio, numa mancha de humidade ou numa caleira entupida e querem um preço justo antes de ligar. E um grupo mais pequeno e urgente, com uma infiltração neste momento, muitas vezes ao fim do dia.

Anatomia da página

Anatomia de um site de telhados que traz chamadas

Um site Launch é uma única página longa, por isso este é o site inteiro: 13 secções, do topo do ecrã do telemóvel para baixo.

Thornrigg Roofing & Guttering — Projeto conceptual: negócio fictício
  1. Uma faixa amarela de infiltrações acima do logótipo

    “Telhado a pingar agora?” e um botão para ligar, com o número, antes de tudo o resto na página. Das 22h às 7h, hora do Reino Unido, muda para “A pingar esta noite?” e o botão abre um guia do que fazer, porque a linha telefónica está fechada.

  2. Título, dois botões e uma linha de estado em tempo real

    “Reparação de telhados em Leeds, bem feita à primeira.” diz o trabalho e a cidade. Por baixo: “Marcar inspeção grátis ao telhado” e “Ligar 0113 496 0412”, três promessas curtas (sem taxa de deslocação, fotos de cada problema, preço fixo por escrito) e uma linha que diz se o escritório está aberto neste momento. Segue-se uma faixa com quatro factos: empresa familiar desde 1998, garantia de 10 anos, seguro de 5 milhões de libras e visitas a infiltrações no próprio dia.

  3. Preços “a partir de” para 8 trabalhos e um simulador

    Oito trabalhos comuns em três grupos, cada um com uma frase simples e um preço “a partir de” com IVA e remoção de entulho incluídos, de 80 £ pela limpeza de uma caleira a 6800 £ por um telhado novo completo. Cada linha tem um botão Estimar, que salta para o simulador, onde escolhe o trabalho e o tipo de casa (40 combinações) e recebe um intervalo de preços, o tempo de obra e a garantia.

  4. Um comparador antes e depois

    Uma casa em banda em Hyde Park, com três dias de diferença. Arraste a pega, ou use as setas do teclado, para comparar. Por baixo: o que foi feito, 3 dias de obra, um preço final de 2480 £, “igual ao orçamento escrito”, e uma garantia de 10 anos. Seguem-se mais dois trabalhos recentes, cada um com a zona, o tempo que demorou e o preço.

  5. “Está a entrar água pelo teto? Faça isto já.”

    Quatro passos simples: apanhar a água, pôr a eletricidade em segurança, tirar fotos para o seguro e depois ligar. Ajuda quem está em pânico e mostra que a empresa conhece o ofício. À noite, o botão de ligar passa a “Marcar visita logo de manhã”, com uma contagem decrescente até a Jess voltar ao telefone.

  6. Garantia, processo, a família e avaliações de exemplo

    A garantia indica quanto tempo cada tipo de trabalho está coberto, ao lado de um certificado de exemplo que mostra exatamente o que recebe no fim. Depois, cinco passos da primeira chamada à entrega final, as três pessoas com quem trataria e quatro avaliações, cada uma claramente identificada como conteúdo de exemplo.

  7. Código postal, perguntas frequentes e um formulário em dois passos

    Escreva um código postal e a página diz se a zona é servida; depois, um botão leva-o para o formulário de marcação. Antes do formulário há oito respostas curtas a perguntas comuns. O formulário pergunta primeiro pelo problema e depois pelos seus dados, ao lado do número de telefone, do e-mail, do horário com o dia de hoje destacado e da morada do armazém.

O que traz chamadas e marcações

Cinco decisões que transformam visitas em chamadas

Preços antes da chamada

As pessoas adiam a chamada para uma empresa de telhados porque têm medo da conta. Aqui, cada trabalho comum mostra um preço “a partir de”, e o simulador dá um intervalo em dois toques. Carregue em “Marcar a minha inspeção grátis” e a estimativa vai consigo: o formulário mostra-a no topo e preenche o trabalho e o tipo de casa.

A linha de infiltrações sempre à mão

O número está na faixa de infiltrações, no topo, nos passos de emergência, nas perguntas frequentes, na caixa de contacto e no rodapé. No telemóvel, uma barra com “Ligar já” e “Inspeção grátis” fica no fundo do ecrã. Sai do caminho enquanto os botões do topo, o simulador ou o formulário estão à vista, e enquanto escreve, para nunca tapar o formulário.

Modo noturno em vez de uma linha fechada

A página verifica a hora no Reino Unido. Entre as 22h e as 7h, a faixa de infiltrações, a secção de emergência e a barra inferior trocam os botões de chamada por “O que fazer agora” e por uma marcação para logo de manhã, e a linha de estado diz quando o escritório abre. Quem visita tarde continua a ter ajuda, e a visita fica marcada na mesma.

Provas que se veem, não uma fila de estrelas

Num ofício em que as pessoas têm medo de aldrabões, o site mostra o trabalho e a papelada: um comparador antes e depois, três trabalhos recentes com os preços e um certificado de garantia de exemplo. As avaliações também lá estão, mas não são a prova principal.

Um formulário que parece curto

Dois passos: primeiro o problema, depois os seus dados. Escolhe uma janela de duas horas, não “algures na terça-feira”, e os domingos, as tardes de sábado e as horas a menos de duas horas de distância ficam logo de fora. Escolha “Está a pingar agora” durante o dia e o formulário diz-lhe que é mais rápido ligar. Uma foto do problema é opcional.

Resultados medidos

  • 88Desempenho
  • 100Acessibilidade
  • 100Boas práticas

Google Lighthouse, telemóvel, 4G simulado, medido a 19 de setembro de 2026. O SEO não é avaliado: as demos conceptuais estão escondidas do Google de propósito (noindex), o que o Lighthouse conta contra elas. Faça o teste na demo online.

Notas técnicas

  • HTML, CSS e JavaScript escritos à mão, sem framework: 89 KB de CSS e JavaScript antes da compressão, 23 KB com gzip. Sem scripts de rastreio e sem cookies.
  • Fotos em AVIF e WebP, em dois a quatro tamanhos cada, com uma alternativa em JPEG. Só a foto do topo carrega logo; as restantes carregam à medida que desce na página. Um telemóvel descarrega cerca de 470 KB no primeiro carregamento, tipos de letra incluídos.
  • Source Serif 4 para os títulos, uma serifa robusta que transmite experiência, e Work Sans para o texto e os botões. Ambas alojadas no próprio site, por isso não há pedidos ao Google Fonts.
  • Cores tiradas de um telhado de Leeds: ardósia galesa para o texto e o rodapé, névoa dos Peninos para os fundos e amarelo-líquen para a faixa de infiltrações e para os botões de marcar ou ligar.
  • Acessibilidade: um link para saltar para o conteúdo, contornos de foco bem visíveis, um comparador que se move com as setas do teclado, alterações de preço lidas pelos leitores de ecrã, mensagens de erro ligadas aos respetivos campos e animações desligadas para quem ativa o movimento reduzido.
  • Pacote Launch: esta demo é o site inteiro, uma página longa em inglês. Um site Launch normal tem 8–10 secções e um formulário de contacto curto; o simulador, o comparador antes e depois, o verificador de código postal e o formulário de marcação em dois passos são extras personalizados, além do pacote.
Paleta
Tipos de letra
Source Serif 4 + Work Sans

O pacote que representa

Launch

Este conceito é o tipo de site que recebe com o Launch: 590 £ pela criação e depois a partir de 39 £/mês de manutenção. Os extras interativos, como calculadoras e simuladores, são orçamentados à parte.

Sites por setor: Telhados →

Pré-visualização grátis

Quer um site assim para a sua empresa de telhados?

Fale-nos do seu negócio e desenhamos, grátis, como poderia ficar a sua nova página inicial, antes de pagar o que quer que seja. Sem cartão e sem compromisso.

  • Sem cartão
  • O domínio em seu nome
  • Cancele a manutenção quando quiser após 3 meses