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

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.
Usuário satisfeito
Cliente satisfeito
Sucesso

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

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.
3. Conteúdo
Fuck lorem ipsum

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

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

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

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

14.
Medium

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

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

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

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

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

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

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.
6. Responsive Design
PC, laptop, celular, tablet, etc…

26.
7. Layout
Aí sim!

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

28.
E os bancos de imagem?

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

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

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.
8. Tipografia
Fontes também tem sentimentos

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.
8. Tipografia
Fontes também tem sentimentos
● Consistência
● Webfonts
● Leitura
● Mobile

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

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.
9. Entregáveis
Terminei o layout, e agora?

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

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

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

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

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.
“Design is not just what it looks like
and feels like. Design is how it works”
Steve Jobs

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

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