O que há com a moda de design de sites de uma página?


10

Eu já vi um afluxo de sites que colocam todo o conteúdo em uma página, neste site . Até os sites de algumas das listas que vejo na Smashing Magazine fazem isso ( como este, com o que parece ser uma centena de sites, a maioria dos quais o usa).

Como programador, esse estilo me incomoda (por várias razões, principalmente técnicas, entre as quais manutenção, SEO, tempos de carregamento etc.), mas o mais importante é que estou curioso para saber por que se tornou popular entre designers para começar?


2
Uau! Ainda não vi isso - mas odeio mesmo.
Farray

O efeito nesse primeiro link é chamado de parralax . Alguns sites fizeram isso com estilo (por exemplo, o famoso Nike Better World ), levando inevitavelmente a um monte de pessoas dizendo "EU QUERO UM DESSES" sem pensar se é apropriado no caso deles. Quando existe uma justificativa legítima para uma ordem de leitura fixa de cima para baixo para muito conteúdo em vários temas, e onde existem bons auxiliares de navegação com link de salto, ele pode funcionar.
precisa saber é o seguinte

Respostas:


9

Existem duas tendências separadas envolvidas.

A primeira é a tendência de ter um site simples. Se for um site de brochura, provavelmente não precisará de quatro páginas separadas. Uma página de rolagem é mais fácil de usar, navegar e manter. Muitos sites de aplicativos para iPhone usam esse modelo. Assim como muitas pequenas empresas. Muitos sites podem se beneficiar disso.

A outra tendência é os desenvolvedores de Flash finalmente descobrirem HTML, jQuery e AJAX e ainda pensarem no antigo modelo Flash de 'um arquivo = um site'. Isso é diferente da primeira tendência, pois este é um site grande, com muito conteúdo compactado em uma página de dados / interação. Como você declara, esse método tem todos os tipos de desvantagens, embora sejam superáveis ​​com o código certo (certificando-se de que os URLs mudem / sejam marcáveis, o Google pode navegar no conteúdo, os tempos de carregamento são gerenciados via AJAX etc.).


3

Eu acho que uma das melhores idéias por trás de um site de uma página é que há mais um aspecto narrativo nele. O melhor exemplo em que consigo pensar é nesta página : Um site de convite de noivado / casamento. Este é um site incrível, e funciona por várias razões, uma delas é que tudo flui tão bem juntos. Não teria o mesmo impacto espalhado por um conjunto de páginas.

Esta demonstração que foi originalmente feita para mostrar o IE9 é sobre contar histórias . Quase como um livro de figuras, mas com rolagem em vez de virar páginas. E por isso é realmente perfeito e legal. Não é realmente prático para criar um site de negócios, mas destaca um motivo pelo qual a vibração de uma página é útil.

Também funciona com páginas menores, com pouco conteúdo . Quando me casei, tinha todas as nossas informações em um site de uma página, porque não havia conteúdo suficiente para justificar a passagem de uma página para outra. Era mais fácil criar e manter um site de uma página e o tempo de carregamento não era realmente uma preocupação.

Quando se trata de negócios, acho que é um caso mais difícil. Eu pensei que um exemplo memorável foi quando o Google lançou seu telefone Nexus - eles fizeram isso em um site de uma página. Desde que eles lançaram seu tablet e anunciaram seu Q, não é mais assim, então não posso vincular, mas foi realmente legal ver tudo em um só lugar. Você reduz os cliques e cria uma experiência mais imersiva .

Eu acho que você verá muitos exemplos de pessoas fazendo isso apenas para flexionar seus músculos codificadores ou para tentar capitalizar uma tendência. Mas isso acontece o tempo todo no mundo do design. Mantenha-o na mesa quando considerar o objetivo do seu site e use-o quando apropriado!


2

Há uma vantagem nisso (apenas uma que eu possa pensar!), Que é que, se você deseja pesquisar usando Ctrl+ F, todo o conteúdo está em uma página, para que você possa pesquisar no site inteiro de uma só vez (supondo que o conteúdo seja pesquisável) .

Eu acho que isso deriva em parte do conceito de "Não faça o usuário pedir mais conteúdo - apenas entregue a ele". Como Google, Twitter, etc., automaticamente, dando mais resultados quanto mais abaixo você rola.

Vale a pena assistir ao GoogleTech de Aza Raskin, de 2008, "Não me faça clicar" .

A conversa toda é muito interessante, mas o trecho relacionado aqui começa às 29 minutos. Aqui, ele cortou o Firefox para que você obtenha todas as guias do navegador em uma página contínua de rolagem vertical.

Gostaria de saber se este foi o precursor do que você está vendo agora.


1

Duas palavras: Experiência do Usuário.

Os sites básicos do portfólio não devem exigir que o usuário clique em várias páginas para ver o que ele tem a oferecer se o conteúdo for simples e direto.

Ou, mais especificamente, a chamada à ação é singular. Quando o objetivo do site é: "contratar-me", o site pode ser contraproducente quando o mapa do site é desnecessariamente complexo.

EDIT: alguns exemplos abaixo ...

http://joelglovier.com/

http://pixelightcreative.com/

http://www.tinybigstudio.com/

http://www.charleselena.com.au/

http://joshhemsley.com/

http://www.digitallabs.tv/


2
Eu concordaria mais com isso se todos eles pudessem rolar para baixo, mas essa não é sua função ou intenção geral. Vários rolam para o lado, e muitos não mostram evidência de rolagem e são, de fato, projetados para se parecer com várias páginas, jogando sua teoria pela janela.
Shauna

Shauna, embora eu esteja familiarizado com os sites de rolagem horizontal, não estou familiarizado com os outros aos quais você está se referindo. No entanto, posso apontar para você meia dúzia daquelas sobre as quais estou falando. (veja as edições acima)
Joel Glovier

1

Do ponto de vista de SEO, o design do site de uma página é uma moda passageira.

É algo que provavelmente arruinará seu desempenho em SEO, especialmente quando você trabalha em um plano de negócios altamente competitivo. Eu sei que os designers gráficos raramente levam isso em consideração e, por outro lado, os clientes não têm conhecimento suficiente em SEO, mas se você perguntar a qualquer especialista em SEO, eles dirão o mesmo.

Minha dica? Peça ao seu especialista em SEO para fazer uma pesquisa de palavras-chave e fornecer um esboço da estrutura do seu site.

Você pode ler mais no Search Engine Land, esses caras conhecem muito bem o SEO;) https://searchengineland.com/single-page-websites-seo-182506


0

Parece que é uma tentativa de colocar tudo "acima da dobra" - a área preciosa e preciosa onde fica o espectador comum com pouco tempo de atenção. Vários estudos de usabilidade mostraram isso, então as pessoas tentam colocar as coisas "importantes" lá. Parece que esse designer sentiu como "tudo é tão importante".


O que me deixa perplexo é o número de sites que vi que fazem isso. Aqui está uma das listas da Smashing Magazine a que me referi; desisti dela cerca de um terço do caminho porque eram todas assim: smashingmagazine.com/2011/04/19/…
Shauna

0

Eu não acho que seja algo mais do que alguém usando o truque mais recente para atrair as pessoas a lerem um site.

Veja, por exemplo, o site da Nike no artigo vinculado da @ Shauna. Honestamente, quanta inovação resta no design de tênis de corrida e na publicidade desses mesmos tênis de corrida? Esse conteúdo poderia ter sido facilmente colocado em um folheto ou no Flash se eles quisessem o paralaxe. Em vez disso, eles podem adicionar um efeito bacana de paralaxe como resultado do novo esquema de navegação sem a carga do Flash.

Eu chegaria ao ponto de adivinhar que há um tutorial em HTML5 / CSS no site da Smashing Magazine que mostra como fazer isso que gerou os sites mostrados.


O voto negativo? Sim, isso foi justo. Não é uma das minhas melhores respostas. Eu acho que fiquei um pouco confusa quando escrevi isso.
Philip Regan

Encolher de ombros Eu não tenho representante suficiente neste site para votar, por isso não fui eu.
Shauna 14/07

Eu dei-lhe um upvote para anulá-lo porque você parece estar vindo de um bom lugar;)
thomasrutter

0

Na verdade, acho que o primeiro item (a barra de deriva) que você vinculou tem um fator interessante: fica bem em movimento.

Não fazia sentido para mim até clicar em um dos links do menu, e agora vejo que a animação foi a força motriz de toda a ideia. É como o efeito de câmera de três aviões da velha escola, como um desenho animado antigo de Popeye ou Disney.

Eu acho que a rolagem nessa página é um erro ou um recurso que eles não conseguiram se livrar.


0

Um problema é que poderia ser popular entre os clientes! Esses sites remontam aos dias dos microsites flash de um produto recém-lançado; a paralaxe parece estar fazendo esse trabalho no momento. Para um microsite de produto, acho que eles estão bem; para um site que realmente possui conteúdo, eles definitivamente não são adequados. Penso que outra coisa é que os designers gostam de mostrar que estão atualizados e "na moda", ter um site em uma nova técnica popular de moda pode parecer benéfico. Todos os itens acima cobrindo a internet em sites semelhantes.


0

Acho que você respondeu sua pergunta no título - ou seja, é uma moda passageira.

Assim como quando o Javascript (e depois o AJAX) apareceu anos atrás e as pessoas estavam fazendo todo tipo de coisas sofisticadas com ele, melhor suporte ao Jquery e CSS 2/3 e melhor velocidade de renderização nos navegadores estimularam uma nova rodada de experimentação com novas maneiras de criar sites que podem não ter sido tão práticos no passado devido a determinados navegadores mais antigos.

Mas, assim como no CSS, Javascript e AJAX, a moda amadurece e se suaviza, e se torna mais aprimorada, agradável e útil ao longo do tempo. Seu primeiro exemplo é indutor de dor de cabeça simples, com sua rolagem desarticulada e louca (se você estiver, digamos, no início, e pressionar "Galeria"). Na minha humilde opinião, foi longe demais e não é uma experiência suficientemente suave para justificar a separação do normal. Isso não significa que todos os sites que usam técnicas semelhantes serão ruins.

É importante que os designers experimentem novas maneiras de fazer as coisas com as novas tecnologias. Por um momento, não sugeriria que isso nunca deveria ter sido tentado. Mas é o que é - experimental.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.