Um mostruário de sites de página única
Ao projetar um site com um número mínimo de páginas e não uma tonelada de conteúdo, um design de página única pode ser uma maneira inovadora de diferenciar o site.
Os sites de página única costumam usar JavaScript e Flash, além de HTML e CSS para caber mais conteúdo em uma página sem aumentar substancialmente os tempos de carregamento.
É preciso dar uma atenção especial à navegação quando se trata de sites de página única, para garantir que os visitantes possam voltar para a seção inicial da página sem problemas e navegar de qualquer seção para qualquer outra seção. Isso geralmente é obtido por meio de cabeçalhos fixos ou pela repetição da navegação em cada seção.
Os sites abaixo são excelentes exemplos de sites de uma única página. Eles são úteis e esteticamente agradáveis e aproveitam ao máximo o formato de página única.
Roaaar
O site da Roaaar inclui um link "voltar ao topo" na parte inferior de cada seção, o que facilita a volta dos visitantes à navegação no cabeçalho.
Duplos de Ricardo Mestre
O site Duplos tem uma abordagem diferente, colocando o conteúdo principal na parte inferior da página. A navegação leva você até a página, em vez de para baixo.
Grzegorz Kozak
O motivo do farol aqui percorre toda a extensão da página, indo do espaço até o nível do solo. Banners saindo das janelas do farol o levam de volta ao topo da página onde está a navegação.
Caleidoscópio
O site do Kaleidoscope usa diferentes imagens de fundo e texturas por trás de cada seção do site. Isso diferencia cada área de conteúdo da outra área de conteúdo.
Dan Scotton
Páginas curtas como esta com conteúdo mínimo funcionam particularmente bem. A navegação fica na barra lateral quando você rola a página.
Viktor Shvaiko
Este site usa um controle deslizante horizontal para carregar novos conteúdos, passando por outro conteúdo para alcançar a página na qual você navegou. A barra de navegação permanece no topo, independentemente da página em que você está.
Jon Rundle
Sites de perfil simples e pessoais como este são perfeitamente adequados para um design de página única. Os ícones e as cores de destaque adicionam um pouco mais de interesse visual ao design, que de outra forma é muito neutro.
Jason Reed
Usar um efeito de acordeão para exibir um novo conteúdo funciona bem quando o conteúdo não é muito longo. A imagem do cabeçalho ilustrado e o esquema de cores cinza e laranja fazem o site se destacar.
Tweet CC
Usar texturas e ilustrações simples torna o site do Tweet CC visualmente atraente, enquanto também é mantido simples com um esquema de cores monocromático.
Layout PSD
Sites que oferecem serviços diretos podem funcionar particularmente bem em um formato de página única. Não há muitas informações para oferecer e manter tudo isso em uma página facilita para os clientes em potencial encontrar rapidamente o que precisam.
Feelwire
O site Feelwire mantém as coisas simples e oferece informações extras com dicas de ferramentas. O fundo branco mantém-no minimalista e os ícones em negrito adicionam interesse visual.
Meteoro Quente
O site do Hot Meteor usa um design tipográfico, cinza e vermelho. O cabeçalho é fixo, mantendo a navegação no topo da página.
Mia Makila
O site Mia Makila é um pouco diferente da maioria dos outros sites incluídos aqui, usando um design mais tradicional de três colunas. JavaScript é usado para exibir obras de arte em cada categoria.
Costas Theoharis
Este site usa um efeito deslizante interessante, com cada seção (o cabeçalho, o conteúdo principal e o rodapé) deslizando separadamente um do outro.
Javan Makhmali
O design de grade usado aqui não é visto com muita frequência em designs de página única. Mas com muito espaço em branco, funciona bem para incluir um monte de conteúdo diferente em um design muito simplificado.
Team Nomad
O design aqui é simples e direto, e o design de duas colunas funciona bem para encaixar mais conteúdo na página sem parecer pesado.
Jorge Fino
O site de Jorge Fino coloca o foco diretamente nos projetos. A navegação é inexistente (além da rolagem) e as informações de contato são incluídas no cabeçalho e no rodapé.
Moly Yim
Aqui está outro site sem navegação. É mantido em um tamanho razoável, portanto, não é um problema.
Justin Tsang
A navegação aqui é um pouco diferente. Em vez de incluir botões que o levam de volta ao topo ou navegação em cada tela, os botões são incluídos ao lado de cada projeto e área de conteúdo para subir ou descer uma tela. Há também uma barra de navegação no topo para pular para cada seção principal.
Mogulista
Sites temporários são um ótimo momento para usar um site de uma única página. Este site usa JavaScript para carregar novos conteúdos para cada “página” no site.
Chirag Solanki
A navegação neste site combina a navegação principal e os links no final de cada seção para retornar os visitantes ao topo da página. Rabiscos ilustrados ligam cada seção, dando uma sensação de continuidade a toda a página.
Deluge Studios
O layout do site do Deluge Studios é um dos mais exclusivos apresentados aqui. Duas colunas fornecem cinco áreas de conteúdo, todas vinculadas a partir da navegação superior. A inclusão de seções de conteúdo principal na coluna de estilo "barra lateral" menor torna a página significativamente mais curta.
Estágio 5 Studio
O site do Studio Stage 5 é curto, sem navegação. Os links "Leia mais" exibem mais informações sobre cada projeto, enquanto outros conteúdos são mantidos na "barra lateral".
SmartCube
O site do SmartCube usa um cabeçalho fixo para manter a navegação na tela o tempo todo. Ele também usa uma combinação de layouts de 1 e 2 colunas, dependendo do conteúdo.
Designs ecléticos
As seções de conteúdo aqui são diferenciadas por texturas de fundo exclusivas. A tipografia reúne tudo ao longo da página e o JavaScript é usado para exibir produtos adicionais sem ocupar mais espaço.
Segredos internos para um aplicativo para iPhone
Este é um dos mais longos sites de uma única página apresentados aqui. Ele usa um cabeçalho fixo com navegação para facilitar a passagem de uma seção para outra.
Mate o derramamento
Manter um site de caridade como este, curto e direto, quase certamente aumentará o número de doações. A tipografia arrojada, as imagens gráficas e a inclusão de um formulário de doação no fundo funcionam perfeitamente em conjunto.
Emily Whitesmith
Aqui está outro site que começa na parte inferior da página. Clicar no link "saiba mais" rola a página até uma área do portfólio. Janelas modais lá dão close-ups de cada tecido.
Folheto
Os sites de aplicativos são adequados para designs de página única, pois geralmente têm conteúdo limitado e apenas uma captura de tela ou duas para imagens.
Hayley Smith
Aqui está outra página muito longa. A navegação é repetida no topo de cada seção, e o logotipo desliza pela página enquanto rola.
Conway Anderson
O site Conway Anderson usa uma mistura de controles deslizantes (para informações sobre contato e informações) e janelas modais (para o trabalho) para exibir o conteúdo. O design simples e baseado em grade e o esquema de cores monocromáticas mantêm as coisas simples e modernas.
Daniel Moir
O site de Daniel Moir é simples, com conteúdo mínimo e sem navegação. O design de duas colunas organiza os diferentes tipos de conteúdo no site e os mantém mais curtos.
Café com leite por dia
Os sites de pré-lançamento são muito adequados para designs de página única, como é mostrado aqui. Ainda não há conteúdo suficiente para justificar um site de várias páginas.
O mercado de colmeias
Aqui está outro site de página única mais longo. O fundo amarelo brilhante e as ilustrações de abelha unem o site inteiro e a navegação se repete no topo de cada seção.
Rubidine
O site Rubidine usa um cabeçalho fixo com um fundo transparente que combina com cada seção de conteúdo individual.
Jakub Szymanski
Este site usa JavaScript para carregar novo conteúdo e deslizar para baixo na página. Um rodapé fixo aparece depois da "página" inicial com um link "voltar ao topo".
Tyler Termini
O site da Tyler Termini é curto, com navegação apenas no cabeçalho. Como não é uma página muito longa, não é realmente um problema ter que rolar de volta para o topo (ou apenas percorrer cada seção sem usar a navegação).
Josh Sender
O esquema de cores em escala de cinza aqui parece ótimo. O trabalho exibido fica totalmente colorido quando você passa o mouse sobre a tela e, quando clicado em uma janela de modalidade de cor, é aberto com uma versão maior.
Escrito e compilado exclusivamente para WDD por Cameron Chapman .
O que você mais gosta em sites de uma única página? Tem algum favorito que não foi apresentado aqui? Por favor, compartilhe nos comentários abaixo…