O documento discute boas práticas em design de interfaces, incluindo planejamento de projetos, conteúdo, esboços, usabilidade, layout e feedback. O palestrante apresenta os principais pontos a serem considerados em cada etapa do processo de design para criar interfaces intuitivas e de fácil uso.

1. #MktMeetUp
Boas práticas em
DESIGN DE INTERFACES
Felipe Almeida

2. Felipe Almeida
Designer @ Mkt Virtual

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. 1. Design de Interfaces
O que é?
Arquitetura da
Informação
+
Design de
Interação
+
Visual Design

6. 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

7. Usuário satisfeito
Cliente satisfeito
Sucesso

8. 2. Começando um projeto
Hora de planejar

9. 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

10. 3. Conteúdo
Fuck lorem ipsum

11. 3. Conteúdo
Fuck lorem ipsum
● Conteúdo real
● Foco no que é
importante
● Seja claro e objetivo

13. 3. Conteúdo
Fuck lorem ipsum
● Conteúdo real
● Foco no que é
importante
● Seja claro e objetivo

14. 3. Conteúdo
Fuck lorem ipsum
● Conteúdo real
● Foco no que é
importante
● Seja claro e objetivo

15. 3. Conteúdo
Fuck lorem ipsum
“Design in the absence of content is
not design, it’s decoration”
Jeffrey Zeldman

16. Medium

17. 4. Esboço
Mão na massa!

18. 4. Esboço
Mão na massa!
● Brainstorm
● Ideias no papel
● Wireframes
● Refinamento

19. 4. Esboço
Mão na massa!
● Brainstorm
● Ideias no papel
● Wireframes
● Refinamento

20. 4. Esboço
Mão na massa!
● Brainstorm
● Ideias no papel
● Wireframes
● Refinamento

21. 5. Usabilidade
...ou por que seu site deve ser level easy

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. 5. Usabilidade
...ou por que o seu site deve ser level easy
● Clareza e Objetividade
● Distração
● Facilidade de uso
● Consistência
● Etc...

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. 5. Usabilidade
...ou por que o seu site deve ser level easy
● Clareza e Objetividade
● Distração
● Facilidade de uso
● Consistência
● Etc...

26. 5. Usabilidade
...ou por que o seu site deve ser level easy
● Clareza e Objetividade
● Distração
● Facilidade de uso
● Consistência
● Etc...

27. 6. Responsive Design
PC, laptop, celular, tablet, etc…

28. 7. Layout
Aí sim!

29. 7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário

30. E os bancos de imagem?

31. 7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário

32. 7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário

33. 7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário

34. 7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário

35. 8. Tipografia
Fontes também tem sentimentos

36. 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”

37. 8. Tipografia
Fontes também tem sentimentos
● Consistência
● Webfonts
● Leitura
● Mobile

38. 8. Tipografia
Fontes também tem sentimentos
● Consistência
● Webfonts
● Leitura
● Mobile

39. 8. Tipografia
Fontes também tem sentimentos
● Consistência
● Webfonts
● Leitura
● Mobile

40. 8. Tipografia
Fontes também tem sentimentos
● Consistência
● Webfonts
● Leitura
● Mobile

41. 9. Entregáveis
Terminei o layout, e agora?

42. 9. Entregáveis
Terminei o layout, e agora?
● Layout
● PSD
● Guia de estilo

43. 9. Entregáveis
Terminei o layout, e agora?
● Layout
● PSD
● Guia de estilo

44. 9. Entregáveis
Terminei o layout, e agora?
● Layout PSD
● PSD
● Guia de estilo

45. 10. Feedbacks
Sua opinião é muito importante para nós

46. 10. Feedbacks
Sua opinião é muito importante para nós
● Menos mimimi
● Teste, teste e teste
● Identificar problemas
● Propor mudanças e melhorias

47. “Design is not just what it looks like
and feels like. Design is how it works”
Steve Jobs

48. Obrigado!
felipe@felipesalmeida.com.br
ou @felipesalmeida por aí

49. 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