10 elementos de design da Web que você não deve ignorar
Quando se trata de projetar e construir sites, isso nunca parece acontecer rápido o suficiente.
Dado esse ritmo acelerado, muitos pequenos detalhes que eventualmente são necessários para construir o site são muitas vezes deixados de fora do processo de design. Embora esses detalhes possam ser menores, eles são o que levam um site de bom a realmente incrível.
Esses detalhes costumam ser fáceis de serem ignorados porque não influenciam a aparência geral do site. O problema é que, à medida que sua equipe de desenvolvimento trabalha com o design, ela será forçada a projetar e criar esses elementos para você de qualquer maneira.
Você poderia ajustar o ciclo de produção para que os desenvolvedores tivessem tempo de devolver esses ativos para você, mas por que não fazer tudo de antemão para que o processo seja muito mais limpo?
Pior ainda, a equipe de desenvolvimento pode decidir seguir em frente e criar os ativos à medida que avançam.
Embora muitos desenvolvedores tenham um olho aguçado para o design, o criativo encarregado de projetar o website deve, em última instância, ser aquele que planeja esses elementos. Planejar com antecedência as nuances mais sutis pode ter um impacto profundo na qualidade do produto final.
Cada elemento abordado neste artigo origina-se de uma pergunta que um desenvolvedor perguntaria ao designer se um elemento estava faltando no design.
Vamos nos aprofundar nos dez elementos principais que você deve ter em mente enquanto aprimora seu site.
1. Links
Embora o estilo dos vários estados de um link seja realmente básico, você pode se surpreender com a frequência com que todos os detalhes extras são ignorados. Inclua os seguintes estados para todos os links da página:
- Normal
Este é o estado padrão de um link; ou seja, um que não está sendo pairado ou sendo clicado ou apontando para uma URL que o usuário já tenha visitado. Este é o formato de link que a maioria dos designers sempre cobre. - Visitado
Este é um link que não está sendo exibido ou clicado, mas cujo destino foi visitado pelo usuário. - Ativo
Um link ativo é aquele que está sendo clicado pelo usuário. A maioria dos desenvolvedores replicará o estado de foco aqui se um estilo não for fornecido a eles. - Flutuar
Finalmente, o estado de foco é o que o link se parece quando o usuário passa o mouse sobre ele. Este e os estados normais são aqueles para os quais a maioria dos designers se prepara.
Um detalhe que é freqüentemente negligenciado é que esses vários estados precisam ser planejados para todas as regiões de um site. Por exemplo, muitos sites têm cópia de corpo escuro contra um fundo claro, mas o contraste é invertido no rodapé. Você precisa planejar todos os vários contextos de links encontrados em toda a página.
Em Churrasco de lua cheia Por exemplo, vemos links vermelhos básicos dentro da região de conteúdo e links brancos básicos no rodapé abaixo. Mais uma vez, um pequeno detalhe, mas importante, no entanto.
2. Formulários
Para muitos designers, a configuração de formulários é crítica e impossível de ignorar. No entanto, para muitos outros, parece vir como uma reflexão tardia distante.
O problema com a última atitude é que as formas geralmente representam a única maneira real de converter visitantes em clientes. E sem o planejamento e design adequados, a usabilidade desses formulários pode cair, prejudicando o único ponto de conversão do site. A preparação para esses elementos é essencial, mesmo que pareça muito menos premente para os clientes do que cor, marca e imagens.
Duas das considerações mais importantes ao dispor de um formulário são:
- Etiqueta de forma
Normalmente, os formulários coletam dados pessoais que os usuários relutam em distribuir. Como tal, informar corretamente os usuários sobre o propósito exato do formulário é sábio. - Campos de entrada e rótulos
Em segundo lugar, planeje como os campos de entrada do formulário serão dispostos na página e como os rótulos desses campos serão estilizados e orientados em relação aos campos.
Quando deixados para seus padrões, os formulários podem parecer estranhos. Mas com uma preparação adequada, o site parecerá perfeito e muito mais eficaz. Vejamos um ótimo exemplo que deve ter começado com um bom planejamento:
Esta forma crítica para os negócios Impressionante foi claramente bem pensado. Toda a missão e propósito da página foram cuidadosamente considerados. Do título e introdução ao layout de cada conjunto de campos, com seus rótulos e estilos de controle, esse formulário é um modelo de planejamento.
Planejar formulários realmente nos leva a várias outras considerações ...
3. Comportamento dos botões
Os botões podem ser usados em todo o site para várias finalidades, mas eles também parecem ser negligenciados, assim como os vários estados de um botão. Os quatro estados de um botão são:
- Padrão
Este é o estado padrão de um botão, aguardando para ser clicado. A maioria dos designers cobre este, mas falta os outros. - Flutuar
O estado de foco é visto quando o usuário passa o mouse sobre o botão. Esse estado é útil para indicar ao usuário que o botão é um item acionável. - Clique
Depois que o usuário clica no botão, esse estado indica visualmente que ele clicou nele. Fornecer essa sugestão visual pode ajudar a minimizar a frustração dos usuários. - Desativado
O estado desativado de um botão é talvez o menos usado, mas pode ser muito útil para os desenvolvedores. Raramente esse estado é planejado, a menos que o designer tenha preparado um processo de validação para o formulário (veja a próxima seção).
Muito parecido com os vários estados de links, certifique-se de considerar os vários estados dos botões usados em todo o site. De formulários de login pop-up a campos de pesquisa até formulários de inscrição em boletim informativo, todos esses botões precisarão de estilos correspondentes.
4. Validação de formulário
Um detalhe relacionado importante é a validação de formulário. Esse é o ponto crítico em que o site comunica os requisitos do usuário e os erros em um formulário. Existem três coisas fundamentais a serem consideradas:
- Os campos obrigatórios
Todos os campos obrigatórios devem ser indicados. Na maioria das vezes, isso é feito com um asterisco, como visto em Por favor comece desde o começo :
- Validação em tempo real
Algumas validações podem ser feitas em tempo real quando o usuário preenche o formulário. Esse tipo de validação informa ao usuário o mais rápido possível de quaisquer problemas com os dados que eles introduziram. Isso pode ser feito muito bem com este Plug-in de validação jQuery :
- Validação pós-back
Esse tipo de validação acontece depois que o usuário enviou o formulário. O estilo usado para validação em tempo real é frequentemente repetido aqui, mas outra opção é agrupar todos os erros em uma única mensagem, como visto em Moo :
5. Mensagens de status: erros, avisos, confirmações, etc.
Os usuários geralmente precisam de algum tipo de feedback após realizar uma ação no seu website. O cenário mais provável é depois de enviar um formulário, mas muitos outros eventos também podem ocorrer. Considere cuidadosamente seu website e as ações que os usuários podem realizar e planeje as mensagens que o website precisará comunicar.
Em A vida hoje , vemos uma mensagem de validação que poderia servir facilmente como um estilo global para mensagens de erro. E com uma ligeira mudança de cores e ícones, também pode ser usado para avisos mais sutis ou até mesmo mensagens de confirmação:
6. Estendendo o fundo em telas maiores
Dependendo do estilo do site, os elementos de plano de fundo podem ser um ponto problemático para seus desenvolvedores. A maioria das origens é simples e não requer muita preparação, mas algumas são complicadas por gradientes, padrões e imagens.
Considerando que os monitores grandes estão se tornando cada vez mais comuns e que a maioria dos projetos está planejada para uma linha de base de 960 pixels de largura, muito espaço na tela é deixado em aberto. Se o seu plano de fundo incluir algo remotamente complicado, convém planejar como ele se estenderá para preencher telas maiores.
No exemplo que construí abaixo, eu tive que acomodar uma textura de madeira que se estendia em todas as direções. Não é o tipo de coisa que você quer que um desenvolvedor pesado enfrente.
7. Elementos HTML Base
Para sites com muitas cópias, o design e o estilo dos elementos HTML básicos são fundamentais e não devem ser negligenciados. Mas em muitos sites de marketing que têm um layout ocupado e um estilo visual distinto, os elementos básicos são esquecidos. E, claro, o desenvolvedor nunca vai muito longe na criação de um site antes de ter que produzir um modelo de página padrão de qualquer maneira.
Aqui estão os elementos base para planejar sempre: parágrafos, títulos de 1 a 6, listas não ordenadas e ordenadas, dados tabulares, campos de formulário, imagens e texto em negrito e itálico.
Em muitos sites que eu trabalho, eu coloquei um guia de estilo para ajudar os desenvolvedores, algo assim:
8. E-mails do site
Uma coisa que não vejo nenhum plano de designer é o e-mail gerado pelo website. Tal elemento básico é fácil de perder, porque normalmente não é o foco principal do site. E, no entanto, o email é uma ferramenta poderosa que pode promover e ampliar um serviço.
Minha sugestão é revisar cuidadosamente o conteúdo do site no estágio de planejamento para procurar por e-mails que possam ser enviados. Alguns dos mais comuns são:
- Confirmação de inscrição na lista de discussão,
- Confirmação de registro,
- Confirmação de conclusão de formulário (como para um formulário de contato),
- Confirmação de pedidos após uma compra.
Se você realmente quer impressionar os seus clientes e desenvolvedores, prepare também um modelo de marketing por e-mail para o site. Você fornecerá aos usuários uma transição perfeita do website para a caixa de entrada, e você manterá um controle cuidadoso da marca em seus vários formulários.
9. Esticando a página
A questão de como um design vai se estender para acomodar o conteúdo em mudança também raramente é abordada, mas pode ser crítica, dependendo do estilo do site. Vejamos um exemplo em que isso poderia ter sido confuso:
Churrasco de lua cheia tem uma home page apertada. Esse design não permite muito movimento ou alteração no conteúdo. Tudo tem um tamanho e posicionamento específicos. Então, o que acontece se os proprietários decidirem realmente prolongar a mensagem de boas-vindas ou adicionar uma imagem? Felizmente, eles planejaram isso. Como você pode ver neste mock-up, editei a página para incluir o dobro do texto. A página se estende perfeitamente e acomoda para isso:
Preparar versões alternativas de um layout com muito mais conteúdo pode ser extremamente útil para demonstrar como planejar esse cenário.
10. Animações: pop-ups, dicas de ferramentas, transições, etc.
Em um site HTML e CSS padrão (ou seja, sem o Flash), animações e transições são tão fáceis de ignorar. E quando negligenciados, muitas vezes nem sequer serão acomodados. Portanto, se as animações forem críticas, sua melhor opção é fornecer aos desenvolvedores uma amostra de como eles devem funcionar para que o produto funcione como deveria.
Algumas das animações mais comuns aparecem em:
- Dicas de ferramentas
Esses pequenos pop-ups quando os usuários passam o mouse sobre os elementos. - Rotadores de imagem
Os slideshows da página inicial são uma moda, e uma ampla gama de opções está disponível para transições e estilos. - Lightbox
Você pode estilizar não apenas a própria mesa de luz, mas também a transição para ela.
Cada um desses elementos animados possui um estilo visual distinto que deve ser acomodado por conta própria.
Por que eu deveria me importar?
Muitos dos elementos apresentados aqui parecem mais úteis para os desenvolvedores do que os designers. Para ser justo, isso é parcialmente verdade: se você preparar todos esses elementos antes do tempo, os desenvolvedores vão adorar você. Estes são os tipos de coisas que os desenvolvedores se cansam de pedir ou de ter que descobrir por conta própria.
Ainda assim, ao fazer todo esse trabalho antes do tempo, você impede os desenvolvedores de adivinhar e, assim, você mantém o controle do design. E mantendo o controle do projeto, você tem uma chance muito maior de poder adicionar o tipo de polimento que transforma um site comum em um excelente. Alguns designers se referem a isso como o molho secreto que faz seus desenhos cantarem.
E se isso não for motivação suficiente, considere isso. Os projetistas que planejam bem o futuro e entregam um pacote completo são fundamentalmente mais valiosos. Eles não apenas criam um produto de melhor qualidade, mas também reduzem o custo de produção. Isso significa que há mais espaço para lucro, o que, é claro, deixa todo mundo feliz.
Portanto, mantenha todos esses detalhes em mente e divirta-se planejando seu site. Francamente, esses detalhes são metade da diversão de projetar para a web, esse meio em constante mudança que acomoda a interação do usuário e a mudança de conteúdo.
Patrick McNeil é escritor freelancer, desenvolvedor e designer. Em particular, ele gosta de escrever sobre web design, treinar pessoas no desenvolvimento web e construir websites. Mais recente projeto de livro de Patrick é O manual da Web do designer ; Ele inclui muitos tópicos adicionais ao longo das linhas deste artigo. Você pode descobrir mais sobre isso TheWebDesignersIdeaBook.com . Siga Patrick no Twitter @designmeltdown .
O que você projeta para que todos os outros pareçam esquecer? Você já apresentou extras como estes para seus clientes? Que tipo de coisa você acha que os desenvolvedores sempre pedem para você adicionar a um design?