A teoria do design gráfico por trás da página de destino

Hoje, a maioria das páginas de destino está usando um padrão comum como o seguinte

• Seção da barra de navegação
• Seção de largura total com rolagem de imagens
• Três seções pequenas com imagens de destaque
• Detalhes do contato

Existe alguma teoria do design por trás disso? Como organizar um bom design para a página de destino?

Culpe as estruturas de grade como 960.gs e Bootstrap. Eles tornaram muito fácil criar esse layout exato:

http://getbootstrap.com/examples/carousel/

Essas estruturas resolveram muitos problemas do layout CSS e facilitaram a criação de sites / desenvolvedores da Web, estruturados, baseados em grade, que eram confortáveis, familiares e fáceis de usar.

Os sites temáticos começaram a vender variações de versões pré-fabricadas desse tipo de layout, tornando-o indolor para o Joe ou Jane comuns usarem. Esse padrão genérico de design tornou-se a visão de fato que a maioria das pessoas associa a "um site" atualmente.

O tweet do usuário do Twitter @jongold resume isso de maneira bem sucinta :

Acho que este artigo da NNG é útil nesse caso específico, especialmente para o layout "uma página":

https://www.nngroup.com/articles/page-fold-manifesto/

Em resumo, você precisa fornecer aos seus leitores / usuários um motivo para rolar sua página usando texto / conteúdo que os "conecte". Ao posicionar elementos que desenvolvem interesse, por exemplo, imagens para novas seções que aparecem logo acima da dobra, você cria um desejo na mente do usuário. Não é diferente da venda e você precisa dar às pessoas motivos para investir seu tempo no seu site, em vez de assumir que elas irão rolar ou lê-lo apenas por instinto.

Os exemplos que você está vendo nas respostas fornecidas não têm uma teoria real por trás deles e são apenas modelos e, como designer, você deve sempre buscar a originalidade.

Seu conteúdo deve ditar o fluxo da página. Leia e entenda seu conteúdo, então o posicionamento ideal deve chegar até você. Para mim, não existe uma solução "tamanho único" para projetar uma página da web. Existem elementos ou layouts que você pode incorporar, mas eles só podem ser identificados por meio de pesquisas e compreensão do conteúdo que você possui atualmente.

É uma boa pergunta, mas está errado. Não se trata de uma teoria de design para uma página inicial 'boa', mas de um período de abordagem de design - uma solução criativa lógica que melhor atenda aos objetivos / público-alvo do cliente, seja um site, folheto, aplicativo com tela sensível ao toque etc. Você deve começar em o mesmo local para os elementos principais do seu projeto (desenvolvi meu processo ao longo de muitos anos). Isso incluirá a base / marca / cores / fonte / imagens do cliente e, o mais importante, o que eles estão tentando alcançar a curto / médio / longo prazo.

Este é o principal exemplo: tive que montar um estande de convenções internacionais uma vez, nunca o fiz antes, ganhei o estande do show. Por quê? Porque eu não comecei com madeira, vidro, carpete, gráficos de grande formato, telas de plasma como as outras (ou seja, o modelo de inicialização da sua página inicial). O cliente queria quebrar o mercado com um novo produto. Eles tinham uma excelente equipe de vendas, então o briefing foi colocar as pessoas no estande durante o evento para que pudéssemos conversar com elas - é isso. Projetei o suporte em torno de um cyber café com assentos macios, café e chá caros (grátis), ponto de acesso à web e e-mail (grátis) e tela de visualização de grande formato para demos (com som e luzes). Eu também coloquei uma torre no meio que parou a 15 cm do teto com sinalização voltada para o NSEW, você podia ver isso de qualquer lugar do corredor. O suporte ficou bloqueado por 3 dias.

Voltar ao seu site. Começo com o que o cliente está tentando alcançar com a aplicação do site e como ele se encaixa no plano de marketing on-line / off-line mais amplo. Claramente, diferentes clientes terão objetivos diferentes, embora existam elementos comuns, como serviços / contatos. As coisas são que elas não vendem por si mesmas, portanto você não deve começar com elas. Expressar vantagens e benefícios envolverá os usuários, para conhecer seu cliente e o que eles estão tentando fazer com os negócios. Por exemplo, a unidade geral pode ser apoiar o desenvolvimento de mídia social e conteúdo OU uma transformação digital completa com serviços e formulários eletrônicos OU pode ser principalmente informações / dados em termos de uma autoridade local.

Outra pergunta: o celular é o foco principal? Isso pode parecer discutível quando 80% do tráfego está indo dessa maneira, embora comercialmente a área de trabalho / widescreen esteja ativa e boa e PODE SER o público principal de seus clientes - por exemplo, no HNW Finance mobile ainda não foi adotado devido a questões de segurança. Em todos os casos, você precisa conhecer isso PRIMEIRO antes de decidir sobre suas prioridades de UX, plano de site, canais / canal, navegação e página inicial .

Alguns exemplos breves - Finanças (Comercial Offshore) e Autoridade Local (Serviços de Água).

Requisito chave da empresa financeira: (1) promover equipe / experiência (2) benefício offshore (3) esclarecer o que eles fazem e seu setor de mercado (4) Governança (fundação, regulamentada, visão ativa / direta, nível / aptidão) (5) nova presença móvel (aplicativos chegando) Os itens acima direcionaram minha página inicial, mostrada abaixo. O menu é ultra simples e leva à equipe e contato (hambúrguer para o restante do site), logotipo claro e herói qualifica quem são e no exterior (sem carrossel), breve parágrafo de introdução resume a oferta com (no máximo 2 parágrafos) de base / sobre texto seguindo para a direita. Quatro painéis de CTAs (call to action) fornecem canais diretos para as principais informações de apoio à governança. Abre o Sans para o corpo 85% preto - compatível com dispositivos móveis. FEITO.

Requisito da autoridade local: (prestação de um serviço e informações para serviços de água / drenagem). Embora a organização tenha sido forte em meio ambiente e marketing, incluindo postagens sociais diariamente, a prioridade real era (1) a transformação para serviços digitais e a linha de ajuda de emergência ePay (2) (3) para o celular como canal primário de informações (4) 24/7 notificação ao vivo de trabalhos e questões atuais, inclusive de engenheiros no local. Os três principais canais identificados a partir da análise e da pesquisa com clientes foram (a) serviços de água (b) drenagem (c) consultoria / suporte (ajudar os clientes a se ajudarem, incluindo fichas técnicas, perguntas frequentes, centro de mídia para reduzir as chamadas telefônicas)

A solução abaixo segue esse exemplo. Nenhum herói como tal, nenhum espaço de carrossel é usado para introdução e links de serviços eletrônicos. 3 canais principais + pesquisa no site com ícones compatíveis com dispositivos móveis estão em um menu secundário na barra de navegação principal (branca) para manter esse primário muito claro apenas com o link de emergência e o hambúrguer do site. Pink apresentou como público-alvo 75% feminino (pagadores de contas) e funciona bem contra os azuis e os aquas (água). Ícones personalizados, simples e claros. As notificações principais (conduzidas pelo Twitter) seguem isso na tela inicial. Forte contraste / legibilidade de cores para regulamentação de acessibilidade (departamento estrito). Dirigido a CMS, incluindo responsivo a dispositivos móveis.

Por fim, não se deixe levar pelas tendências nos sites de modelos e na inicialização. Atualmente, existe uma tendência (outono de 2016) de usar texto branco sobre cenários claros, fontes de cabeçalho fino (como Helvetica Ultra Light) e <60% de preto para o texto do corpo, ou seja, cinza. Elas vêm do design de impressão, embora criem vários problemas de acessibilidade (por exemplo, para deficientes visuais e para representação em telas móveis). Lembre-se de seu treinamento em design, forma e função, é um equilíbrio que é particularmente importante comercialmente na tela. Você é um designer, não um lemming. Lidere a lógica, não siga os outros cegamente.

Eu dediquei um tempo para escrever isso porque acredito fundamentalmente na abordagem e quero ajudar você e outras pessoas. Não se prenda ao meu estilo de design ou criativo, você terá o seu próprio - pense na abordagem da solução. Ele trabalhou para mim por quase 20 anos no design de serviço completo e construí sites com sucesso desde 1997 em um MacII, quando tínhamos apenas 40K por página e 256 cores para brincar :).

Boa sorte na sua jornada

Uma página de destino é sobre o arremesso do elevador. Atualmente, a maioria dos sites como um todo não passa de páginas de destino. Cada página foi cuidadosamente projetada para direcionar as pessoas para uma compra.

Para muitas pessoas, isso significa - manchete, passo do elevador, botão para comprar. E, em teoria, para muitas empresas, isso funciona. Em termos simplistas, isso é chamado de acima da dobra. Mas isso não é inteiramente verdade.

"Acima da dobra" vem da terminologia do jornal, onde há literalmente uma dobra no jornal. Os anúncios acima do vinco superam os abaixo. Esse não é realmente o caso do design da web - estudo após estudo provará que é porque eles não estão fazendo os estudos certos. Veja este artigo em Kissmetrics - Por que a dobra é um mito para um estudo melhor.

Ao analisá-lo corretamente, você verá menos sobre "O que as pessoas veem quando minha página é carregada" do que o seguinte:

• Eu apresentei os benefícios do meu produto?
• A Chamada à Ação (CTA) é fácil de encontrar e bem formulada?

À medida que os profissionais de marketing entendem isso melhor, eles desejam que os designs atendam a esses critérios. Surgem então modelos como Grid e Bootstrap. Não se engane - não importa o tamanho de um modelo, se ele não se converter em vendas, ninguém o usaria .

Digite esses modelos e outros. É uma maneira rápida e fácil para designers ou mesmo não designers obterem uma página decente em funcionamento. Um bom profissional de marketing o usará como base, mas o cortará para atender às suas necessidades exatas ou contratará alguém para cortá-lo para atender às suas necessidades exatas (história da minha vida!).

Então, um bom profissional de marketing fará testes A / B com pequenas alterações no design ou na cópia. Refine cuidadosamente para melhorar a taxa de conversão. A maioria das empresas não tem recursos para fazer isso. Mas adivinhe, estudando sites maiores e criando modelos, você já está no caminho certo.

Sumário

Existe uma teoria do design por trás disso? Um pouco, mas a teoria do design, especialmente em uma landing page, vem mais da pesquisa e da teoria do que da teoria do design. Por fim, as páginas de destino são ferramentas de conversão. Independentemente de você usar as técnicas comprovadas que agora está acostumado a ver ou algo completamente diferente - em última análise, ele viverá e morrerá pela conversão.

Perguntas relacionadas

As interfaces realmente precisam "parecer boas"?

Esse tipo de layout que você está descrevendo pode ser experimentado e testado, mas acho que ele perdeu o impacto que teve em 2012 ou 2013. Como outro dito acima, estruturas como o Bootstrap contribuíram para ver esse padrão em todos os lugares, em temas e modelos também, muitos dos quais empregam o Bootstrap.

É um layout muito fácil de reduzir, de acordo com a minha experiência. Não por coincidência, em 2012 ou mais, os smartphones estavam ficando mais baratos, ficando disponíveis para todos, assim como para mais tablets.

Infelizmente, acho cada vez mais difícil usar esse posicionamento básico de elementos e refiná-lo em algo visualmente interessante, e comecei a revisar as idéias de layout que eu tinha antes dessa tendência e refiná-las.