Boas práticas emDESIGN DE INTERFACES

Felipe Almeida

#MktMeetUp

Felipe AlmeidaDesigner @ Mkt Virtual

Sobre o que vamos falar hoje?

1. O que é Design de Interfaces

2. Começando um Projeto

3. Conteúdo

4. Esboço

5. Usabilidade

6. Responsive Design

7. Layout

8. Tipografia

9. Entregáveis

10. Feedbacks

1. Design de InterfacesO que é?

Arquitetura da Informação

Design de Interação+ Visual Design+

1. Design de InterfacesO que é?

● Solução de problemas

● Cumprir objetivos

● Facilidade e simplicidade de uso

● Clareza e beleza da execução

● Flexibilidade e escalabilidade

Usuário satisfeito Cliente satisfeito Sucesso

Hora de planejar

2. Começando um projeto

2. Começando um projetoHora de planejar

● Analise o Briefing

● Estude quem são os usuários / público-alvo

● Considere o prazo

● Benchmark

● Mapa Mental

Fuck lorem ipsum

3. Conteúdo

3. ConteúdoFuck lorem ipsum

● Conteúdo real

● Foco no que é importante

● Seja claro e objetivo

3. ConteúdoFuck lorem ipsum

● Conteúdo real

● Foco no que é importante

● Seja claro e objetivo

3. ConteúdoFuck lorem ipsum

● Conteúdo real

● Foco no que é importante

● Seja claro e objetivo

3. ConteúdoFuck lorem ipsum

“Design in the absence of content is

not design, it’s decoration”

Jeffrey Zeldman

Medium

Mão na massa!

4. Esboço

4. EsboçoMão na massa!

● Ideias no papel

● Wireframes

● Refinamento

● Brainstorm

4. EsboçoMão na massa!

● Ideias no papel

● Wireframes

● Refinamento

● Brainstorm

4. EsboçoMão na massa!

● Ideias no papel

● Wireframes

● Refinamento

● Brainstorm

...ou por que seu site deve ser level easy

5. Usabilidade

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

● Clareza e Objetividade

● Distração

● Facilidade de uso

● Consistência

● Etc...

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

● Clareza e Objetividade

● Distração

● Facilidade de uso

● Consistência

● Etc...

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

● Clareza e Objetividade

● Distração

● Facilidade de uso

● Consistência

● Etc...

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

● Clareza e Objetividade

● Distração

● Facilidade de uso

● Consistência

● Etc...

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

● Clareza e Objetividade

● Distração

● Facilidade de uso

● Consistência

● Etc...

6. Responsive DesignPC, laptop, celular, tablet, etc…

Aí sim!

7. Layout

7. LayoutAí sim!

● Identidade

● Cores

● Imagens

● Grid

● Simplicidade

● Melhor cenário

● Padrões

E os bancos de imagem?

7. LayoutAí sim!

● Identidade

● Cores

● Imagens

● Grid

● Simplicidade

● Melhor cenário

● Padrões

7. LayoutAí sim!

● Identidade

● Cores

● Imagens

● Grid

● Simplicidade

● Melhor cenário

● Padrões

7. LayoutAí sim!

● Identidade

● Cores

● Imagens

● Grid

● Simplicidade

● Melhor cenário

● Padrões

7. LayoutAí sim!

● Identidade

● Cores

● Imagens

● Grid

● Simplicidade

● Melhor cenário

● Padrões

Fontes também tem sentimentos

8. Tipografia

8. TipografiaFontes 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”

8. TipografiaFontes também tem sentimentos

● Consistência

● Webfonts

● Leitura

● Mobile

8. TipografiaFontes também tem sentimentos

● Consistência

● Webfonts

● Leitura

● Mobile

8. TipografiaFontes também tem sentimentos

● Consistência

● Webfonts

● Leitura

● Mobile

8. TipografiaFontes também tem sentimentos

● Consistência

● Webfonts

● Leitura

● Mobile

Terminei o layout, e agora?

9. Entregáveis

9. EntregáveisTerminei o layout, e agora?

● Layout

● Guia de estilo

● PSD

9. EntregáveisTerminei o layout, e agora?

● Layout

● Guia de estilo

● PSD

9. EntregáveisTerminei o layout, e agora?

● Layout PSD

● Guia de estilo

● PSD

Sua opinião é muito importante para nós

10. Feedbacks

10. FeedbacksSua opinião é muito importante para nós

● Teste, teste e teste

● Identificar problemas

● Propor mudanças e melhorias

● Menos mimimi

“Design is not just what it looks like

and feels like. Design is how it works”Steve Jobs

Obrigado!

felipe@felipesalmeida.com.brou @felipesalmeida por aí

Livros:

Design para a Internet: Projetando a Experiência PerfeitaFelipe Memoria

As Leis da SimplicidadeJohn Maeda

Não Me Faça PensarSteve Krug