Boas Práticas em Design de Interfaces

3.413 visualizações

Publicada em

Criar o design de um site eficiente está longe de apenas elaborar elementos bonitos. Interfaces precisam ser cada vez mais fáceis de usar e também atingir os objetivos desejados pelo cliente. Durante a apresentação, você aprenderá conceitos básicos, diversas dicas que aprendi durante minha carreira e o que fazer ou evitar na hora de criar o design de um site.

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

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

Nenhuma nota no slide

Boas Práticas em Design de Interfaces

  1. 1. #MktMeetUp Boas práticas em DESIGN DE INTERFACES Felipe Almeida
  2. 2. Felipe Almeida Designer @ Mkt Virtual
  3. 3. 1. O que é Design de Interfaces 2. Começando um Projeto Sobre o que vamos falar hoje? 3. Conteúdo 4. Esboço 5. Usabilidade 6. Responsive Design 7. Layout 8. Tipografia 9. Entregáveis 10. Feedbacks
  4. 4. 1. Design de Interfaces O que é? Arquitetura da Informação + Design de Interação + Visual Design
  5. 5. 1. Design de Interfaces O que é? ● Solução de problemas ● Cumprir objetivos ● Facilidade e simplicidade de uso ● Clareza e beleza da execução ● Flexibilidade e escalabilidade
  6. 6. Usuário satisfeito Cliente satisfeito Sucesso
  7. 7. 2. Começando um projeto Hora de planejar
  8. 8. 2. Começando um projeto Hora de planejar ● Analise o Briefing ● Estude quem são os usuários / público-alvo ● Considere o prazo ● Benchmark ● Mapa Mental
  9. 9. 3. Conteúdo Fuck lorem ipsum
  10. 10. 3. Conteúdo Fuck lorem ipsum ● Conteúdo real ● Foco no que é importante ● Seja claro e objetivo
  11. 11. 3. Conteúdo Fuck lorem ipsum ● Conteúdo real ● Foco no que é importante ● Seja claro e objetivo
  12. 12. 3. Conteúdo Fuck lorem ipsum ● Conteúdo real ● Foco no que é importante ● Seja claro e objetivo
  13. 13. 3. Conteúdo Fuck lorem ipsum “Design in the absence of content is not design, it’s decoration” Jeffrey Zeldman
  14. 14. Medium
  15. 15. 4. Esboço Mão na massa!
  16. 16. 4. Esboço Mão na massa! ● Brainstorm ● Ideias no papel ● Wireframes ● Refinamento
  17. 17. 4. Esboço Mão na massa! ● Brainstorm ● Ideias no papel ● Wireframes ● Refinamento
  18. 18. 4. Esboço Mão na massa! ● Brainstorm ● Ideias no papel ● Wireframes ● Refinamento
  19. 19. 5. Usabilidade ...ou por que seu site deve ser level easy
  20. 20. 5. Usabilidade ...ou por que o seu site deve ser level easy ● Clareza e Objetividade ● Distração ● Facilidade de uso ● Consistência ● Etc...
  21. 21. 5. Usabilidade ...ou por que o seu site deve ser level easy ● Clareza e Objetividade ● Distração ● Facilidade de uso ● Consistência ● Etc...
  22. 22. 5. Usabilidade ...ou por que o seu site deve ser level easy ● Clareza e Objetividade ● Distração ● Facilidade de uso ● Consistência ● Etc...
  23. 23. 5. Usabilidade ...ou por que o seu site deve ser level easy ● Clareza e Objetividade ● Distração ● Facilidade de uso ● Consistência ● Etc...
  24. 24. 5. Usabilidade ...ou por que o seu site deve ser level easy ● Clareza e Objetividade ● Distração ● Facilidade de uso ● Consistência ● Etc...
  25. 25. 6. Responsive Design PC, laptop, celular, tablet, etc…
  26. 26. 7. Layout Aí sim!
  27. 27. 7. Layout Aí sim! ● Identidade ● Cores ● Imagens ● Grid ● Padrões ● Simplicidade ● Melhor cenário
  28. 28. E os bancos de imagem?
  29. 29. 7. Layout Aí sim! ● Identidade ● Cores ● Imagens ● Grid ● Padrões ● Simplicidade ● Melhor cenário
  30. 30. 7. Layout Aí sim! ● Identidade ● Cores ● Imagens ● Grid ● Padrões ● Simplicidade ● Melhor cenário
  31. 31. 7. Layout Aí sim! ● Identidade ● Cores ● Imagens ● Grid ● Padrões ● Simplicidade ● Melhor cenário
  32. 32. 7. Layout Aí sim! ● Identidade ● Cores ● Imagens ● Grid ● Padrões ● Simplicidade ● Melhor cenário
  33. 33. 8. Tipografia Fontes também tem sentimentos
  34. 34. 8. Tipografia Fontes também tem sentimentos “95% da informação na web é a linguagem escrita. É lógico que um web designer deve ter uma boa formação na disciplina de moldar informações por escrito, em outras palavras: tipografia”
  35. 35. 8. Tipografia Fontes também tem sentimentos ● Consistência ● Webfonts ● Leitura ● Mobile
  36. 36. 8. Tipografia Fontes também tem sentimentos ● Consistência ● Webfonts ● Leitura ● Mobile
  37. 37. 8. Tipografia Fontes também tem sentimentos ● Consistência ● Webfonts ● Leitura ● Mobile
  38. 38. 8. Tipografia Fontes também tem sentimentos ● Consistência ● Webfonts ● Leitura ● Mobile
  39. 39. 9. Entregáveis Terminei o layout, e agora?
  40. 40. 9. Entregáveis Terminei o layout, e agora? ● Layout ● PSD ● Guia de estilo
  41. 41. 9. Entregáveis Terminei o layout, e agora? ● Layout ● PSD ● Guia de estilo
  42. 42. 9. Entregáveis Terminei o layout, e agora? ● Layout PSD ● PSD ● Guia de estilo
  43. 43. 10. Feedbacks Sua opinião é muito importante para nós
  44. 44. 10. Feedbacks Sua opinião é muito importante para nós ● Menos mimimi ● Teste, teste e teste ● Identificar problemas ● Propor mudanças e melhorias
  45. 45. “Design is not just what it looks like and feels like. Design is how it works” Steve Jobs
  46. 46. Obrigado! felipe@felipesalmeida.com.br ou @felipesalmeida por aí
  47. 47. Livros: Design para a Internet: Projetando a Experiência Perfeita Felipe Memoria As Leis da Simplicidade John Maeda Não Me Faça Pensar Steve Krug

×