Geometria em Práticas e Artefatos das etnias Tupinikim e Guarani do Espírito Santo
Boas Práticas em Design de Interfaces
49
Boas práticas em DESIGN DE INTERFACES Felipe Almeida #MktMeetUp
-
Upload
felipe-almeida -
Category
Design
-
view
950 -
download
1
description
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.
Transcript of Boas Práticas em Design de Interfaces
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
Livros:
Design para a Internet: Projetando a Experiência PerfeitaFelipe Memoria
As Leis da SimplicidadeJohn Maeda
Não Me Faça PensarSteve Krug
