SlideShare uma empresa Scribd logo
1 de 49
Baixar para ler offline
#MktMeetUp

Boas práticas em
DESIGN DE INTERFACES
Felipe Almeida
Felipe Almeida
Designer @ Mkt Virtual
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
1. Design de Interfaces
O que é?

Arquitetura da
Informação

+

Design de
Interação

+

Visual Design
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
Usuário satisfeito

Cliente satisfeito

Sucesso
2. Começando um projeto
Hora de planejar
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
3. Conteúdo
Fuck lorem ipsum
3. Conteúdo
Fuck lorem ipsum

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

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

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

“Design in the absence of content is
not design, it’s decoration”
Jeffrey Zeldman
Medium
4. Esboço
Mão na massa!
4. Esboço
Mão na massa!

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

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

● Brainstorm
● Ideias no papel
● Wireframes
● Refinamento
5. Usabilidade
...ou por que seu site deve ser level easy
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 Design
PC, laptop, celular, tablet, etc…
7. Layout
Aí sim!
7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário
E os bancos de imagem?
7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário
7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário
7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário
7. Layout
Aí sim!
● Identidade
● Cores
● Imagens
● Grid
● Padrões
● Simplicidade
● Melhor cenário
8. Tipografia
Fontes também tem sentimentos
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”
8. Tipografia
Fontes também tem sentimentos

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

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

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

● Consistência
● Webfonts
● Leitura
● Mobile
9. Entregáveis
Terminei o layout, e agora?
9. Entregáveis
Terminei o layout, e agora?

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

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

● Layout PSD
● PSD
● Guia de estilo
10. Feedbacks
Sua opinião é muito importante para nós
10. Feedbacks
Sua opinião é muito importante para nós

● Menos mimimi
● Teste, teste e teste
● Identificar problemas
● Propor mudanças e melhorias
“Design is not just what it looks like
and feels like. Design is how it works”
Steve Jobs
Obrigado!

felipe@felipesalmeida.com.br
ou @felipesalmeida por aí
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

Mais conteúdo relacionado

Mais procurados

Indicadores de Desempenho na Conferência de Recebimento e Expedição
Indicadores de Desempenho na Conferência de Recebimento e ExpediçãoIndicadores de Desempenho na Conferência de Recebimento e Expedição
Indicadores de Desempenho na Conferência de Recebimento e Expedição
Interlogis Planejamento das Operações Logísticas Ltda.
 
Aula 3 gestão de operações
Aula 3  gestão de operaçõesAula 3  gestão de operações
Aula 3 gestão de operações
dianafpc
 
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
devCAT Studio, NEXON
 
Computação Gráfica - Introdução ao OpenGL
Computação Gráfica - Introdução ao OpenGLComputação Gráfica - Introdução ao OpenGL
Computação Gráfica - Introdução ao OpenGL
Tony Alexander Hild
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
Alan Vasconcelos
 
Metodos de Design
Metodos de DesignMetodos de Design
Metodos de Design
prismatica
 
Java introdução ao eclipse
Java   introdução ao eclipseJava   introdução ao eclipse
Java introdução ao eclipse
Armando Daniel
 

Mais procurados (20)

Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
Aula - Metodologias Ágeis
Aula - Metodologias ÁgeisAula - Metodologias Ágeis
Aula - Metodologias Ágeis
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interação
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Indicadores de Desempenho na Conferência de Recebimento e Expedição
Indicadores de Desempenho na Conferência de Recebimento e ExpediçãoIndicadores de Desempenho na Conferência de Recebimento e Expedição
Indicadores de Desempenho na Conferência de Recebimento e Expedição
 
Padrões de Projeto para Jogos
Padrões de Projeto para JogosPadrões de Projeto para Jogos
Padrões de Projeto para Jogos
 
Aula 3 gestão de operações
Aula 3  gestão de operaçõesAula 3  gestão de operações
Aula 3 gestão de operações
 
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
김동건, 할머니가 들려주신 마비노기 개발 전설, NDC2019
 
Computação Gráfica - Introdução ao OpenGL
Computação Gráfica - Introdução ao OpenGLComputação Gráfica - Introdução ao OpenGL
Computação Gráfica - Introdução ao OpenGL
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
 
Orientação a Objetos em Python
Orientação a Objetos em PythonOrientação a Objetos em Python
Orientação a Objetos em Python
 
Fundamentos básicos do Design gráfico
Fundamentos básicos do Design gráficoFundamentos básicos do Design gráfico
Fundamentos básicos do Design gráfico
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
 
Perfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHCPerfil do usuário, Personas, Cenários, Storyboard em IHC
Perfil do usuário, Personas, Cenários, Storyboard em IHC
 
Introdução a python
Introdução a pythonIntrodução a python
Introdução a python
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Metodos de Design
Metodos de DesignMetodos de Design
Metodos de Design
 
Java introdução ao eclipse
Java   introdução ao eclipseJava   introdução ao eclipse
Java introdução ao eclipse
 
190406 신입 클라이언트 프로그래머 1개월차까지 이야기
190406 신입 클라이언트 프로그래머 1개월차까지 이야기190406 신입 클라이언트 프로그래머 1개월차까지 이야기
190406 신입 클라이언트 프로그래머 1개월차까지 이야기
 

Destaque

Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
DesignCarminatti
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
duradez
 

Destaque (20)

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Princípios Gerais para o Design de Interfaces
Princípios Gerais para o Design de InterfacesPrincípios Gerais para o Design de Interfaces
Princípios Gerais para o Design de Interfaces
 
Aula: Princípios de design de interfaces
Aula: Princípios de design de interfacesAula: Princípios de design de interfaces
Aula: Princípios de design de interfaces
 
Introdução ao Design de interface para dispositivos móveis
Introdução ao Design de interface para dispositivos móveisIntrodução ao Design de interface para dispositivos móveis
Introdução ao Design de interface para dispositivos móveis
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
 
Aula: Tipos de Interface
Aula: Tipos de InterfaceAula: Tipos de Interface
Aula: Tipos de Interface
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Usabilidade na TV digital interativa
Usabilidade na TV digital interativaUsabilidade na TV digital interativa
Usabilidade na TV digital interativa
 
Boas práticas para aplicativos android
Boas práticas para aplicativos androidBoas práticas para aplicativos android
Boas práticas para aplicativos android
 
Webdesign - Design Interface
Webdesign - Design InterfaceWebdesign - Design Interface
Webdesign - Design Interface
 
Design De Interfaces
Design De InterfacesDesign De Interfaces
Design De Interfaces
 
Aula - Gerenciadores de layout
Aula - Gerenciadores de layoutAula - Gerenciadores de layout
Aula - Gerenciadores de layout
 
Mini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos MóveisMini Curso de Design de Interfaces para Dispositivos Móveis
Mini Curso de Design de Interfaces para Dispositivos Móveis
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
 
01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]01 - IHC e usabilidade [Conceitos]
01 - IHC e usabilidade [Conceitos]
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
 
Introdução a IHC
Introdução a IHCIntrodução a IHC
Introdução a IHC
 
Avaliação de Interface
Avaliação de InterfaceAvaliação de Interface
Avaliação de Interface
 
WPI Aula 04
WPI Aula 04WPI Aula 04
WPI Aula 04
 
Aula: Resources ( Parte 2)
Aula: Resources ( Parte 2)Aula: Resources ( Parte 2)
Aula: Resources ( Parte 2)
 

Semelhante a Boas Práticas em Design de Interfaces

Introdução a Modelagem
Introdução a ModelagemIntrodução a Modelagem
Introdução a Modelagem
Rodrigo Branas
 
Trabalho Gerencia de Projetos
Trabalho Gerencia de ProjetosTrabalho Gerencia de Projetos
Trabalho Gerencia de Projetos
Diego BBahia
 
Principles and dimension of a design system
Principles and dimension of a design systemPrinciples and dimension of a design system
Principles and dimension of a design system
marieli cristine lemes
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
Pedro de Siqueira
 

Semelhante a Boas Práticas em Design de Interfaces (20)

Web Design > Usabilidade
Web Design > UsabilidadeWeb Design > Usabilidade
Web Design > Usabilidade
 
Design Sprint e a importância de métodos de cocriação
Design Sprint e a importância de métodos de cocriaçãoDesign Sprint e a importância de métodos de cocriação
Design Sprint e a importância de métodos de cocriação
 
Slides digitais
Slides digitaisSlides digitais
Slides digitais
 
Slides digitais
Slides digitaisSlides digitais
Slides digitais
 
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...
 
Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0
 
Introdução a Modelagem
Introdução a ModelagemIntrodução a Modelagem
Introdução a Modelagem
 
Trabalho Gerencia de Projetos
Trabalho Gerencia de ProjetosTrabalho Gerencia de Projetos
Trabalho Gerencia de Projetos
 
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e ComposiçãoLaboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
Laboratório Web 2013-2014 - Etapas na Produção: Desenho e Composição
 
A importância do design na qualidade de software
A importância do design na qualidade de softwareA importância do design na qualidade de software
A importância do design na qualidade de software
 
TDC2018FLN | Trilha Gestão de Produtos - Como minimizar incertezas ao constru...
TDC2018FLN | Trilha Gestão de Produtos - Como minimizar incertezas ao constru...TDC2018FLN | Trilha Gestão de Produtos - Como minimizar incertezas ao constru...
TDC2018FLN | Trilha Gestão de Produtos - Como minimizar incertezas ao constru...
 
User Experience Boot Camp
User Experience Boot CampUser Experience Boot Camp
User Experience Boot Camp
 
Prototipagem e MVP para startups
Prototipagem e MVP para startupsPrototipagem e MVP para startups
Prototipagem e MVP para startups
 
Linear Engineering
Linear EngineeringLinear Engineering
Linear Engineering
 
RPC.com.br - Produto
RPC.com.br - ProdutoRPC.com.br - Produto
RPC.com.br - Produto
 
Principles and dimension of a design system
Principles and dimension of a design systemPrinciples and dimension of a design system
Principles and dimension of a design system
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 
UI Design para Desenvolvimento Mobile & Games
UI Design para Desenvolvimento Mobile & GamesUI Design para Desenvolvimento Mobile & Games
UI Design para Desenvolvimento Mobile & Games
 
Introdução ao Design Sprint - Hackaprothon Aplicativos Cívicos para Android
Introdução ao Design Sprint - Hackaprothon Aplicativos Cívicos para AndroidIntrodução ao Design Sprint - Hackaprothon Aplicativos Cívicos para Android
Introdução ao Design Sprint - Hackaprothon Aplicativos Cívicos para Android
 

Boas Práticas em Design de Interfaces