Manual Para Site

1.221 visualizações

Publicada em

Guia para desenvolvimento de layouts em psd para posterior envio para a domitri fazer a conversão e transformar em site de internet (PSD para XHTML/CSS)

Publicada em: Design, Tecnologia, Negócios
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.221
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Manual Para Site

  1. 1. MANUAL PARA DESIGN DE WEBSITES DE SUCESSO Dezembro/09
  2. 2. DIMENSÕES DO SITE <ul><li>Largura: utilize 950px de largura para melhor atender os usuários que usam resolução de 1024x768. 93% dos usuários usam esta resolução ou maiores. </li></ul><ul><li>Altura: na página inicial, tente evitar a barra de rolagem usando menos elementos e deixando uma altura razoável </li></ul>Pesquisa W3C sobre resoluções de tela (mundo) Dica: Use e abuse de ferramentas como o 960grid para deixar o seu site alinhado e dar um aspecto muito mais profissional! http://www.960.gs Dados: w3schools
  3. 3. <ul><li>Facilite a vida do usuário: mantenha sempre o conteúdo explícito e acessível a poucos cliques </li></ul><ul><li>Faça um menu de fácil acesso: não faça o usuário ter que clicar em um botão ou mover o mouse para ver o menu </li></ul><ul><li>Evite flash em excesso: o flash é ótimo para dar movimento ao site, mas saiba equilibrar o design e a informação para não sobrecarregar o site </li></ul>REGRAS DE NAVEGABILIDADE Saiba mais em: http://pt.wikipedia.org/wiki/Usabilidade Traçe um objetivo para seu site e envolva o usuário por meio dos links e um design atraente. Faça ele sentir que encontrou o que procurava!
  4. 4. <ul><li>Não invente a roda: os usuários já estão acostumados com alguns tipos de navegações, inventar uma nova regra pode trazer prejuízo ao seu cliente. Faça essa revolução com clientes que possuem esse perfil. </li></ul><ul><li>Procure usar padrões de cores </li></ul><ul><li>Obedeça a leitura natural (da esquerda para a direita, de cima para baixo) </li></ul>SIGA O PADRÃO PARA NÃO ERRAR Conheça mais sobre paletas de cores em: http://www.colourlovers.com/ As pessoas esperam que certos comportamentos se mantenham: cores dos links, posição do logo, o comportamento de um menu, etc. Isso é conhecido como padrões de uso O azul é a melhor cor para links.
  5. 5. DESIGN É INDICADOR DE CREDIBILIDADE <ul><li>Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today </li></ul><ul><li>What Makes A Web Site Credible? A Report on a Large Quantitative Study </li></ul><ul><li>The Elements of Computer Credibility </li></ul>Todos os estudos mostram que o usuário julga o livro pela capa, ou melhor, o site pelo design. Mesmo que às vezes de forma inconsciente, elementos como layout, consistência, tipografia, cores e estilos afetam a forma com que os usuários reconhecem um site e a imagem da empresa Outros fatores influenciadores são: qualidade do conteúdo do site, número de eros, freqüência de atualizações e facilidade de uso. Varios estudos foram feitos para avaliar o que influencia a percepção de credibilidade de um site sobre seus usuários:
  6. 6. DESIGN É CREDIBILIDADE Seu site deve projetar não só uma boa imagem, mas também a imagem certa para a sua audiência Qual desses 2 layouts tem maior credibilidade para você? Site da Fiat em 1996 Site da Fiat em 2009
  7. 7. INSPIRE-SE E APRENDA SEMPRE <ul><li>Sempre visite os sites dos concorrentes do seu cliente para que seu trabalho seja sempre melhor </li></ul><ul><li>Não se prenda a concorrentes da cidade, veja que ferramentas as outras empresas do mesmo setor no Brasil estão usando em seus sites e proponha ao seu cliente </li></ul><ul><li>Caso tenha conhecimentos, veja sites internacionais e inspire-se para fazer um grande design! </li></ul><ul><li>Considere sempre que o atual trabalho deverá ser melhor que o último que fez </li></ul>Mesmo que um cliente vá pagar pouco, dedique-se para que ele te recomende e você recupere o tempo gasto por meio de vários outros clientes que irão ver o seu trabalho! Visite nosso blog! Constantemente postamos grandes designs para você se inspirar
  8. 8. CORES E PUBLICIDADE <ul><li>Evite ficar no preto e branco, abuse de cores, gradientes e efeitos diversos do photoshop </li></ul><ul><li>Com empresas mais conservadoras como clientes, prefira sempre cores mais claras e sobrias </li></ul><ul><li>Espaços em branco entre os elementos melhoram a leitura e a compreensão principalmente na home e em páginas de produtos </li></ul>Veja ao lado, como exemplo, o site da Apple. Uma mistura de muitos espaços em branco, cores sóbrias e botões coloridos que chamam a atenção para as páginas de compra.
  9. 9. PUBLICIDADE NO SITE <ul><li>Defina bem a área de publicidade se for usá-la, para que o usuário não se confunda </li></ul><ul><li>Evite usar banners para chamar o usuário para alguma seção do seu site. O usuário criou uma defesa e evita olhar ou clicar em tudo que se parece com uma publicidade </li></ul><ul><li>Não faça do seu site um carnaval de imagens, seja coerente </li></ul>No exemplo ao lado, os banners com descontos estão logo abaixo do menu e misturados com a publicidade do site. Mesmo sendo um banner de descontos, a chance do usuário ir para a página em questão é muito baixa, uma vez que ele pode achar que a imagem é um banner para outro site.
  10. 10. MAIS TEXTOS, MENOS IMAGENS <ul><li>Use sempre fontes primárias para textos longos: Verdana, Arial, Times, Georgia, etc </li></ul><ul><li>Caso use fontes especiais no menu, elas se trasnformarão em imagens, perdendo sua eficácia em buscadores como o Google </li></ul><ul><li>Mantenha um padrão de fontes, com ou sem serifa, para todo o site, incluindo imagens e banners internos </li></ul><ul><li>Quanto mais texto, melhor a chance do seu site ser bem rankeado no Google </li></ul><ul><li>Use imagens apenas para o essencial </li></ul>Nós na domitri, procuramos usar todos os artifícios para melhorar o desempenho do seu site em sites de busca como o Google
  11. 11. TECNOLOGIA FLASH E O GOOGLE <ul><li>Sites feitos todo em flash não conseguem ser rastreados pelos robos do Google e conseqüentemente não aparecem nos resultados de busca </li></ul><ul><li>Mesmo os menus feitos em flash, acabam dificultando o rastreamento dos robos do Google. </li></ul><ul><li>Na domitri usamos efeitos DHML e CSS puros para ajudar o seu site a ficar bem rankeado nos resultados de busca do Google </li></ul><ul><li>Use o flash para dar movimento a banners e destaques no seu site </li></ul>
  12. 12. EVITE!!! <ul><li>Sons sem que haja a solicitação do usuário: a música que você escolheu pode não ser do gosto de todos os usuários do seu site, fazendo com que o usuário se aborreça. Se quer oferecer sons, coloque um player e peça para que o o usuário clique no play </li></ul><ul><li>Páginas de abertura: tempo é dinheiro, deixe seu conteúdo a poucos cliques do seu usuário, evite destraí-lo </li></ul><ul><li>Popups: apesar de ser barrado pela maioria dos browsers, quando abertos, causam aborrecimentos para o usuário </li></ul>
  13. 13. www.domitri.net ENVIE AGORA SEU LAYOUT PARA [email_address]

×