Um site de uma única página não oferece nenhuma possibilidade de esconder nada. Não há menu para ocultar uma seção fraca, nem uma segunda página para acomodar os elementos que não couberam no restante do site.
Tudo o que o visitante precisa está contido em um único pergaminho, em uma única ordem. Essa ordem é o próprio design.
Se você acertar, o site se torna uma ótima apresentação. Se errar, parece uma lista de rolagem infinita.
Os oito exemplos de sites de uma página abaixo acertam em cheio, cada um à sua maneira. Alguns são páginas de marca pessoal criadas para conseguir um emprego. Um deles administra um negócio inteiro de design de interiores em uma única página.
O que eles têm em comum é uma função clara para cada tela. Aproveite as partes que se encaixam no seu trabalho.
O que é um site de uma página?
Um site de página única reúne todo o seu conteúdo em uma única página contínua. Em vez de clicar entre as seções Início, Sobre, Trabalho e Contato, o visitante percorre essas seções em sequência.
Uma navegação fixa geralmente leva a cada página individualmente. Também chamado de site de página única ou de rolagem única, é a estrutura mais simples da web: um URL, um carregamento, um caminho.
Sites de página única são ideais para uma mensagem concisa. Pense em um freelancer vendendo um único serviço, um designer exibindo um portfólio ou um estúdio que prefere que as imagens falem por si.
Se você oferece cinco serviços distintos e tem um blog com 40 posts, esse formato já não lhe serve mais. Mas se você tem uma coisa a dizer e quer dizê-la bem, é difícil encontrar algo melhor.
A versão mais focada do formato é uma página de destino, construída em torno de uma única ação, em vez de uma história pessoal ou de estúdio completa.
O que torna um site de uma página excelente?
Em todos os exemplos relevantes, o mesmo conjunto de decisões se repete:
- Uma mensagem, exibida na primeira tela. O visitante deve saber quem você é e o que você faz antes mesmo de começar a navegar. Sem enrolação.
- Uma ordem de rolagem que tenha algum significado. Os melhores sites de página única são estruturados como um argumento: gancho, prova, personalidade, pergunta.
- Uma ação principal. Contrate-me, veja meu trabalho, entre em contato. Uma chamada para ação repetida supera cinco concorrentes.
- Quebras visuais que fragmentam a rolagem. Blocos de cor, imagens em sangria total ou espaçamento generoso impedem que uma página longa seja lida como uma única faixa cinza.
- Carregamento rápido. Uma única página significa apenas uma chance de causar uma boa primeira impressão. Vídeos pesados e imagens sem compressão são os principais motivos pelos quais sites de página única perdem visitantes.
Compare os exemplos com essa lista enquanto lê.
Resumos de marca pessoal de uma página que priorizam a tipografia.
Quando o produto é uma pessoa, a tipografia desempenha um papel fundamental. Ambos os sites priorizam o papel, e não o nome, como elemento mais importante da página.
Jon Kirschner
Jon Kirschner É um estrategista de marcas e crescimento, e seu site deixa isso claro em letras quatro vezes maiores que seu próprio nome.
O nome aparece pequeno em uma barra de navegação em formato de pílula, e as palavras "Estrategista de Marca e Crescimento" preenchem a tela.
Abaixo da dobra, uma introdução em linguagem simples ("Eu construo marcas que convertem") define o tom.
Seções como "No que sou realmente bom" e "O que estou lendo" dão um toque humano que a maioria dos sites de estratégia ignora. O texto reflete a personalidade da pessoa, não um modelo predefinido.
Pegue emprestado isto: Faça com que a mensagem principal para o visitante seja mais impactante do que o nome da sua empresa. Ele veio para descobrir o que você faz, então destaque isso, com uma tipografia que não passe despercebida.
Jordon Melo
Jordon Melo, um estrategista de planejamento e compra de mídia em Toronto, resolve o problema clássico de uma única página: como navegar em uma rolagem longa? Ele numera a navegação.
"01. Sobre, 02. Breve Currículo, 03. Experiência Profissional, 04. Depoimentos, 05. Contato" corresponde exatamente à ordem de rolagem, de modo que o menu também funciona como um índice.
Um título com serifa e um retrato em arco conferem um toque de aconchego a uma página de currículo. Trata-se de um design de site de página única que se comporta como um site de várias páginas, sem as telas de carregamento.
Pegue emprestado isto: Numere sua navegação para corresponder à ordem de rolagem. Uma página longa deixa de parecer longa quando o visitante consegue ver onde está nela.
Páginas únicas com tela dividida e orientação retrato
Dois sites, uma ideia: colocar a pessoa e a ação na primeira tela, para que um visitante ocupado nunca precise rolar a página para agir.
Simrran Benvait
Simrran Benvait é uma especialista em marketing na Colúmbia Britânica, e seu herói faz todo o trabalho em uma única tela.
Um retrato preenche a metade esquerda, recortado com uma suave ondulação em direção a um painel creme à direita. Esse painel contém a saudação, o cargo e três campos de contato: e-mail, LinkedIn e telefone.
Um recrutador consegue ler quem ela é e enviar mensagens sem precisar rolar a tela. O divisor ondulado impede que a separação pareça duas caixas coladas com fita adesiva.
Pegue emprestado isto: Na primeira página, inclua seu cargo, localização e contato. Em um documento de uma página, o protagonista é o seu cartão de visitas, então trate-o como tal.
Noor Harajli
Noor Harajli, uma coordenadora de mídias sociais e marketing baseada em Londres, constrói seu pergaminho único a partir de cartões vermelhos gigantes sobre um fundo preto.
Cada seção — perfil, habilidades, trabalho — fica em seu próprio bloco arredondado, de modo que a página é lida como uma série de salas em vez de uma longa faixa contínua.
A tipografia monoespaçada sinaliza uma identidade criativo-técnica, e os cards "Produção de Conteúdo" e "Arte e Design" direcionam diretamente para projetos reais. Isso demonstra que um site de rolagem única pode conter um currículo completo e um portfólio sem parecer sobrecarregado.
Pegue emprestado isto: Divida um texto longo em blocos arredondados de cor. A separação visual clara permite que uma página contenha muita informação sem que o leitor se perca.
Portfólios de uma página com foco em imagens
Quando o trabalho é a apresentação, as imagens ocupam toda a página e o texto fica em segundo plano. Ambos os casos envolvem um elemento visual em sangria total.
Dillan Vanner
Dillan Vanner é fotógrafo, e o site se abre da mesma forma que uma boa impressão: uma imagem em sangria total, de ponta a ponta, antes de uma única palavra de texto.
Uma imagem de documentário preenche a primeira tela, a marca aparece centralizada e pequena, e o slogan "Capturando o Mundo e Tudo o Que Há Nele" reforça a ideia.
Uma navegação minimalista (Início, Portfólio, Sobre) e uma linha de ícones de contato são todos os elementos cromados presentes. A fotografia é o que vende o produto.
Pegue emprestado isto: Para uma apresentação fotográfica de uma página, deixe uma imagem impactante ocupar a primeira tela. Sua melhor foto é um chamariz melhor do que qualquer título.
cmc designworks
cmc designworks, um estúdio de arquitetura e design de interiores, descarta o texto e deixa que a obra seja a protagonista.
A página inicial abre com uma grade de fotos assimétrica de ponta a ponta: imagens renderizadas do edifício, fotos de interiores, sinalização, com uma barra de navegação quase invisível flutuando acima.
Para uma disciplina visual, esta é a escolha certa. As imagens vendem, então nada compete com elas. É um dos exemplos de sites com rolagem mais limpos que você encontrará, justamente por confiar na fotografia.
Pegue emprestado isto: Se o seu trabalho for visual, dispense as palavras. Uma grade de imagens em sangria total, como elemento principal, diz mais do que um parágrafo jamais conseguiria.
Resumos de Serviço e Talento
Um site de uma página não serve apenas para indivíduos que exibem um portfólio. Essas duas sequências organizam a rolagem como uma apresentação, de forma que toda a mensagem seja transmitida em uma única leitura.
Arrowood Design
Arrowood Design, uma empresa de design de interiores da região da Baía de São Francisco, administra toda a sua operação de serviços em uma única página. O conteúdo é apresentado sequencialmente como uma apresentação de vendas.
Uma promessa de "Luxo Atemporal" se destaca sobre um mural pintado de uma coruja-das-torres no topo, seguida por serviços, o posicionamento "Não Apenas Decoração", a história da fundadora ("Quem é Lisa?"), projetos e contato.
Os rótulos editoriais em letras maiúsculas mantêm o texto coeso. Ao chegar ao final, você terá lido uma conversa de vendas completa, em ordem, sem clicar uma única vez.
Pegue emprestado isto: Um documento de uma página pode apresentar toda uma empresa de serviços. Organize-o como uma apresentação: promessa, serviços, provas, a pessoa e, por fim, o pedido.
Kaitlyn Barry
Kaitlyn Barry é ator, diretor e artista em Perth. O site abre com o nome em tela cheia sobre um único retrato ao pôr do sol, da mesma forma que uma foto de rosto abre um perfil de elenco.
A partir daí, vai direto ao ponto: um breve perfil, seguido de uma lista de trabalhos recentes na tela, como por exemplo... The Twelve e Cephalopod, então entre em contato.
O texto está organizado da mesma forma que um briefing de elenco: quem são, o que fizeram e como contatá-los. Nada interfere nisso.
Pegue emprestado isto: Se as pessoas te contratarem com base no seu currículo, inclua-o na página. Destaque sua função, liste suas qualificações e deixe a informação "disponível agora" bem visível.
O que os melhores sites de uma página têm em comum
Observe os oito juntos e o padrão será consistente. Os melhores sites de uma página não são os mais bonitos. São aqueles em que cada tela tem uma função e as funções são executadas na ordem correta.
Eles se comprometem com uma única mensagem e repetem uma única ação. Utilizam um sistema visual real para dar estrutura à rolagem: navegação numerada, cartões com blocos de cores, uma grade de imagens e um cabeçalho dividido.
Eles priorizam o mais importante: função e contato para os candidatos a emprego, trabalho para os estúdios.
E eles mantêm um estilo leve, porque um site de uma página representa um único download e uma única primeira impressão. Exemplos de sites simples costumam ter mais sucesso do que os elaborados. A habilidade está na contenção.
Quando um site de uma página funciona (e quando você precisa de mais de uma página)
O formato tem um limite. Um site de uma página é ideal quando sua mensagem é concisa e seu conteúdo é limitado.
No momento em que você tem vários públicos distintos, um blog em crescimento ou um catálogo de serviços, cada um merecendo sua própria apresentação, uma única rolagem começa a jogar contra você.
Se você é um artista tradicional em vez de um designer, um formato com várias páginas geralmente funciona melhor para o seu trabalho. sites de portfólio de artistas O resumo abrange essa rota. Aqui está a versão honesta:
Se você estiver na coluna da direita, crie páginas adicionais. Forçar tudo em uma única rolagem para parecer minimalista é uma decisão pela qual seus visitantes pagam.
Como criar seu próprio site de uma página
Você não precisa programar nenhum deles. Comece escrevendo a barra de rolagem antes de mexer em um modelo.
Liste suas seções na ordem em que um estranho as encontraria e, em seguida, corte uma. A maioria dos sites de uma página tem uma seção a mais.
Para a criação de um site, um construtor de sites focado em portfólio oferece mais vantagens do que um construtor genérico, pois os layouts já são projetados para uma rolagem única e intuitiva.
Pixpa's modelos de sites de uma página Oferecem navegação fixa ancorada, seções de imagem em sangria total e um bloco de contato integrado, prontos para uso. Você pode vê-los em uso no Portfólios de uma página galeria.
O CSS personalizado está disponível caso você queira alterar a tipografia ou o espaçamento. Jon Kirschner e Noor Harajli fez.
Se preferir comparar primeiro ferramentas dedicadas de página única, confira nossa seleção de construtores de sites de uma página é um ponto de partida útil.
Todos os sites acima foram construídos em Pixpa, o que é um bom indicativo de como o formato pode ficar sem um desenvolvedor.
Independentemente da base que você escolher, mantenha as imagens compactadas e as seções em número reduzido. A contenção é o cerne do projeto.
Concluindo!
Um site de página única tem uma função decisiva. Ele força você a decidir o que realmente importa e a organizar as informações, porque não há uma segunda página para ocultar o restante.
Os exemplos aqui apresentados abrangem um estrategista em busca de emprego, um criativo londrino, um fotógrafo documentarista, um estúdio de arquitetura, uma empresa de design de interiores de luxo e um ator em atividade.
Cada uma delas funciona pelo mesmo motivo: uma mensagem clara, uma rolagem intencional, uma ação a ser realizada em seguida.
Escreva seu texto como um argumento, comece com a ideia principal e corte até que restem apenas os pontos essenciais.
Perguntas frequentes sobre sites de uma página
O que é um site de uma página?
Um site de página única reúne todo o seu conteúdo — sobre nós, trabalhos, serviços, contato — em uma única página com rolagem, em vez de dividi-lo em páginas separadas.
Também chamado de site de página única ou de rolagem única, ele é ideal para uma mensagem concisa: um serviço, um portfólio ou uma apresentação pessoal. Uma navegação fixa geralmente direciona o visitante para cada seção.
Sites de uma página são bons para SEO?
Eles podem ter um bom posicionamento para o seu nome e uma ou duas frases específicas, o que geralmente é tudo o que uma marca pessoal ou uma empresa de serviço único precisa.
Onde eles encontram dificuldades é na abrangência. Como o Google classifica principalmente páginas, e não sites, uma página só pode segmentar um número limitado de palavras-chave antes que o conteúdo entre em competição consigo mesmo. Se você quiser se posicionar bem em diversos tópicos, precisa de mais páginas.
Quantas seções um site de uma página deve ter?
O suficiente para apresentar os argumentos, nada mais. A maioria dos sites de página única mais eficazes possui de cinco a sete seções: um artigo principal, uma breve apresentação, os trabalhos ou serviços oferecidos, algumas provas de seu sucesso e uma seção de contato.
Se você se deparar com a necessidade de adicionar uma oitava página, verifique se o site realmente foi projetado para ter várias páginas.
Página única versus várias páginas: qual é a melhor opção?
Em abstrato, nenhuma é melhor que a outra. Elas resolvem problemas diferentes.
Um design de site de uma única página se destaca por transmitir mensagens concisas, agilizar decisões e apresentar portfólios visuais.
Páginas múltiplas são vantajosas quando você tem públicos distintos, um blog em crescimento ou muitos serviços que merecem, cada um com sua própria página. Escolha pela profundidade do conteúdo, não pela aparência mais moderna.
Onde posso encontrar mais exemplos de sites de página única?
Além das oito aqui presentes, galerias como One Page Love e Awwwards'Vale a pena dar uma olhada nas coleções de página única em busca de inspiração para design.
Ao navegar, olhe além dos elementos visuais: estude a ordem de rolagem e a chamada para ação, pois essa é a parte que você realmente precisa copiar.
Quanto custa um site de uma página?
Se você criar seu próprio site em uma plataforma de criação de sites, um site de uma página custará o mesmo que qualquer site pequeno: aproximadamente o preço de um plano mais um domínio. Confira o preços do plano mais recente para números atuais.
Contratar um designer para criar um documento personalizado de uma página pode custar de algumas centenas a alguns milhares de dólares, dependendo do trabalho. Para a maioria das pessoas nesta lista, um modelo resolveu o problema.