Dicas na construção de interfaces WebCarlos Eduardo Treméa de Oliveira       kadunew.com/blog | @kadunew
Dicas na construção de interfaces WebUsabilidade:         Termo para descrever a qualidade da interação de uma interface c...
Dicas na construção de interfaces WebUsabilidade:         Termo para descrever a qualidade da interação de uma interface c...
Dicas na construção de interfaces WebA importância das cores:         Dicas para a criação de um site harmonioso         ...
Dicas na construção de interfaces WebA importância das cores:         Dicas para a criação de um site harmonioso          ...
Dicas na construção de interfaces WebA importância das cores:         As linhas entre os itens        Sem confusão visua...
Dicas na construção de interfaces WebHierarquia visual:         Mostre com clareza e precisão os elementos da página que s...
Dicas na construção de interfaces WebHierarquia visual:         Exemplos:                                              Mu...
Dicas na construção de interfaces WebHierarquia visual:         Com hierarquias visuais o leitor tem informações úteis sob...
Dicas na construção de interfaces WebHierarquia visual:         O usuário não tem dificuldade em encontrar a informação qu...
Dicas na construção de interfaces WebConvenções:Carlos Eduardo Treméa de Oliveira       kadunew.com/blog | @kadunew
Dicas na construção de interfaces WebSistemas Globalizados:         Um website é um sistema globalizado, rompem barreiras ...
Dicas na construção de interfaces WebSistemas Globalizados:         O fluxo lógico da informação não é constante. Em algu...
Dicas na construção de interfaces WebÍcones:         O ícone indica visualmente a existência de uma aplicação ou represent...
Dicas na construção de interfaces WebAceitação de imagens:         O que é aceito em um lugar pode ser rejeitado em outro,...
Dicas na construção de interfaces WebAceitação de imagens:         Em alguns países como Brasil e Alemanha, o gesto adotad...
Dicas na construção de interfaces WebFormulários:          Seu uso deve ser obrigatório          Não solicite informaçõe...
Próximos SlideShares
Carregando em…5
×

Construcao de interfaces web

883 visualizações

Publicada em

Dicas rápidas para construção de layouts para web sites.

Publicada em: Design
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
883
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
23
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Construcao de interfaces web

  1. 1. Dicas na construção de interfaces WebCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  2. 2. Dicas na construção de interfaces WebUsabilidade: Termo para descrever a qualidade da interação de uma interface com os usuários.Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  3. 3. Dicas na construção de interfaces WebUsabilidade: Termo para descrever a qualidade da interação de uma interface com os usuários. A usabilidade se determina pelas seguintes características:  Capacidade de aprendizado rápido  Dificuldade de esquecimentos  Ausência de erros operacionais Satisfação do usuárioCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  4. 4. Dicas na construção de interfaces WebA importância das cores: Dicas para a criação de um site harmonioso Utilize destaques de cor para capturar o olhar do usuário. O significado das cores não é universal. Use poucas cores. A cor de um website deve estar ligada às cores usadas no logotipo da empresa. Usar cores iguais para elementos relacionados entre si. Usar cores para realçar informaçõesCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  5. 5. Dicas na construção de interfaces WebA importância das cores: Dicas para a criação de um site harmonioso A cor caracteriza um website Site antigo Site novoCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  6. 6. Dicas na construção de interfaces WebA importância das cores:  As linhas entre os itens  Sem confusão visual. Destaque acrescentam muita confusão. total nos links e não no design do Alguns usuários teriam uma menu. confusão visual ao percorrer o menu.Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  7. 7. Dicas na construção de interfaces WebHierarquia visual: Mostre com clareza e precisão os elementos da página que se relacionam entre si.  Uma boa forma de tornar a página fácil de ser compreendida mesmo que o usuário esteja com pressa.  Deixar proeminente o que é importante.  Relacione visualmente o que for relacionado logicamente.  Aninhar elementos para mostrar quais fazem parte de quais. Deixe claro o que pode ser clicado.Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  8. 8. Dicas na construção de interfaces WebHierarquia visual: Exemplos: Muito Importante Livros de informática Um pouco menos Um livro em particular Importante Lorem Ipsum is Nem um pouco importante simply dummy text of the printing and typesetting industry. Axé Lorem Ipsum has Dance been Instrumental Pagode Pop Rock SertanejoCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  9. 9. Dicas na construção de interfaces WebHierarquia visual: Com hierarquias visuais o leitor tem informações úteis sobre o conteúdo da página antes mesmo de ler uma única palavra. Resumo da notícia principal O tamanho do cabeçalho deixa claro O cabeçalho que essa e a englobando as história duas colunas mais de texto torna importante óbvio que ambos fazem parte da mesma históriaCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  10. 10. Dicas na construção de interfaces WebHierarquia visual: O usuário não tem dificuldade em encontrar a informação que procura. O conteúdo está dividido em áreas claramente definidas. http://www.ist.utl.pt/ (Original)Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  11. 11. Dicas na construção de interfaces WebConvenções:Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  12. 12. Dicas na construção de interfaces WebSistemas Globalizados: Um website é um sistema globalizado, rompem barreiras geográficas e culturais e são acessados por pessoas de diversas partes do mundo.  Os seres humanos diferem muito entre si. • Termos técnicos • GíriasCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  13. 13. Dicas na construção de interfaces WebSistemas Globalizados:  O fluxo lógico da informação não é constante. Em alguns países, lê -se da direita para esquerda. Veja a solução adotada pelo googleCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  14. 14. Dicas na construção de interfaces WebÍcones: O ícone indica visualmente a existência de uma aplicação ou representa uma ação (abrir, fechar um programa...).  Quando bem aplicado possibilita um reconhecimento mais rápido que as palavras.  Não dependem do idioma  Imagens não são reconhecidas universalmente Ícones não-universais  Ícones universaisCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  15. 15. Dicas na construção de interfaces WebAceitação de imagens: O que é aceito em um lugar pode ser rejeitado em outro, devido as diferenças nas normas sociais.  O uso indevido de uma imagem pode ofender uma cultura • No Egito, as mulheres não aceitam pernas expostas • Na Índia, considera-se o uso da mão esquerda uma falta de educação grave. Exemplo: estender a mão esquerda para alguém. • Em Cingapura, a cegonha representa a morte materna.Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  16. 16. Dicas na construção de interfaces WebAceitação de imagens: Em alguns países como Brasil e Alemanha, o gesto adotado nos EUA para simbolizar “OK” é considerado vulgar.Carlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew
  17. 17. Dicas na construção de interfaces WebFormulários:  Seu uso deve ser obrigatório  Não solicite informações que não vão ser úteis para você.  Evite formulários longos.  Campos de preenchimento obrigatóriosCarlos Eduardo Treméa de Oliveira kadunew.com/blog | @kadunew

×