Design do site de uma página: 10 dicas + idéias
Viva o design do site em uma única página! Há algo quase mágico em sites de pequena escala que cabem em uma única página. Eles podem ser simples, fáceis de navegar e fornecer experiências ideais para o usuário em um espaço contido.
Embora tenha havido um momento em que nos esquivamos de sites de uma única página, os usuários os estão adotando novamente (obrigado, celular!) E você também deveria.
Estamos analisando dez dicas, idéias, exemplos e sugestões para ajudar a inspirar sua próxima peça de trabalho de web design. Pode ser o momento certo para simplificar e adotar uma estratégia de página única!
Explorar recursos de design
1. Pense em "Páginas"
Quando se trata de criar um único design de site com rolagem, pense em "páginas".
Cada rolagem deve fornecer uma experiência parecida com uma página que se concentra em um único elemento. Isso cria um senso distinto de organização e fluxo para o design do site.
Cote faz isso lindamente com “páginas” que têm separações claras e escuras alternadas (ou com foto completa). O usuário sabe visualmente enquanto percorre onde um pouco do conteúdo termina e o próximo começa.
2. Navegação na linha do tempo para páginas mais longas
Quando se trata de sites de uma página, eles nem sempre são leves no conteúdo. Alguns dos melhores designs de uma página são sites com rolagem mais longa e formato mais longo.
Para esses projetos, considere a navegação na linha do tempo para que os usuários sempre saibam onde estão no fluxo de conteúdo. Isso facilita o rastreamento de onde você está e como voltar, se houver conteúdo para reexaminar.
O UV Hero faz um bom trabalho com uma navegação de linha do tempo altamente visual que mostra cada cor no espectro de luz visível no que diz respeito ao conteúdo no design. E a melhor parte? Você pode clicar em qualquer cor e pular direto para esse conteúdo.
3. Navegação na página
Os sites de uma página não precisam ter elementos comuns da interface do usuário, como um menu, embora muitos pareçam.
Você ainda pode incorporar um menu com aparência tradicional (ele pode ajudar o usuário a fluir e a pesquisar). A diferença é que os links de menu pulam para seções específicas do design de uma página. Para usuários que gostam de navegar dessa maneira, eles nem saberão que você criou esse truque bacana.
O Happy Tools parece um site com várias páginas, mas está tudo contido em uma única página. O menu funciona excepcionalmente bem e oferece aos usuários opções de navegação.
4. Torne-o altamente interativo
Se você deseja que os usuários continuem rolando, elementos interativos podem ser o truque que incentiva essa ação.
De efeitos de vídeo a paralaxe a toques de animação ou gamificação, a interatividade pode incentivar um maior movimento e tempo no local. Isto é especialmente verdade com designs de página única.
Lobods tem um estilo pateta com muita interatividade. Existem animações suspensas, elementos de slide e pop-in e texto de rolagem. Tudo se reúne de uma maneira que ajuda os usuários a percorrer o conteúdo com facilidade. (Outro bônus com esse design? Ele inclui bastante espaço para facilitar a visualização de movimentos e interações sutis.)
5. Tudo em uma tela
Se você não tiver muito conteúdo, o design de uma página, tudo em uma tela, pode proporcionar uma ótima experiência ao usuário.
Trate este design do site como um grande elemento de navegação com algumas informações e, em seguida, links externos ou de contato. Pode funcionar bem para projetos em breve ou para páginas de destino simples do portfólio.
Sylvain Theyssens faz isso pelo design de seu portfólio. (Na verdade, ele tem duas páginas: uma animação fofa no estilo “protetor de tela” que se transforma no design principal com o movimento do mouse.) A página é simples, informativa e impressionante. O design de uma tela oferece tudo o que você precisa saber sem atrapalhar nada.
6. Brevemente Design
Por falar em sites em breve, esse é o uso perfeito para o design de uma página.
Na maioria dos casos, as páginas em breve não têm muito conteúdo - talvez apenas um logotipo e uma introdução ou informações de contato. Na maioria dos casos, isso pode caber bem em uma página e é um uso eficiente do tempo do usuário até que o site principal seja lançado.
Green Chameleon faz exatamente isso. O design one = page é especialmente interessante por causa da animação interessante e do uso interessante do texto. Isso cria uma sensação de antecipação e evoca curiosidade - exatamente o que você esperaria em uma próxima página.
7. Seja um pouco descolado
Os sites de uma página podem ser um excelente playground, se você quiser experimentar algo um pouco diferente ou descolado. Uma tela incomum funciona bem com designs menores, porque você não acaba exagerando no truque.
Rou Hun Fan usa um tipo de letra especial e uma grade de fundo para destacar suas informações, portfólio e trabalho. A exibição criativa e o estilo minimalista são suficientes para incentivar a rolagem por um curto período de tempo, perfeita para um portfólio.
8. Dê aos usuários algo para fazer
Para manter o engajamento e manter os usuários interessados no design, faça muito em um site de uma única página.
Uma falha que muitos desses projetos têm é o fato de serem apenas longos rolos de informações. Divida-o com elementos clicáveis, apelos à ação e coisas a fazer. Esses elementos não apenas ajudarão você a descobrir o que os usuários desejam do design (e se eles estão atingindo os objetivos pretendidos), mas também ajudarão a mantê-los interagindo por períodos mais longos.
A Plethora divide uma longa página de rolagem com muitos botões no estilo de cartão para reservar pacotes de viagem. Cada uma dessas interações de clique é anotada com uma seta para criar uma experiência consistente do usuário.
9. Mantenha-o organizado
Com todo o conteúdo de um site em uma única página, é fácil para o design sair do controle. Mas também pode criar uma tela organizada para o conteúdo.
Quando se trata de trabalhar com uma página, uma grade apertada e uma estrutura uniforme podem ser suas melhores ferramentas. Use-os para manter o conteúdo organizado e agrupado de maneira fácil para os usuários navegar e entender.
Podcasts Repo faz isso bem com uma grade perfeita de podcasts para escolher. O site é flexível o suficiente com essa grade e estilo para aumentar o número de itens de conteúdo que precisar, sem sobrecarregar.
10. Use o espaço com sabedoria
Uma das considerações de design mais importantes para um design de rolagem mais longa ou de uma página é o uso do espaço. O conteúdo precisa ser espaçado de forma que as alterações sejam claramente estabelecidas, as ações sejam identificáveis e tudo seja fácil de ler. (Lembre-se de que muita rolagem pode começar a causar algum grau de fadiga ocular.)
A Nomenclatura de Cores de Werner é um site de uma página com muito conteúdo. O site é na verdade uma réplica de um livro de 1821. O espaço faz esse design funcionar.
Categorias e subseções com uma grade clara e muito espaço em branco aprimoram a legibilidade e a digitalização. Há muito aqui, mas parece bastante acessível, graças ao uso do espaço por toda parte.
Conclusão
Um design de site de página única pode ser exatamente o necessário para desmembrar alguns dos projetos mais pesados em que você está trabalhando. Esse estilo pode funcionar para qualquer coisa, desde sites em breve a portfólios. É apropriado para qualquer site sem toneladas de conteúdo.
Você tem algum design legal de site de uma página para exibir? Vamos vê-los. Compartilhe-os conosco no Twitter. Marque @designshack e @carriecousins com um link para este post e retuitaremos nossos favoritos.
