PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
https://interfaces.ranoya.com
DESI
DE
INTER
GN
FACES
DIGI
TAIS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
xrjachn
TURMA /CLASSROOM
TECNOLOGIA
EIXO
FUNDAMENTAL
NÍVEL
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
DESI
DE
INTER
GN
FACES
DIGI
TAIS
https://interfaces.ranoya.com
Não se faz o design de uma interface após o artefato estar resolvido
Não se faz o design de uma interface após o artefato estar resolvido
Design de interface não é maquiagem
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
c7tb6bu
TURMA /CLASSROOM
TECNOLOGIA
EIXO
FUNDAMENTAL
NÍVEL
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
DESI
DE
INTER
GN
FACES
DIGI
TAIS
https://interfaces.ranoya.com
Não se faz o design de uma interface após o artefato estar resolvido
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
Design de interface não é maquiagem
DESI
DE
INTER
GN
FACES
DIGI
TAIS
Não se faz o design de uma interface após o artefato estar resolvido
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
Design de interface não é maquiagem
Design de interface não é uma fase de projeto
DE
INTER
DIGI
Não se faz o design de uma interface após o artefato estar resolvido
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
Design de interface não é maquiagem
Design de interface não é uma fase de projeto
DESIGN DE INTERFACE
Não se faz o design de uma interface após o artefato estar resolvido
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
Design de interface não é maquiagem
Design de interface não é uma fase de projeto
PROJETO (DESIGN)
DESIGN DE INTERFACE
PROJETO (DESIGN)
+
STANFORD D.SCHOOL DESIGN THINKING
PROJETÃO (UFPE)
DESIGN THINKING CANVAS (UFPE)
IDEO HUMAN CENTERED DESIGN
DESIGN COUNCIL DOUBLE DIAMOND
GOOGLE SPRINTS
IBM "THE LOOP" DESIGN THINKING MODEL
ZURB DESIGN THINKING MODEL
METODOLOGIAS DE PROJETO
Design de interface não é uma fase de projeto
PROJETO (DESIGN)
DESIGN DE INTERFACE
+
STANFORD D.SCHOOL DESIGN THINKING
PROJETÃO (UFPE)
DESIGN THINKING CANVAS (UFPE)
IDEO HUMAN CENTERED DESIGN
DESIGN COUNCIL DOUBLE DIAMOND
GOOGLE SPRINTS
IBM "THE LOOP" DESIGN THINKING MODEL
ZURB DESIGN THINKING MODEL
METODOLOGIAS DE PROJETO
A DISCIPLINA DE DESIGN DE INTERFACES FOI ELABORADA RESPEITANDO O CALENDÁRIO DE ATIVIDADES DO PROGRAMA DE EXTENSÃO EM INOVAÇÃO
ELA PODE TRABALHAR DE FORMA "CASADA" COM AS DISCIPLINAS DE PROJETÃO, OU DESIGN DE SERVIÇOS
A DISCIPLINA DE DESIGN DE INTERFACES FOI ELABORADA RESPEITANDO O CALENDÁRIO DE ATIVIDADES DO PROGRAMA DE EXTENSÃO EM INOVAÇÃO
PROJETO (DESIGN)
DESIGN DE INTERFACE
+
STANFORD D.SCHOOL DESIGN THINKING
PROJETÃO (UFPE)
DESIGN THINKING CANVAS (UFPE)
IDEO HUMAN CENTERED DESIGN
DESIGN COUNCIL DOUBLE DIAMOND
GOOGLE SPRINTS
IBM "THE LOOP" DESIGN THINKING MODEL
ZURB DESIGN THINKING MODEL
METODOLOGIAS DE PROJETO
ELA PODE TRABALHAR DE FORMA "CASADA" COM AS DISCIPLINAS DE PROJETÃO, OU DESIGN DE SERVIÇOS
A DISCIPLINA DE DESIGN DE INTERFACES FOI ELABORADA RESPEITANDO O CALENDÁRIO DE ATIVIDADES DO PROGRAMA DE EXTENSÃO EM INOVAÇÃO
ELA PODE TRABALHAR DE FORMA "CASADA" COM AS DISCIPLINAS DE PROJETÃO, OU DESIGN DE SERVIÇOS
A DISCIPLINA DE DESIGN DE INTERFACES FOI ELABORADA RESPEITANDO O CALENDÁRIO DE ATIVIDADES DO PROGRAMA DE EXTENSÃO EM INOVAÇÃO
programa de extensão em inovação
Atividade de extensão de 140 horas
(8 horas semanais por 4 meses) associada às disciplinas de Projetão, Economia Criativa, Design de Serviços e Design de Interfaces, para que as horas de dedicação
dos alunos ao seus projetos sejam
contabilizadas nos seus créditos
EXTENSÃO: INOVAÇÃO
PROJETÃO
DESIGN DE INTERFACES
140 HORAS
60 HORAS
60 HORAS
260 HORAS
1 ÚNICO TRABALHO
A DISCIPLINA DE DESIGN DE INTERFACES FOI ELABORADA RESPEITANDO O CALENDÁRIO DE ATIVIDADES DO PROGRAMA DE EXTENSÃO EM INOVAÇÃO
programa de extensão em inovação
Atividade de extensão de 140 horas
(8 horas semanais por 4 meses) associada às disciplinas de Projetão, Economia Criativa, Design de Serviços e Design de Interfaces, para que as horas de dedicação
dos alunos ao seus projetos sejam
contabilizadas nos seus créditos
EXTENSÃO: INOVAÇÃO
PROJETÃO
DESIGN DE INTERFACES
140 HORAS
60 HORAS
60 HORAS
260 HORAS
1 ÚNICO TRABALHO
EXTENSÃO
INTERFACES
80 HORAS
EXTENSÃO:
EMPREENDE
DORISMO
340 HORAS
ELA PODE TRABALHAR DE FORMA "CASADA" COM AS DISCIPLINAS DE PROJETÃO, OU DESIGN DE SERVIÇOS
programa de extensão em inovação
Atividade de extensão de 140 horas
(8 horas semanais por 4 meses) associada às disciplinas de Projetão, Economia Criativa, Design de Serviços e Design de Interfaces, para que as horas de dedicação
dos alunos ao seus projetos sejam
contabilizadas nos seus créditos
EXTENSÃO: INOVAÇÃO
PROJETÃO
DESIGN DE INTERFACES
140 HORAS
60 HORAS
60 HORAS
260 HORAS
1 ÚNICO TRABALHO
EXTENSÃO
INTERFACES
80 HORAS
EXTENSÃO:
EMPREENDE
DORISMO
340 HORAS
QUEST #1
QUEST #2
QUEST #3
QUEST #4
LEVANTAMENTOS
PERSONAS
JORNADAS
CARCTERIZAÇÃO
DO USUÁRIO
MVP
QUEST #5
QUEST #6
QUEST #7
QUEST #8
QUEST #9
ARQUITETURA
WIREFRAME
PROTÓTIPOS
USABILIDADE
TESTES
EXECUÇÃO
QUESTIONAMENTOS
COMO RESOLVÊ-LOS
MENTORIAS
DEMODAY
MENTORIAS
DEMODAY
QUESTIONAMENTOS
COMO RESOLVÊ-LOS
QUEST #1
QUEST #2
QUEST #3
QUEST #4
LEVANTAMENTOS
PERSONAS
JORNADAS
CARCTERIZAÇÃO
DO USUÁRIO
MVP
QUEST #5
QUEST #6
QUEST #7
QUEST #8
QUEST #9
ARQUITETURA
WIREFRAME
PROTÓTIPOS
USABILIDADE
TESTES
EXECUÇÃO
PROJETÃO
1 ÚNICO TRABALHO
EXTENSÃO
INTERFACES
80 HORAS
EXTENSÃO:
EMPREENDE
DORISMO
340 HORAS
MENTORIAS
DEMODAY
QUESTIONAMENTOS
COMO RESOLVÊ-LOS
QUEST #1
QUEST #2
QUEST #3
QUEST #4
LEVANTAMENTOS
PERSONAS
JORNADAS
CARCTERIZAÇÃO
DO USUÁRIO
MVP
QUEST #5
QUEST #6
QUEST #7
QUEST #8
QUEST #9
ARQUITETURA
WIREFRAME
PROTÓTIPOS
USABILIDADE
TESTES
EXECUÇÃO
programa de extensão em inovação
+ informações
Não se faz o design de uma interface após o artefato estar resolvido
A FORMAÇÃO DO CONCEITO DE GRAPHIC USER INTERFACE (GUI)
HISTÓRIA
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
MOBILE
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
MOBILE
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
MOBILE
TOUCH INTERFACES
A PRIMEIRA TELA
DISPOSITIVOS DE ENTRADA
A PRIMEIRA GUI
VERBOSE INTERFACES
SISTEMAS GRÁFICOS
MOBILE
TOUCH INTERFACES
BASE CONCEITUAL
FUNDAMENTOS
O QUE SÃO INTERFACES
FAMILIA
RIDADE
INTERFACES MINIMA
LISTAS
DOCUMEN
TOS SÃO
INTERFACES
A SUTIL ARTE DE PROJETAR
O QUE SÃO INTERFACES
FAMILIA
RIDADE
INTERFACES MINIMA
LISTAS
DOCUMEN
TOS SÃO
INTERFACES
A SUTIL ARTE DE PROJETAR
O QUE SÃO INTERFACES
FAMILIA
RIDADE
INTERFACES MINIMA
LISTAS
DOCUMEN
TOS SÃO
INTERFACES
A SUTIL ARTE DE PROJETAR
O QUE SÃO INTERFACES
FAMILIA
RIDADE
INTERFACES MINIMA
LISTAS
DOCUMEN
TOS SÃO
INTERFACES
A SUTIL ARTE DE PROJETAR
O QUE SÃO INTERFACES
FAMILIA
RIDADE
INTERFACES MINIMA
LISTAS
DOCUMEN
TOS SÃO
INTERFACES
A SUTIL ARTE DE PROJETAR
Design é uma sistematização;
Design é um sistema.
PETER BEHRENS, 19212
Considerado o primeiro designer
DESIGN CENTRADO
NO HUMANO
DESIGN CENTRADO
NO HUMANO
DESIGN CENTRADO
NO HUMANO
IDEO Design Kit
IDEO Human Centered Design
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
IDEO Design Kit
IDEO Human Centered Design
DESIGN THINKING
EMPATIA
EXPERIMENTAÇÃO
COLABORAÇÃO
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DIEGO RORIGUEZ
Intuit’s Chief Product & Design Office
IDEO Design Kit
IDEO Human Centered Design
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DIEGO RORIGUEZ
Intuit’s Chief Product & Design Office
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
DESIGN THINKING
EMPATIA
EXPERIMENTAÇÃO
COLABORAÇÃO
DESEJÁVEL
VIÁVEL
FAZÍVEL
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DIEGO RORIGUEZ
Intuit’s Chief Product & Design Office
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
DESEJÁVEL
VIÁVEL
FAZÍVEL
INTERFACES
INTERAÇÕES
É O QUE AS PESSOAS QUEREM?
VALORES HUMANOS
PSICOLOGIA
ANTROPOLOGIA
SOCIOLOGIA
DESIGN
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
DESEJÁVEL
VIÁVEL
FAZÍVEL
INTERFACES
INTERAÇÕES
É O QUE AS PESSOAS QUEREM?
VALORES HUMANOS
PSICOLOGIA
ANTROPOLOGIA
SOCIOLOGIA
DESIGN
É POSSÍVEL CONSTRUIR
TECNOLOGIA
ENGENHARIA
PRODUÇÃO
TÉCNICA
INFRA-ESTRUTURA
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
DESEJÁVEL
VIÁVEL
FAZÍVEL
INTERFACES
INTERAÇÕES
É O QUE AS PESSOAS QUEREM?
VALORES HUMANOS
PSICOLOGIA
ANTROPOLOGIA
SOCIOLOGIA
DESIGN
É POSSÍVEL CONSTRUIR
TECNOLOGIA
ENGENHARIA
PRODUÇÃO
TÉCNICA
INFRA-ESTRUTURA
É SUSTENTÁVEL
NEGÓCIOS
LOGÍSTICA
SUSTENTABILIDADE
MARKETING
FINANÇAS
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
VIÁVEL
FAZÍVEL
INTERFACES
INTERAÇÕES
É POSSÍVEL CONSTRUIR
TECNOLOGIA
ENGENHARIA
PRODUÇÃO
TÉCNICA
INFRA-ESTRUTURA
DESEJÁVEL
É SUSTENTÁVEL
NEGÓCIOS
LOGÍSTICA
SUSTENTABILIDADE
MARKETING
FINANÇAS
INOVAÇÃO
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
DESEJÁVEL
VIÁVEL
FAZÍVEL
INTERFACES
INTERAÇÕES
INOVAÇÃO
É SUSTENTÁVEL
NEGÓCIOS
LOGÍSTICA
SUSTENTABILIDADE
MARKETING
FINANÇAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
TEMPO
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
DESEJÁVEL
VIÁVEL
FAZÍVEL
INTERFACES
INTERAÇÕES
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
DIVERGÊNCIAS
DIVERGÊNCIAS
NÃO ENTENDEMOS DO ASSUNTO
TEMPO
DORES
NECESSIDADES
PONTOS DE VISTA
DESEJOS
COMPREENDER
DESCOBERTAS ESTRUTURADAS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
NÃO ENTENDEMOS DO ASSUNTO
TEMPO
DORES
NECESSIDADES
PONTOS DE VISTA
DESEJOS
COMPREENDER
DESCOBERTAS ESTRUTURADAS
INSIGHTS
CRITÉRIOS
CLASSIFICAÇÕES
VALORES
QUESTÃO NORTEADORA
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
NÃO ENTENDEMOS DO ASSUNTO
TEMPO
DORES
NECESSIDADES
PONTOS DE VISTA
DESEJOS
COMPREENDER
DESCOBERTAS ESTRUTURADAS
INSIGHTS
CRITÉRIOS
CLASSIFICAÇÕES
VALORES
QUESTÃO NORTEADORA
ESBOÇOS
PROPOSTAS
EXPERIMENTOS
WIREFRAMES
DEFINIR
MUITAS IDEIAS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
NÃO ENTENDEMOS DO ASSUNTO
TEMPO
DORES
NECESSIDADES
PONTOS DE VISTA
DESEJOS
COMPREENDER
DESCOBERTAS ESTRUTURADAS
INSIGHTS
CRITÉRIOS
CLASSIFICAÇÕES
IDEIAS
QUESTÃO NORTEADORA
ESBOÇOS
PROPOSTAS
EXPERIMENTOS
WIREFRAMES
DEFINIR
MUITAS IDEIAS
CONHECEMOS BEM O ASSUNTO
PROTOTIPAR
TESTAR
VALIDAR
AVALIAR
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
CONVERGÊNCIAS
CONVERGÊNCIAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
TEMPO
DORES
NECESSIDADES
PONTOS DE VISTA
DESEJOS
COMPREENDER
INSIGHTS
CRITÉRIOS
CLASSIFICAÇÕES
IDEIAS
ESBOÇOS
PROPOSTAS
EXPERIMENTOS
WIREFRAMES
DEFINIR
MUITAS IDEIAS
CONHECEMOS BEM O ASSUNTO
PROTOTIPAR
TESTAR
VALIDAR
AVALIAR
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
NÃO ENTENDEMOS DO ASSUNTO
DESCOBERTAS ESTRUTURADAS
QUESTÃO NORTEADORA
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
NÃO ENTENDEMOS DO ASSUNTO
TEMPO
DORES
NECESSIDADES
PONTOS DE VISTA
DESEJOS
COMPREENDER
DESCOBERTAS ESTRUTURADAS
INSIGHTS
CRITÉRIOS
CLASSIFICAÇÕES
IDEIAS
QUESTÃO NORTEADORA
ESBOÇOS
PROPOSTAS
EXPERIMENTOS
WIREFRAMES
DEFINIR
MUITAS IDEIAS
CONHECEMOS BEM O ASSUNTO
PROTOTIPAR
TESTAR
VALIDAR
AVALIAR
ITERAR
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Duble Diamond
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
NÃO ENTENDEMOS DO ASSUNTO
DORES
NECESSIDADES
PONTOS DE VISTA
DESEJOS
COMPREENDER
DESCOBERTAS ESTRUTURADAS
INSIGHTS
CRITÉRIOS
CLASSIFICAÇÕES
IDEIAS
QUESTÃO NORTEADORA
ESBOÇOS
PROPOSTAS
EXPERIMENTOS
WIREFRAMES
DEFINIR
MUITAS IDEIAS
CONHECEMOS BEM O ASSUNTO
PROTOTIPAR
TESTAR
VALIDAR
AVALIAR
TEMPO
ITERAR
ITERAR
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
PRODUTO TÍPICO DA APPLE
PRODUTO TÍPICO DO GOOGLE
PRODUTO TÍPICO DA SUA EMPRESA
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN DE INTERFACE
DESIGN DE INTERAÇÃO
O QUE É, ONDE MEXE
COMO É, COMO FUNCIONA
LAYOUT
COMPORTAMENTO
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
IDENTIDADE VISUAL
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
IDENTIDADE VISUAL
PATTERNS
DESIGN
SYSTEMS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
IDENTIDADE VISUAL
PATTERNS
DESIGN
SYSTEMS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
IDENTIDADE VISUAL
PATTERNS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
IDENTIDADE VISUAL
DESIGN
SYSTEMS
PATTERNS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
IDENTIDADE VISUAL
PATTERNS
DESIGN
SYSTEMS
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
DESIGN
SYSTEMS
CONJUNTO DE
REGRAS PROJETADAS
PARA GOVERNAR UM SISTEMA DE COMPONENTES
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
DESIGN
SYSTEMS
CONJUNTO DE
REGRAS PROJETADAS
PARA GOVERNAR UM SISTEMA DE COMPONENTES
DESIGN CENTRADO
NO HUMANO
DESIGN THINKING
INTERFACES
INTERAÇÕES
MICRO
INTERAÇÃO
DESIGN
SYSTEMS
DESIGN
SYSTEMS
CONJUNTO DE
REGRAS PROJETADAS
PARA GOVERNAR UM SISTEMA DE COMPONENTES
FASE DE EMPATIA, ESCUTA E ENTENDIMENTO
QUESTS #1 - #4
USUÁRIO
OBSERVAR
COMO UM
ANTROPÓLOGO
USER MAPPING
PENSAMENTO
AUDIÇÃO
VISÃO
MOTIVAÇÃO
CONTEXTO
COMPORTAMENTO
INTERFACE
EMPATIA
ALTERIDADE
+
=
ESCUTA
ALTRUÍSTA
AX
PROJETO COM BASE NO "AXISMO"
AX
PROJETO COM BASE NO "AXISMO"
SE VOCÊ ESTÁ DESENVOLVENDO ALGO COM BASE NO QUE "VOCÊ ACHA", ESTÁ NA HORA DE APROFUNDAR SEU CONHECIMENTO SOBRE O USUÁRIO
AX
PROJETO COM BASE NO "AXISMO"
SE VOCÊ ESTÁ DESENVOLVENDO ALGO COM BASE NO QUE "VOCÊ ACHA", ESTÁ NA HORA DE APROFUNDAR SEU CONHECIMENTO SOBRE O USUÁRIO
IDEAÇÃO, REPRESENTAÇÃO E PROTOTIPAÇÃO
QUESTS #5 - #9
MATERIALIDADE
EXPERIENCE STORYBOARD
BOM PARA
VISÃO GERAL DO PROJETO
USO DO PROJETO AO LONGO DE UMA JORNADA
CONSTRUÇÃO NARRATIVA (PROPÓSITO E VALOR)
REPRESENTAÇÃO DE UM CASO DE USO CONTEXTUALIZADO DA SOLUÇÃO
EXPERIENCE STORYBOARD
BOM PARA
VISÃO GERAL DO PROJETO
USO DO PROJETO AO LONGO DE UMA JORNADA
CONSTRUÇÃO NARRATIVA (PROPÓSITO E VALOR)
REPRESENTAÇÃO DE UM CASO DE USO CONTEXTUALIZADO DA SOLUÇÃO
EXPERIENCE STORYBOARD
BOM PARA
VISÃO GERAL DO PROJETO
USO DO PROJETO AO LONGO DE UMA JORNADA
CONSTRUÇÃO NARRATIVA (PROPÓSITO E VALOR)
REPRESENTAÇÃO DE UM CASO DE USO CONTEXTUALIZADO DA SOLUÇÃO
DEFINIÇÃO DOS ELEMENTOS DA INTERFACE
DIMENSIONAMENTO DOS ELEMENTOS NA TELA/INTERFACE
ORGANIZAÇÃO ESPACIAL DO CAMPO/INTERFACE
WIREFRAME
DESENHO ESQUEMÁTICO (E RÁPIDO) PLANEJANDO A INTERFACE
WIREFRAME
DEFINIÇÃO DOS ELEMENTOS DA INTERFACE
DIMENSIONAMENTO DOS ELEMENTOS NA TELA/INTERFACE
ORGANIZAÇÃO ESPACIAL DO CAMPO/INTERFACE
DESENHO ESQUEMÁTICO (E RÁPIDO) PLANEJANDO A INTERFACE
BOM PARA
EXPERIENCE STORYBOARD
VISÃO GERAL DO PROJETO
USO DO PROJETO AO LONGO DE UMA JORNADA
CONSTRUÇÃO NARRATIVA (PROPÓSITO E VALOR)
REPRESENTAÇÃO DE UM CASO DE USO CONTEXTUALIZADO DA SOLUÇÃO
WIREFRAME
DEFINIÇÃO DOS ELEMENTOS DA INTERFACE
DIMENSIONAMENTO DOS ELEMENTOS NA TELA/INTERFACE
ORGANIZAÇÃO ESPACIAL DO CAMPO/INTERFACE
DESENHO ESQUEMÁTICO (E RÁPIDO) PLANEJANDO A INTERFACE
BOM PARA
USER FLOW
BOM PARA
MAPEAR A INTERAÇÃO ENTRE O USUÁRIO E O SERVIÇO
USABILIDADE E RESPONSIVIDADE PARA AS AÇÕES/INTERAÇÕES DO USUÁRIO
IDENTIFICAR OS PONTOS DE CONTATO ENTRE O USUÁRIO E O SISTEMA
JORNADA DE TELAS/INTERFACE PELAS QUAIS O USUÁRIO PASSA AO REALIZAR UMA TAREFA/ATIVIDADE NA SOLUÇÃO
DEPENDE DA CONSTRUÇÃO PRÉVIA DE WIREFRAMES E SERVICE BLUEPRINTS
USER FLOW
BOM PARA
MAPEAR A INTERAÇÃO ENTRE O USUÁRIO E O SERVIÇO
USABILIDADE E RESPONSIVIDADE PARA AS AÇÕES/INTERAÇÕES DO USUÁRIO
IDENTIFICAR OS PONTOS DE CONTATO ENTRE O USUÁRIO E O SISTEMA
JORNADA DE TELAS/INTERFACE PELAS QUAIS O USUÁRIO PASSA AO REALIZAR UMA TAREFA/ATIVIDADE NA SOLUÇÃO
DEPENDE DA CONSTRUÇÃO PRÉVIA DE WIREFRAMES E SERVICE BLUEPRINTS
USER FLOW
BOM PARA
MAPEAR A INTERAÇÃO ENTRE O USUÁRIO E O SERVIÇO
USABILIDADE E RESPONSIVIDADE PARA AS AÇÕES/INTERAÇÕES DO USUÁRIO
IDENTIFICAR OS PONTOS DE CONTATO ENTRE O USUÁRIO E O SISTEMA
JORNADA DE TELAS/INTERFACE PELAS QUAIS O USUÁRIO PASSA AO REALIZAR UMA TAREFA/ATIVIDADE NA SOLUÇÃO
DEPENDE DA CONSTRUÇÃO PRÉVIA DE WIREFRAMES E SERVICE BLUEPRINTS
USER FLOW
BOM PARA
MAPEAR A INTERAÇÃO ENTRE O USUÁRIO E O SERVIÇO
USABILIDADE E RESPONSIVIDADE PARA AS AÇÕES/INTERAÇÕES DO USUÁRIO
IDENTIFICAR OS PONTOS DE CONTATO ENTRE O USUÁRIO E O SISTEMA
JORNADA DE TELAS/INTERFACE PELAS QUAIS O USUÁRIO PASSA AO REALIZAR UMA TAREFA/ATIVIDADE NA SOLUÇÃO
DEPENDE DA CONSTRUÇÃO PRÉVIA DE WIREFRAMES E SERVICE BLUEPRINTS
USER FLOW
BOM PARA
MAPEAR A INTERAÇÃO ENTRE O USUÁRIO E O SERVIÇO
USABILIDADE E RESPONSIVIDADE PARA AS AÇÕES/INTERAÇÕES DO USUÁRIO
IDENTIFICAR OS PONTOS DE CONTATO ENTRE O USUÁRIO E O SISTEMA
JORNADA DE TELAS/INTERFACE PELAS QUAIS O USUÁRIO PASSA AO REALIZAR UMA TAREFA/ATIVIDADE NA SOLUÇÃO
DEPENDE DA CONSTRUÇÃO PRÉVIA DE WIREFRAMES E SERVICE BLUEPRINTS
SERVICE BLUEPRINT
ESQUEMA DETALHANDO O MECANISMO/ETAPAS DE FUNCIONAMENTO DA SOLUÇÃO (O QUE ACONTECE NOS BASTIDORES PARA ALIMENTAR O QUE O USUÁRIO VÊ E INTERAGE)
ENTENDER DEMANDAS DE INFORMAÇÃO AO LONGO DO SERVIÇO
ENTENDER HIERARQUIA DE DECISÕES E AÇÕES PARA FUNCIONAMENTO
SERVICE BLUEPRINT
ESQUEMA DETALHANDO O MECANISMO/ETAPAS DE FUNCIONAMENTO DA SOLUÇÃO (O QUE ACONTECE NOS BASTIDORES PARA ALIMENTAR O QUE O USUÁRIO VÊ E INTERAGE)
BOM PARA
ENTENDER DEMANDAS DE INFORMAÇÃO AO LONGO DO SERVIÇO
ENTENDER HIERARQUIA DE DECISÕES E AÇÕES PARA FUNCIONAMENTO
USER FLOW
MAPEAR A INTERAÇÃO ENTRE O USUÁRIO E O SERVIÇO
USABILIDADE E RESPONSIVIDADE PARA AS AÇÕES/INTERAÇÕES DO USUÁRIO
IDENTIFICAR OS PONTOS DE CONTATO ENTRE O USUÁRIO E O SISTEMA
JORNADA DE TELAS/INTERFACE PELAS QUAIS O USUÁRIO PASSA AO REALIZAR UMA TAREFA/ATIVIDADE NA SOLUÇÃO
DEPENDE DA CONSTRUÇÃO PRÉVIA DE WIREFRAMES E SERVICE BLUEPRINTS
SERVICE BLUEPRINT
ESQUEMA DETALHANDO O MECANISMO/ETAPAS DE FUNCIONAMENTO DA SOLUÇÃO (O QUE ACONTECE NOS BASTIDORES PARA ALIMENTAR O QUE O USUÁRIO VÊ E INTERAGE)
BOM PARA
ENTENDER DEMANDAS DE INFORMAÇÃO AO LONGO DO SERVIÇO
ENTENDER HIERARQUIA DE DECISÕES E AÇÕES PARA FUNCIONAMENTO
SERVICE BLUEPRINT
ESQUEMA DETALHANDO O MECANISMO/ETAPAS DE FUNCIONAMENTO DA SOLUÇÃO (O QUE ACONTECE NOS BASTIDORES PARA ALIMENTAR O QUE O USUÁRIO VÊ E INTERAGE)
BOM PARA
ENTENDER DEMANDAS DE INFORMAÇÃO AO LONGO DO SERVIÇO
ENTENDER HIERARQUIA DE DECISÕES E AÇÕES PARA FUNCIONAMENTO
COR
PROPORÇÃO ÁUREA DA HARMONIA ENTRE CORES
6:3:1
60%
COR PRINCIPAL
GERALMENTE NEUTRA, MAS NÃO OBRIGATÓRIAMENTE
30%
COR SECUNDÁRIA
USO DE UMA COR SECUNDÁRIA, GERALMENTE MAIS FORTE, MAS NÃO A PONTO DE GERAR ALTO CONTRASTE COM A COR PRIMÁRIA
10%
COR DE ACENTUAÇÃO
USO DE UMA TERCEIRA COR PARA DAR ACENTO A ALGUNS ELEMENTOS, GERALMENTE CRIANDO ALTO CONTRASTE COM AS DEMAIS CORES
GRID 12 COLUNAS
12 É UM NÚMERO COM MUITOS DIVISORES COMUNS
354
363
GRID 12 COLUNAS
12 É UM NÚMERO COM MUITOS DIVISORES COMUNS
354
363
480
GRID 12 COLUNAS
12 É UM NÚMERO COM MUITOS DIVISORES COMUNS
354
363
480
306 dp/dip/px
320 dp/dip/px
status bar 24dp/dip
app bar 56dp/dip
320 dp/dip/px
margem 7 dp/dip/px
margem 7 dp/dip/px
conteúdo 306 dp/dip/px
306 dp/dip/px
iPhone 4
iPhone 5
iPhone 6
Moto G
Samsung S8
320x480
320x568
375x667
360x640
360x740
2017 © PROF. DR. GUILHERME RANOYA
Backup Interfaces Mobile Indigo 2
By Guilherme Ranoya
Backup Interfaces Mobile Indigo 2
APRESENTAÇÃO MOBILE DA DISCIPLINA DE DESIGN DE INTERFACES DA UNIVERSIDADE FEDERAL DE PERNAMBUCO (dDESIGN|UFPE) VERSÃO 3.0
