As pessoas constroem websites por vários motivos: para alcançar um público mais amplo; para vender, promover ou expressar; para apaziguar a pressão dos pares. A novidade deixou de ser uma razão por volta de 2001. Em seu lugar, temos claro: claro, eu tenho um site; é claro que você tem que ter um mural do Facebook, uma conta no Twitter, um perfil no LinkedIn ou uma placa no Pinterest; Claro que todos nós temos email.

E, é claro, o design da Web usa HTML e CSS - dois idiomas com os quais os criadores e designers de navegadores encontram um ponto em comum. Mas muitos web designers criam variedade incrível com as mesmas regras linguísticas, perguntando o que, se em vez de cair, é claro.

Outros ficam com o que funciona.

Aqueles que seguem a sabedoria convencional usam não apenas a linguagem, mas as mesmas frases - em termos da Web, não apenas HTML / CSS, mas Arial e Georgia, layouts de 960 pixels de largura ou links azuis sublinhados. Usar tais convenções não está errado. Mas os designers que não escolhem usar padrões estabelecidos - que seguem a sabedoria convencional sem perguntar por quê - perdem oportunidades.

A estrutura padrão

A estrutura padrão de nível único tem benefícios práticos. É simples e simples é bom para prazos. Mais importante, é familiar. Tanto o público de navegação na Web quanto os web designers têm um acordo implícito sobre como os sites funcionam. Seguir o padrão de casa / serviços / sobre / contato serve designers e audiências, atendendo às suas expectativas.

Outras noções são tão óbvias que são fáceis de ignorar:

  • As pessoas esperam que clicar na palavra "contato" apresente e-mails ou detalhes do telefone.
  • Eles sabem que encontrarão um link inicial no canto superior esquerdo de uma página. Em conjunto com um logotipo, claro.
  • Eles verão declarações de direitos autorais no rodapé, muitas vezes à esquerda, com um ano.
  • Eles sabem que os sites rolam para cima e para baixo, não de um lado para o outro.

Além disso, atender ao comportamento aprendido alivia a fricção. Mas os designers que seguem as convenções, com ou sem perceber, reforçam as próprias convenções.

  • Clique no logotipo e obtenha um formulário de contato? "Isso não é o que eu esperava."
  • Clique em um link que diz "leia mais" e receba um mural pago? "Apenas me dê o artigo."
  • Rolar horizontalmente em vez de verticalmente? "Isso é estranho. Está quebrado?
  • Gráfico mais proeminente na parte inferior de uma página? "Está de cabeça para baixo."

É fácil tirar a conclusão óbvia: romper com a convenção e arriscar alienar as pessoas.

No entanto, nem todas as convenções são absolutas. A maioria dos sites segue as regras com suas próprias diferenças estilísticas. Nem todos os links em todos os sites são sublinhados em texto azul. Nem todas as fotos são iguais. Nem todo layout usa o mesmo arranjo de colunas. As pessoas se adaptam porque variações de convenção são, elas próprias, convenções. As pessoas esperam encontrar peculiaridades entre os sites.

Nesse caso, como os sites não convencionais escapam com o rompimento de rank? Seus designers inventam novas convenções que são fáceis de aprender.

Pensamento adaptativo

O velho ditado, "não quebre o que não está quebrado" é um bom conselho até que alguém mude a definição de "quebrado".

Desde o início da web, os designers podiam confiar em ecrãs com pelo menos 640 pixels de largura . Mais recentemente, 1024 pixels e mais são comuns. A partir de 2007 minúsculoaparelhos colocar sites nas mãos das pessoas. De repente, projetando para 320 pixels estava em voga .

Mas forçados a mudar e a escolher mudar são atitudes diferentes. A criatividade não tem medo de seguir um caminho de maior resistência.

Roberts

The Roberts Group Website experimenta um layout baseado em grade. Os usuários navegam em seu site com um "mapa do site literal". Links de texto fornecem um substituto para usuários desconfortáveis ​​com a grade.

Como quebrar convenções

Nem todo risco vale a pena. A maioria dos projetos da Web não convencionais falha não porque eles quebram padrões, mas porque não comunicam novas promessas. O truque é identificar por que as convenções surgiram.

1. Coloque um link inicial com um logotipo no canto superior esquerdo

Problema: os visitantes de um site complexo podem se perder. Um link de página inicial confiável funciona como o botão de redefinição do site.

Pensamento convencional: cada carregamento de página começa no topo de uma página. Como a maioria dos layouts da web rola para baixo, o topo de cada página é o local mais lógico para um botão confiável.

Pensamento não convencional:

  • Use position: fixed para manter um botão home no mesmo lugar nos navegadores dos visitantes, não apenas na página
  • Incentive as pessoas a percorrer o conteúdo com um link inicial proeminente na parte inferior das páginas
  • Remova a página inicial em favor de uma rica barra de navegação

2. Uma lista de artigos fará com que seus títulos, imagens ou "leia mais" sejam clicáveis

Problema: as pessoas precisam de pistas óbvias para obter informações que os títulos e as descrições prometem.

Pensamento convencional: títulos e miniaturas representam melhor o conteúdo que descrevem. O caminho mais curto para "Quero ler mais sobre isso" é torná-lo clicável. Portanto, torne os títulos e miniaturas clicáveis.

Pensamento não convencional:

  • Faça o teaser inteiro - imagem, título e descrição - clicáveis. Links com mais área de superfície são bons para design móvel e fáceis de criar com CSS
  • Vire de cabeça para baixo: lidere com uma ou duas frases convincentes e coloque o título clicável embaixo em um texto menor
  • Em vez de “ler este agora”, permita que os usuários adicionem artigos a uma fila para serem lidos no tempo que quiserem, na ordem que escolherem

3. Crie um modelo antes de escrever o conteúdo

Problema: estética, não código ou semântica, criam a primeira impressão de um site.

Pensamento convencional: projete o visual do site primeiro. Deixe um espaço para o conteúdo.

Pensamento não convencional:

  • Use tipografia e cor para imbuir o conteúdo em si com humor, voz e personagem. Em seguida, crie elementos que reforcem esse caractere, se necessário, como texturas de plano de fundo e barras laterais.
  • Faça a parte de fundo do conteúdo. Altere as cores por página para refletir o humor, o tópico ou a função.
  • Ocultar ou diminuir as informações da barra lateral até que o usuário escolha prestar atenção a ela.
Stories at Longboard World

Histórias no Longboard World não apenas desafia a regra "teasers must be text", mas aprende uma lição com Lei de Fitt fazendo todo o notecard clicável.

Diretrizes para regras

Quebrar o comportamento aprendido do público é renegar uma promessa. Convenções são sinônimo de confiança. A melhor maneira de quebrar regras estabelecidas, então, não é quebrá-las, mas substituí-las.

1. Substitua, não quebre, regras

Para mudar a convenção, precisamos respeitar as regras antigas.

  • Os primeiros navegadores precisavam tornar os links óbvios, então eles sublinhavam o texto clicável.
  • Linhas de texto maiores que 400 pixels são difíceis para as pessoas seguirem linha após linha. As colunas não apenas encurtam as linhas, mas permitem uma organização mais horizontal.
  • Sites ricos em conteúdo criam dores de cabeça organizacionais. As ferramentas de pesquisa permitem que as pessoas procurem por uma frase específica em vez de procurar por categorias arbitrárias.

2. Siga as suas próprias regras

Quando as pessoas associam, digamos, caixas de laranja com links, o design não deve variar dessa promessa. Toda vez que clicar em uma caixa laranja leva as pessoas para uma nova página, essa regra é reforçada. Toda caixa laranja que de outra forma irá degradar a regra.

3. Dê tempo

Tanto os proprietários de sites públicos quanto os relutantes ganham confiança por meio da exposição. O design pode ajudar, diminuindo a curva de aprendizado - tornando as regras claras.

4. Use metas

Convenções funcionam. Eles são fáceis para designers e audiências. Quebrá-los por causa da mudança não favorece ninguém. Em vez disso, repensar os problemas.

  • O consenso popular se opõe a essa legislatura. Se as pessoas visitam o site, temos menos de um segundo para conquistá-las. Como podemos mudar as mentes tão rápido?
  • Queremos mostrar mais de 200 fotos. Como podemos tornar isso fácil para as pessoas navegarem?
  • Nossos produtos são seguros, mas temos a reputação de não nos preocupar com o meio ambiente. Comunicados de imprensa não significam nada. Como podemos mostrar preocupação genuína no subtexto?
  • Nós temos um excesso de estoque. Ninguém está comprando. Como podemos transformar isso em vantagem?
Evolution of the Web

Evolução da Web ousa quebrar a "dobra da mão direita" dos navegadores estendendo-se para os lados. A animação no início demonstra aos usuários o que eles obterão pela rolagem lateral.

À medida que o web design evolui, obedecer à convenção é mais arriscado do que experimentar. Quando o público percebe projetos não convencionais que funcionam bem, móveis ou não, eles também se tornam conscientes de sites que se limitam às convenções de ontem. Designers que reconhecem isso podem dar grandes passos para construir sites melhores.

Você quebra as regras ou joga pelo seguro? Quais regras de web design você gostaria de reescrever? Deixe-nos saber nos comentários.

Imagem em destaque / miniatura, imagem não convencional via Shutterstock