Contente

• Dar um passo
• Método 1 de 2: As 3 regras básicas
• Método 2 de 2: Diretrizes
• Pontas
• Avisos

Projetar um ótimo site pode parecer uma tarefa difícil, mas contanto que você mantenha o básico em mente, você achará o processo interessante e divertido. É mais do que apenas boa aparência! Mostraremos o básico e algumas diretrizes gerais para ajudá-lo a projetar sites que as pessoas visitarão continuamente.

Dar um passo

Método 1 de 2: As 3 regras básicas

1. Regra 1:Ouça seu cliente. Você pode estar projetando "o maior site do mundo na história do universo e além", com pretos ricos, fontes refinadas e cores brilhantes e artísticas para um site que grita "explore-me agora!" Infelizmente, seu cliente queria uma barra de menu laranja com letras brilhantes em rosa e laranja. Você foi demitido e seu melhor site de todos os tempos - ao qual o cliente tem direitos - está em algum lugar do disco de backup, sem que ninguém o veja novamente.
   • Estude a identidade corporativa do seu cliente. Peça ao cliente para mostrar alguns sites que ele adora. Isso não apenas dará a você uma ideia do que eles gostam, mas também algumas ideias de design nas quais você pode não ter pensado.
   • Se você pensou que estávamos brincando sobre o site laranja e rosa, considere este site sofisticado e legal:
2. Regra # 2:Conheça o seu público e o que eles procuram e adapte o seu design de acordo. O motivo pelo qual as pessoas têm sites é porque desejam que outras pessoas os vejam. Pode ser informativo, comercial ou para entreter um público-alvo específico. Seu trabalho como designer é saber para quem você está projetando e mantê-los na página quando chegarem lá.
   • Você pode pensar: "Se parecer bom, eles ficarão". Mas isso não necessariamente tem que ser o caso. Considere o setor imobiliário, por exemplo. Este é um site com um design simples e divertido. Possui muitos espaços em branco que lhe conferem um visual aberto, cores vivas e um formato widescreen moderno com links em um local de destaque:
   • Agora, dê uma olhada nesta abordagem de venda de imóveis na mesma área: desordenada e muito movimentada, cores desbotadas e cobertas de publicidade.
   • Adivinha qual funciona melhor para quem procura uma casa? Certo, aquele onde casas! Quando as pessoas pesquisam "casas à venda em Santa Monica", elas não se importam com a aparência do site. Eles não querem ler sobre o agente imobiliário ou ver belas fotos da cidade. Eles querem ver casas.
3. Regra # 3:Escute a si mesmo. Você entende o que o cliente deseja e sabe o que seu mercado está procurando. Agora finalmente é hora de prestar atenção em você, designer!
   • Crie um modelo no software gráfico de sua escolha. Faça os elementos da sua página em camadas diferentes (para que você possa ajustar as coisas mais tarde sem destruir todo o modelo). Esses elementos podem ser:
     • Cabeçalho. Este é um elemento igual em todas as páginas do seu site. O cabeçalho consiste no título e logotipo do site, bem como links para as outras partes do site (por exemplo, Sobre, Contato, etc.). Visualmente e de forma prática, isso vai amarrar tudo junto. É uma boa prática vincular o primeiro botão em uma barra de menu de volta à página inicial.
     • Por exemplo, vamos dar uma olhada na Apple:
     • Como acontece com a maioria das coisas da Apple, sua página inicial tem um design muito simples e direto. Observe a barra de menus na parte superior, com tópicos lógicos para cada botão, além de um campo de pesquisa - sempre uma boa ideia se seu site oferecer suporte. Agora, vamos dar uma olhada na página de destino de um dos botões, o iPad, para ver alguns elementos:
     • A barra de menu muda apenas escurecendo o botão do iPad.
     • O assunto da página de destino é exibido em grandes letras pretas.
     • Um novo submenu aparecerá para que você possa aprender mais sobre o produto. Se você clicar em um desses botões, verá que cada página oferece um novo conteúdo dependendo do tópico, mas será idêntica em layout e design.
     • Freqüentemente, cada tópico principal em sua barra de menu terá diferentes subtítulos para você preencher. Em vez de criar uma segunda barra de menu, você pode usar menus pop-up como este exemplo do Musicians Friend:
     • Barra Lateral. Isso aparecerá em muitas páginas do seu site, mas não necessariamente em todas - o contexto determina. No entanto, é um elemento muito importante e deve ser cuidadosamente projetado para ser intuitivo e não muito confuso. Ao contrário da barra de menu, o conteúdo de uma barra lateral pode ser muito dinâmico. Confira estas duas barras laterais da corretora de imóveis Trulia. A primeira é para compradores:
       
       

Método 2 de 2: Diretrizes

1. Projete uma boa interface de usuário. Posicione os vários elementos do site, como título, barras laterais, logotipos, imagens e texto no mesmo lugar em todas as páginas para tornar seu site navegável e intuitivo.
   • Mantenha o mesmo cabeçalho no topo de cada página. Independentemente de o conteúdo do seu site permitir ou não muitos elementos repetidos, certifique-se de que a parte superior de cada página seja a mesma.
   • Use lógica em seu projeto. Os elementos em uma única página devem ser ordenados logicamente por importância ou tópico; as diferentes páginas do site também devem ser.
2. Crie um estilo consistente. Onde o layout deve dar consistência estrutural ao seu site, o estilo deve fornecer harmonia temática.
   • Limite-se a duas ou três cores principais e certifique-se de que combinam bem.
   • Evite usar muitos estilos ou tamanhos de fonte; se você quiser alternar alguns, use-os da mesma forma em cada página.
   • Use Cascading Style Sheets (CSS) para manter um estilo uniforme e para facilitar a mudança de elementos em um site inteiro sem ter que ir para cada página separadamente.
3. Maximize a legibilidade. Para tornar seu texto mais fácil de ler, você pode dividi-lo em partes menores.
   • Use legendas e espaçamento adequado para separar cada uma das partes.
   • Use letras em negrito ou tamanhos diferentes para mostrar a hierarquia e a importância dos tópicos.
   • Preste atenção em como você trata o texto. Não torne a fonte muito pequena e aumente o espaçamento entre linhas para facilitar a leitura de grandes trechos de texto. Trechos grandes de texto são mais difíceis de ler; divida-o em parágrafos menores.
4. Torne seu site legível universalmente. Use HTML padrão e evite tags, recursos e plug-ins que estão disponíveis apenas para uma marca ou versão de um navegador.
   • Embora a maioria dos navegadores e computadores modernos possam lidar com imagens complexas, tudo parecerá mais elegante se você encolher e otimizar suas imagens para a web. Pesar a importância da qualidade contra a importância da velocidade.
5. Teste seu site. Certifique-se de que todo link funciona como você esperaria, e as imagens aparecendo corretamente.
   • Você pode querer organizar alguns testes de usuário fazendo com que membros de seu público-alvo testem a clareza e facilidade de uso de seu design e forneçam feedback sobre seu site.
6. Publique seu site. Compre um nome de domínio, se ainda não o fez. Verifique periodicamente se os links ainda estão funcionando e ouça as sugestões enviadas pelos visitantes por e-mail.

Pontas

• Embora você seja livre para projetar o layout com base em sua própria visão pessoal ou em coisas que viu em outros sites, pode ser mais fácil comprar um design pronto.
• Não bombardeie o visitante com fotos bonitas e especiais. Animação em Flash, cores brilhantes, planos de fundo padronizados e música que é reproduzida automaticamente no carregamento da página eram experiências divertidas nos anos 90, mas agora vão assustar os usuários. Use fundos simples que contrastem com a cor do texto para obter o máximo de legibilidade.
• Você sempre pode usar CSS para otimizar o espaçamento de parágrafo.
• Para visitantes com deficiência auditiva ou visual, você pode legendar vídeos, transcrever áudio e adicionar uma mensagem de acessibilidade. Embora as tabelas possam ser uma forma eficiente de organizar as informações, os visitantes com deficiência visual que usam o software leitor de tela podem não ouvir o material na ordem correta.
• Deixe seus visitantes economizarem tinta: use uma folha de estilo separada para imprimir páginas.
  • Desligue as imagens de fundo ao definir os parâmetros de impressão.
  • Use texto preto em um fundo branco.
  • Remova a barra de menu e as imagens desnecessárias.

Avisos

• Evite o plágio e obedeça a todas as leis de direitos autorais. Não inclua imagens aleatórias que encontrar online ou mesmo elementos estruturais sem aprovação. Tudo o que você usa em seu site deve ser legal e ético.