SlideShare uma empresa Scribd logo
MANUAL PARA DESIGN DE WEBSITES DE SUCESSO Dezembro/09
DIMENSÕES DO SITE 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. Altura: na página inicial, tente evitar a barra de rolagem usando menos elementos e deixando uma altura razoável 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
Facilite a vida do usuário: mantenha sempre o conteúdo explícito e acessível a poucos cliques 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 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 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!
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. Procure usar padrões de cores Obedeça a leitura natural (da esquerda para a direita, de cima para baixo) 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.
DESIGN É INDICADOR DE CREDIBILIDADE Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today What Makes A Web Site Credible? A Report on a Large Quantitative Study The Elements of Computer Credibility  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:
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
INSPIRE-SE E APRENDA SEMPRE Sempre visite os sites dos concorrentes do seu cliente para que seu trabalho seja sempre melhor 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 Caso tenha conhecimentos, veja sites internacionais e inspire-se para fazer um grande design! Considere sempre que o atual trabalho deverá ser melhor que o último que fez 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
CORES E PUBLICIDADE Evite ficar no preto e branco, abuse de cores, gradientes e efeitos diversos do photoshop Com empresas mais conservadoras como clientes, prefira sempre cores mais claras e sobrias Espaços em branco entre os  elementos melhoram a  leitura e a compreensão principalmente na home e  em páginas de produtos 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.
PUBLICIDADE NO SITE Defina bem a área de publicidade se for usá-la, para que o usuário não se confunda 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 Não faça do seu site um  carnaval de imagens, seja  coerente 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.
MAIS TEXTOS, MENOS IMAGENS Use sempre fontes primárias para textos  longos: Verdana, Arial, Times, Georgia, etc Caso use fontes especiais no menu, elas se  trasnformarão em imagens, perdendo sua  eficácia em buscadores como o Google Mantenha um padrão de fontes, com ou sem serifa, para todo o site, incluindo imagens e banners internos Quanto mais texto, melhor a chance do seu site ser bem rankeado no Google Use imagens apenas para o essencial Nós na domitri, procuramos usar todos os artifícios para melhorar o desempenho do seu site em sites de busca como o Google
TECNOLOGIA FLASH E O GOOGLE Sites feitos todo em flash não conseguem  ser rastreados pelos robos do Google e conseqüentemente não aparecem nos  resultados de busca Mesmo os menus feitos em flash, acabam  dificultando o rastreamento dos robos do  Google.  Na domitri usamos efeitos DHML e CSS puros para ajudar o seu site a ficar bem rankeado nos resultados de busca do Google Use o flash para dar movimento a banners e destaques no seu site
EVITE!!! 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 Páginas de abertura: tempo é dinheiro, deixe seu conteúdo a poucos cliques do seu usuário, evite destraí-lo Popups: apesar de ser barrado pela maioria dos browsers, quando abertos, causam aborrecimentos para o usuário
www.domitri.net ENVIE AGORA SEU LAYOUT PARA  [email_address]

Mais conteúdo relacionado

PPT
Como Tornar Seu Site Atraente
PPSX
05 design e usabilidade
PDF
Regras básicas na construção de um site
ODP
Caracteristicas da Usabilidade
PPT
Testes de usabilidade - Webdesign 2022
PDF
Fatiando o bolo
PDF
Site responsivo vantagens e desvantagens
PPT
Construcao de Sites
Como Tornar Seu Site Atraente
05 design e usabilidade
Regras básicas na construção de um site
Caracteristicas da Usabilidade
Testes de usabilidade - Webdesign 2022
Fatiando o bolo
Site responsivo vantagens e desvantagens
Construcao de Sites

Mais procurados (20)

PDF
Web Design > Usabilidade
PPTX
PUB5AN - Dicas de Usabilidade
PPTX
Design responsivo
PPT
Webdesign Revisão 2019-01
PPTX
Como tornar seu site atraente
PPT
[15elw] Não faça apenas o layout. Surpreenda seu cliente e seu chefe.
PDF
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
PDF
Web Design Responsivo
PPT
Usabilidade
PDF
Palestra E- commerce School
PDF
15 dicas arrasadoras para ousar e abusar na experiência das pessoas em seu site
DOCX
A usabilidade e_acessibilidade_nos_web_sites[1]
PPTX
Web design responsivo - Criando um site adaptável
PPTX
Sawary - Website
PDF
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
PDF
Responsive Design - Introdução
PPTX
Como criar um site
PPTX
Create website pt
PDF
10 acoes
PPT
Navegação e arquitetura de informação
Web Design > Usabilidade
PUB5AN - Dicas de Usabilidade
Design responsivo
Webdesign Revisão 2019-01
Como tornar seu site atraente
[15elw] Não faça apenas o layout. Surpreenda seu cliente e seu chefe.
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo
Usabilidade
Palestra E- commerce School
15 dicas arrasadoras para ousar e abusar na experiência das pessoas em seu site
A usabilidade e_acessibilidade_nos_web_sites[1]
Web design responsivo - Criando um site adaptável
Sawary - Website
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Responsive Design - Introdução
Como criar um site
Create website pt
10 acoes
Navegação e arquitetura de informação
Anúncio

Destaque (16)

DOC
Criando banner
KEY
ithink 2009 - Social Media é a resposta para o banner blindness?
PDF
COMO SALVAR A ARTE
PDF
FTPI Digital - Como a gente pensa a mídia interativa?
PDF
Guia senatore banner
PDF
Boas práticas na elaboração de Posters
PPT
Poster Educomunicadores para Encontro Educom 2013
PPTX
Comunicação em saúde
PDF
O que é o Facebook? Aprenda a usar essa ferramenta de social media.
PDF
PPS
Poster Of Former Movies - Unforgettable films and musics
PDF
Mídia Online - ESPM Marketing Digital - aula 9
PDF
10 dicas para criar um banner funcional
PPTX
Pesquisa De Campo
PPTX
Aprenda a fazer um pôster ou banner
PPSX
Como preparar um Painel Científico (BANNER)
Criando banner
ithink 2009 - Social Media é a resposta para o banner blindness?
COMO SALVAR A ARTE
FTPI Digital - Como a gente pensa a mídia interativa?
Guia senatore banner
Boas práticas na elaboração de Posters
Poster Educomunicadores para Encontro Educom 2013
Comunicação em saúde
O que é o Facebook? Aprenda a usar essa ferramenta de social media.
Poster Of Former Movies - Unforgettable films and musics
Mídia Online - ESPM Marketing Digital - aula 9
10 dicas para criar um banner funcional
Pesquisa De Campo
Aprenda a fazer um pôster ou banner
Como preparar um Painel Científico (BANNER)
Anúncio

Semelhante a Manual Para Site (20)

PDF
Jimdo em Teresina 2014
PPTX
2010.1 - PUB5AN - Marketing Digital AULA 03
PPT
Como montar um projeto de usabilidade
PPT
Formatos Da Web
PDF
Aula 1 - Desenvolvimento do leiaute (1).pdf
PDF
JM_DIGITAL-ebook_completo.pdf
PDF
JM_DIGITAL-ebook_completo.pdf
PPT
Capitulo 11 Livro Nielsen
PDF
E book Design - Presença Digital
PPTX
7 Dicas Infalíveis de Como Aumentar o Tráfego so Seu Site
PDF
02 - Introdução a Projetos parte 2 - v1.0
PDF
E book Página inicial poderosa e vendedora
PDF
Workshop de SEO para Startups
PDF
659 html
PDF
Artigos 10 Dicas Para Marketing Digital
 
PPTX
Plano para website
PDF
Etapas Produtivas Website
PPTX
6 Elementos essenciais na criação de sites
PPT
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
PPT
Guidelines e Boas Práticas
Jimdo em Teresina 2014
2010.1 - PUB5AN - Marketing Digital AULA 03
Como montar um projeto de usabilidade
Formatos Da Web
Aula 1 - Desenvolvimento do leiaute (1).pdf
JM_DIGITAL-ebook_completo.pdf
JM_DIGITAL-ebook_completo.pdf
Capitulo 11 Livro Nielsen
E book Design - Presença Digital
7 Dicas Infalíveis de Como Aumentar o Tráfego so Seu Site
02 - Introdução a Projetos parte 2 - v1.0
E book Página inicial poderosa e vendedora
Workshop de SEO para Startups
659 html
Artigos 10 Dicas Para Marketing Digital
 
Plano para website
Etapas Produtivas Website
6 Elementos essenciais na criação de sites
SEO + UX: Otimizando as buscas e a experiência do usuário - FMDS SEOCamp 2010
Guidelines e Boas Práticas

Último (13)

PPTX
tema_7_-_discipulado_novo_tempo.pptxxxxxx
PPT
inimigos-invisc3adveis.ppttttttttttttttttt
PDF
1507-1santificacao@3_slides.pdffffffffff
PPTX
Viajando pela literatura brasileira.pptx
PDF
Apostila 1 - Despertar das Sobrancelhas.pdf
PPTX
tema_3_-_discipulado_novo_tempo.pptxxxxxxx
PPTX
Espatula Culinaria do futuro by inteligência artificial
PPTX
tema_8_-_discipulado_novo_tempo.pptxxxxxx
PPTX
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx
PDF
Slide de apresentação - legendas africanas
PPTX
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
PDF
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
PPTX
tema_12_-_discipulado_novo_tempo.pptxxxxx
tema_7_-_discipulado_novo_tempo.pptxxxxxx
inimigos-invisc3adveis.ppttttttttttttttttt
1507-1santificacao@3_slides.pdffffffffff
Viajando pela literatura brasileira.pptx
Apostila 1 - Despertar das Sobrancelhas.pdf
tema_3_-_discipulado_novo_tempo.pptxxxxxxx
Espatula Culinaria do futuro by inteligência artificial
tema_8_-_discipulado_novo_tempo.pptxxxxxx
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx
Slide de apresentação - legendas africanas
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
tema_12_-_discipulado_novo_tempo.pptxxxxx

Manual Para Site

  • 1. MANUAL PARA DESIGN DE WEBSITES DE SUCESSO Dezembro/09
  • 2. DIMENSÕES DO SITE 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. Altura: na página inicial, tente evitar a barra de rolagem usando menos elementos e deixando uma altura razoável 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. Facilite a vida do usuário: mantenha sempre o conteúdo explícito e acessível a poucos cliques 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 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 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. 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. Procure usar padrões de cores Obedeça a leitura natural (da esquerda para a direita, de cima para baixo) 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. DESIGN É INDICADOR DE CREDIBILIDADE Stanford-Makovsy Web Credibility Study 2002: Investigating What Makes Web Sites Credible Today What Makes A Web Site Credible? A Report on a Large Quantitative Study The Elements of Computer Credibility 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. 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. INSPIRE-SE E APRENDA SEMPRE Sempre visite os sites dos concorrentes do seu cliente para que seu trabalho seja sempre melhor 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 Caso tenha conhecimentos, veja sites internacionais e inspire-se para fazer um grande design! Considere sempre que o atual trabalho deverá ser melhor que o último que fez 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. CORES E PUBLICIDADE Evite ficar no preto e branco, abuse de cores, gradientes e efeitos diversos do photoshop Com empresas mais conservadoras como clientes, prefira sempre cores mais claras e sobrias Espaços em branco entre os elementos melhoram a leitura e a compreensão principalmente na home e em páginas de produtos 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. PUBLICIDADE NO SITE Defina bem a área de publicidade se for usá-la, para que o usuário não se confunda 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 Não faça do seu site um carnaval de imagens, seja coerente 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. MAIS TEXTOS, MENOS IMAGENS Use sempre fontes primárias para textos longos: Verdana, Arial, Times, Georgia, etc Caso use fontes especiais no menu, elas se trasnformarão em imagens, perdendo sua eficácia em buscadores como o Google Mantenha um padrão de fontes, com ou sem serifa, para todo o site, incluindo imagens e banners internos Quanto mais texto, melhor a chance do seu site ser bem rankeado no Google Use imagens apenas para o essencial 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. TECNOLOGIA FLASH E O GOOGLE Sites feitos todo em flash não conseguem ser rastreados pelos robos do Google e conseqüentemente não aparecem nos resultados de busca Mesmo os menus feitos em flash, acabam dificultando o rastreamento dos robos do Google. Na domitri usamos efeitos DHML e CSS puros para ajudar o seu site a ficar bem rankeado nos resultados de busca do Google Use o flash para dar movimento a banners e destaques no seu site
  • 12. EVITE!!! 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 Páginas de abertura: tempo é dinheiro, deixe seu conteúdo a poucos cliques do seu usuário, evite destraí-lo Popups: apesar de ser barrado pela maioria dos browsers, quando abertos, causam aborrecimentos para o usuário
  • 13. www.domitri.net ENVIE AGORA SEU LAYOUT PARA [email_address]