PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
https://interfaces.ranoya.com
DESIGN
DIGITAIS
DE
INTERFACES
Não se faz o design de uma interface após o artefato/serviço estar resolvido
DE SERVIÇOS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
https://interfaces.ranoya.com
DESIGN
DIGITAIS
DE
INTERFACES
Não se faz o design de uma interface após o artefato/serviço estar resolvido
Design de interface não é maquiagem
DE SERVIÇOS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
DESIGN
DE
INTERFACES
Não se faz o design de uma interface após o artefato/serviço estar resolvido
Design de interface não é maquiagem
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
https://interfaces.ranoya.com
DIGITAIS
DE SERVIÇOS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
DESIGN
DE
INTERFACES
Não se faz o design de uma interface após o artefato/serviço estar resolvido
Design de interface não é maquiagem
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
Design de interface não é uma fase de projeto
https://interfaces.ranoya.com
DIGITAIS
DE SERVIÇOS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
DESIGN
DE
INTERFACES
Design de interface não é maquiagem
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
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
DIGITAIS
DE SERVIÇOS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
PROFESSOR
PROGRAMA
CALENDÁRIO
MEETS
BIBLIOGRAFIA
REFERÊNCIAS
DESIGN
INTERFACES
Design de interface não é maquiagem
Não se faz o design de uma interface de forma independente/separada do projeto do artefato
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
DIGITAIS
DE SERVIÇOS
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
Design de interface não é uma fase de projeto
DESIGN DE SERVIÇOS
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
Design de interface não é uma fase de projeto
DESIGN DE SERVIÇOS
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
Design de interface não é uma fase de projeto
DESIGN DE SERVIÇOS
o serviço é aquilo
que efetivamente é entregue ou prestado às pessoas / usuários
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
Design de interface não é uma fase de projeto
DESIGN DE SERVIÇOS
o serviço é aquilo
que efetivamente é entregue ou prestado às pessoas / usuários
interface é
onde as
pessoas
interagem
com o serviç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
Design de interface não é uma fase de projeto
DESIGN DE SERVIÇOS
o serviço é aquilo
que efetivamente é entregue ou prestado às pessoas / usuários
interface é
onde as
pessoas
interagem
com o serviço
o projeto (integral), envolve configurar o serviço, a interface, mas também todos os demais aspectos, da identidade visual ao método adotado de projeto
(metadesign)
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
Design de interface não é uma fase de projeto
DESIGN DE SERVIÇOS
interface é
onde as
pessoas
interagem
com o serviço
o projeto (integral), envolve configurar o serviço, a interface, mas também todos os demais aspectos, da identidade visual ao método adotado de projeto
(metadesign)
ELUCIDANDO A CONFUSÃO CONCEITUAL
ID, IXD, UX
DESIGN DE INTERFACE
DESIGN DE INTERAÇÃO
O QUE É, ONDE MEXE
COMO É, COMO FUNCIONA
LAYOUT
COMPORTAMENTO
Ao encerrar o desenvolvimento do Windows 2.0, em 1988, Tandy Trower, então responsável pelo projeto do Windows (que aparentemente seria encerrado, em favor do Presentation Manager para o sistema OS/2 da IBM) propôs como sua nova atividade dentro da Microsoft:
DESEJÁVEL
Contratar um grupo de designers (e
não desenvolvedores) para a melhoria das interfaces
TANDY TROWER, 1988
Windows 1.0/2.0 Product Manager
Instituir uma infraestrutura para realização de testes de usabilidade
Definir guidelines de Design da Interfaces, garantindo consistências entre os aplicativos para Windows e uma boa interface
Desenvolver conhecimento em Interfaces com o Usuário (UI) para além do Windows, para que a Microsoft tenha boas interfaces em seus produtos
ENTENDENDO COMO PENSAR COMO UM DESIGNER
PROCESSO
PROJETUAL
POR
QUE?
COMO?
O QUE?
COMO ESTRUTURAR UM PROJETO
AX
PROJETO COM BASE NO "AXISMO"
PROJETO COM BASE NO "AXISMO"
SE VOCÊ ESTÁ DESENVOLVENDO ALGO COM BASE NO QUE "VOCÊ ACHA", ESTÁ NA HORA DE ENTENDER QUE UM PROJETO É BASEADO EM INFORMAÇÃO
AX
PROJETO COM BASE NO "AXISMO"
PROJETO COM BASE NO "AXISMO"
SE VOCÊ ESTÁ DESENVOLVENDO ALGO COM BASE NO QUE "VOCÊ ACHA", ESTÁ NA HORA DE ENTENDER QUE UM PROJETO É BASEADO EM INFORMAÇÃO
INFORMAÇÃO PODE SER OS DADOS QUE VOCÊ ENCONTRA SOBRE O ASSUNTO, MAS TAMBÉM PODE SER AQUILO QUE VOCÊ OBSERVA EM CAMPO, E REGISTRA
AX
PROJETO COM BASE NO "AXISMO"
PROJETO COM BASE NO "AXISMO"
SE VOCÊ ESTÁ DESENVOLVENDO ALGO COM BASE NO QUE "VOCÊ ACHA", ESTÁ NA HORA DE ENTENDER QUE UM PROJETO É BASEADO EM INFORMAÇÃO
INFORMAÇÃO PODE SER OS DADOS QUE VOCÊ ENCONTRA SOBRE O ASSUNTO, MAS TAMBÉM PODE SER AQUILO QUE VOCÊ OBSERVA EM CAMPO, E REGISTRA
É NECESSÁRIO CONVERSAR COM AS PESSOAS, OBSERVAR O QUE ACONTECE, E REUNIR EVIDÊNCIAS CONCRETAS PARA EMBASAR UM PROJETO
AX
PROJETO COM BASE NO "AXISMO"
PROJETO COM BASE NO "AXISMO"
SE VOCÊ ESTÁ DESENVOLVENDO ALGO COM BASE NO QUE "VOCÊ ACHA", ESTÁ NA HORA DE ENTENDER QUE UM PROJETO É BASEADO EM INFORMAÇÃO
INFORMAÇÃO PODE SER OS DADOS QUE VOCÊ ENCONTRA SOBRE O ASSUNTO, MAS TAMBÉM PODE SER AQUILO QUE VOCÊ OBSERVA EM CAMPO, E REGISTRA
É NECESSÁRIO CONVERSAR COM AS PESSOAS, OBSERVAR O QUE ACONTECE, E REUNIR EVIDÊNCIAS CONCRETAS PARA EMBASAR UM PROJETO
EMPATIA
ALTERIDADE
+
AX
PROJETO COM BASE NO "AXISMO"
INFORMAÇÃO PODE SER OS DADOS QUE VOCÊ ENCONTRA SOBRE O ASSUNTO, MAS TAMBÉM PODE SER AQUILO QUE VOCÊ OBSERVA EM CAMPO, E REGISTRA
É NECESSÁRIO CONVERSAR COM AS PESSOAS, OBSERVAR O QUE ACONTECE, E REUNIR EVIDÊNCIAS CONCRETAS PARA EMBASAR UM PROJETO
EMPATIA
ALTERIDADE
+
ALTRUÍSTA
ESCUTA
=
AX
PROJETO COM BASE NO "AXISMO"
INFORMAÇÃO PODE SER OS DADOS QUE VOCÊ ENCONTRA SOBRE O ASSUNTO, MAS TAMBÉM PODE SER AQUILO QUE VOCÊ OBSERVA EM CAMPO, E REGISTRA
É NECESSÁRIO CONVERSAR COM AS PESSOAS, OBSERVAR O QUE ACONTECE, E REUNIR EVIDÊNCIAS CONCRETAS PARA EMBASAR UM PROJETO
EMPATIA
ALTERIDADE
+
ALTRUÍSTA
ESCUTA
=
Empatia é o coração do design. Sem a consideração sobre o que os outros vêem, sentem e experimentam, o design é uma tarefa sem sentido.
TIM BROWN
IDEO
AX
PROJETO COM BASE NO "AXISMO"
INFORMAÇÃO PODE SER OS DADOS QUE VOCÊ ENCONTRA SOBRE O ASSUNTO, MAS TAMBÉM PODE SER AQUILO QUE VOCÊ OBSERVA EM CAMPO, E REGISTRA
É NECESSÁRIO CONVERSAR COM AS PESSOAS, OBSERVAR O QUE ACONTECE, E REUNIR EVIDÊNCIAS CONCRETAS PARA EMBASAR UM PROJETO
EMPATIA
ALTERIDADE
+
ALTRUÍSTA
ESCUTA
=
Empatia é o coração do design. Sem a consideração sobre o que os outros vêem, sentem e experimentam, o design é uma tarefa sem sentido.
TIM BROWN
IDEO
PROJETAR É UM PROCESSO IMERSIVO
TODO PROJETISTA
ACREDITA QUE JÁ TEM UMA SOLUÇÃO IDEAL, MESMO NA PRIMEIRA TENTATIVA
O APRENDIZADO É REALIZADO ATRAVÉS DA CRÍTICA SISTEMÁTICA SOBRE A SOLUÇÃO ELABORADA
PROJETAR É UM PROCESSO IMERSIVO
TODO PROJETISTA
ACREDITA QUE JÁ TEM UMA SOLUÇÃO IDEAL, MESMO NA PRIMEIRA TENTATIVA
O APRENDIZADO É REALIZADO ATRAVÉS DA CRÍTICA SISTEMÁTICA SOBRE A SOLUÇÃO ELABORADA
PROJETAR É UM PROCESSO IMERSIVO
TODO PROJETISTA
ACREDITA QUE JÁ TEM UMA SOLUÇÃO IDEAL, MESMO NA PRIMEIRA TENTATIVA
O APRENDIZADO É REALIZADO ATRAVÉS DA CRÍTICA SISTEMÁTICA SOBRE A SOLUÇÃO ELABORADA
IDEO Design Kit
IDEO Human Centered Design
Outros Sabores
do Design Thinking
FASE DE EMPATIA, ESCUTA E ENTENDIMENTO
PESSOAS
USER MAPPING
PENSAMENTO
AUDIÇÃO
VISÃO
MOTIVAÇÃO
CONTEXTO
COMPORTAMENTO
INTERFACE
ROTEIROS PARA ORIENTAR O CAMINHO PROJETUAL
MÉTODOS
IDEO Design Kit
IDEO Human Centered Design
Outros Sabores
do Design Thinking
DESIGN THINKING
EMPATIA
EXPERIMENTAÇÃO
COLABORAÇÃO
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
Outros Sabores
do 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
DESIGN THINKING
EMPATIA
EXPERIMENTAÇÃO
COLABORAÇÃO
DESEJÁVEL
VIÁVEL
REALIZÁVEL
Pensar em negócios quando fazemos design é equivalente a pensar na gravidade quando fazemos arquitetura
DIEGO RORIGUEZ
Intuit’s Chief Product & Design Office
DESEJÁVEL
VIÁVEL
REALIZÁVEL
É 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
DESEJÁVEL
VIÁVEL
REALIZÁVEL
É 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
DESEJÁVEL
VIÁVEL
REALIZÁVEL
É 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
VIÁVEL
REALIZÁVEL
É 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
DESEJÁVEL
VIÁVEL
REALIZÁVEL
INOVAÇÃO
É SUSTENTÁVEL
NEGÓCIOS
LOGÍSTICA
SUSTENTABILIDADE
MARKETING
FINANÇAS
Double 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
DESEJÁVEL
VIÁVEL
REALIZÁVEL
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Double 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
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Double 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
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Double 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
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Double 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
CONVERGÊNCIAS
CONVERGÊNCIAS
Double 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
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Double 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
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
CONVERGÊNCIAS
Double 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
IDEAÇÃO, REPRESENTAÇÃO E PROTOTIPAÇÃO
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
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
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
FERRAMENTAS PARA A PROTOTIPAÇÃO
INSTRUMENTOS
PORMENORES, DETALHES E ESPECIFICIDADES
DO DESIGN DE INTERFACES
PROTOCOLOS
a
Material Design
Parágrafos
Múltiplos de 4dp (px)
Espaçamento entre-linha
Corpo 14dp, linha 20dp
Corpo 20dp, linha 28dp
Espaçamento entre-parágrafos
.75x - 1.25x do tamanho da fonte
Corpo 20dp, linha 28dp, paragrafo 28dp
Headings
p: 16px
h3: 24px
h2: 32px
h1: 40px
WCAG 2.0 Web Content Accessibility Guidelines
Parágrafos
Texto: 18px, ou 14px bold
Espaçamento entre-linha
1.5x o tamanho da fonte
1.5em
Espaçamento entre-parágrafos
2x o tamanho da fonte
2em
Headings
p: 18px
h3: 22px
h2: 33px
h1: 44px
a
Material Design
Parágrafos
Múltiplos de 4dp (px)
Espaçamento entre-linha
Corpo 14dp, linha 20dp
Corpo 20dp, linha 28dp
Espaçamento entre-parágrafos
.75x - 1.25x do tamanho da fonte
Corpo 20dp, linha 28dp, paragrafo 28dp
Headings
p: 16px
h3: 24px
h2: 32px
h1: 40px
WCAG 2.0 Web Content Accessibility Guidelines
Parágrafos
Texto: 18px, ou 14px bold
Espaçamento entre-linha
1.5x o tamanho da fonte
1.5em
Espaçamento entre-parágrafos
2x o tamanho da fonte
2em
Headings
p: 18px
h3: 22px
h2: 33px
h1: 44px
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
COMPONENTES, COMPORTAMENTOS, CONVENÇÕES E FRAMEWORKS DE INTERFACEAMENTO
DESIGN SYSTEMS
DESIGN
SYSTEMS
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
REACT
VUE
SVELTE
VUE NATIVE
SVELTE NATIVE
WEB
REACT NATIVE
MOBILE
REACT NATIVE FOR WEB
HÍBRIDO
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
REACT
VUE
SVELTE
VUE NATIVE
SVELTE NATIVE
WEB
REACT NATIVE
MOBILE
REACT NATIVE FOR WEB
HÍBRIDO
AGNÓSTICOS
O DESENVOLVIMENTO E O CÓDIGO É O MESMO PARA QUAISQUER PLATAFORMAS (IOS/ANDROID)
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
REACT
VUE
SVELTE
WEB
MOBILE
REACT NATIVE FOR WEB
HÍBRIDO
AGNÓSTICOS
O DESENVOLVIMENTO E O CÓDIGO É O MESMO PARA QUAISQUER PLATAFORMAS (IOS/ANDROID)
CONSISTENTES
O COMPORTAMENTO DOS COMPONENTES É CONHECIDA E REAPROVEITÁVEL NAS VÁRIAS SOLUÇÕES DESENVOLVIDAS
VUE NATIVE
SVELTE NATIVE
REACT NATIVE
WEBSERVER COM NODE.JS
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
REACT
VUE
SVELTE
VUE NATIVE
SVELTE NATIVE
REACT NATIVE
REACT NATIVE FOR WEB
WEBSERVER COM NODE.JS
WEB
MOBILE
HÍBRIDO
CLOUD
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
REACT
VUE
SVELTE
VUE NATIVE
SVELTE NATIVE
REACT NATIVE
REACT NATIVE FOR WEB
WEB
MOBILE
HÍBRIDO
CLOUD
CÓDIGO EM JAVASCRIPT
CÓDIGO DA INTERFACE (VIEW)
CÓDIGO DO SERVIÇO/LÓGICA (CONTROLADOR)
WEBSERVER COM NODE.JS
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
REACT
VUE
SVELTE
VUE NATIVE
SVELTE NATIVE
REACT NATIVE
REACT NATIVE FOR WEB
WEB
MOBILE
HÍBRIDO
CLOUD
CÓDIGO EM JAVASCRIPT
CÓDIGO DA INTERFACE (VIEW)
CÓDIGO DO SERVIÇO/LÓGICA (CONTROLADOR)
WEBSERVER COM NODE.JS
REPOSITÓRIO (GITHUB/GITLAB/BITBUCKET)
PRODUÇÃO
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
REACT
VUE
SVELTE
VUE NATIVE
SVELTE NATIVE
REACT NATIVE
REACT NATIVE FOR WEB
WEB
MOBILE
HÍBRIDO
CLOUD
CÓDIGO EM JAVASCRIPT
CÓDIGO DA INTERFACE (VIEW)
CÓDIGO DO SERVIÇO/LÓGICA (CONTROLADOR)
WEBSERVER COM NODE.JS
REPOSITÓRIO (GITHUB/GITLAB/BITBUCKET)
PRODUÇÃO
DESENVOLVIMENTO DOS COMPONENTES DE INTERFACE DA APLICAÇÃO EM JAVASCRIPT
DESENVOLVIMENTO DA APLICAÇÃO PELOS ENGENHEIROS EM JAVASCRIPT USANDO OS COMPONENTES
ATUALIZAÇÃO DOS CÓDIGOS DESENVOLVIDOS DE FORMA COLABORATIVA EM REPOSITÓRIO ONLINE
ATUALIZAÇÃO AUTOMÁTICA DA APLICAÇÃO ONLINE EM AMBIENTES DE TESTE E PRODUÇÃO PARA BRANCHES DISTINTOS
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
CLOUD
REPOSITÓRIO (GITHUB/GITLAB/BITBUCKET)
PRODUÇÃO
DESENVOLVIMENTO DOS COMPONENTES DE INTERFACE DA APLICAÇÃO EM JAVASCRIPT
DESENVOLVIMENTO DA APLICAÇÃO PELOS ENGENHEIROS EM JAVASCRIPT USANDO OS COMPONENTES
ATUALIZAÇÃO DOS CÓDIGOS DESENVOLVIDOS DE FORMA COLABORATIVA EM REPOSITÓRIO ONLINE
ATUALIZAÇÃO AUTOMÁTICA DA APLICAÇÃO ONLINE EM AMBIENTES DE TESTE E PRODUÇÃO PARA BRANCHES DISTINTOS
GIT
NODE
NPM
LINHA DE COMANDO
EDITOR DE CÓDIGO
GITHUB,
GITLAB,
BITBUCKET,
ETC.
VERCEL,
HEROKU,
AMAZON AWS,
ETC.
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
CLOUD
REPOSITÓRIO (GITHUB/GITLAB/BITBUCKET)
PRODUÇÃO
DESENVOLVIMENTO DOS COMPONENTES DE INTERFACE DA APLICAÇÃO EM JAVASCRIPT
DESENVOLVIMENTO DA APLICAÇÃO PELOS ENGENHEIROS EM JAVASCRIPT USANDO OS COMPONENTES
ATUALIZAÇÃO DOS CÓDIGOS DESENVOLVIDOS DE FORMA COLABORATIVA EM REPOSITÓRIO ONLINE
ATUALIZAÇÃO AUTOMÁTICA DA APLICAÇÃO ONLINE EM AMBIENTES DE TESTE E PRODUÇÃO PARA BRANCHES DISTINTOS
GIT
NODE
NPM
LINHA DE COMANDO
EDITOR DE CÓDIGO
GITHUB,
GITLAB,
BITBUCKET,
ETC.
VERCEL,
HEROKU,
AMAZON AWS,
ETC.
WEBSERVER
REACT/VUE/SVELTE
PASTAS E ARQUIVOS
COMPONENTES
DE DESIGN SYSTEMS
PRONTOS
AMBIENTE DE TESTE INSTALADO LOCALMENTE
FRAMEWORK DE PROCESSAMENTO DO CÓDIGO
ESTRUTURA E DOCUMENTOS INICIAIS DA APLICAÇÃO
FERRAMENTAS, BIBLIOTECAS E RECURSOS UTILIZADOS (DEPENDÊNCIAS)
FRAMEWORKS PARA DESENVOLVIMENTO DE COMPONENTES DE INTERFACE
CLOUD
REPOSITÓRIO (GITHUB/GITLAB/BITBUCKET)
PRODUÇÃO
DESENVOLVIMENTO DOS COMPONENTES DE INTERFACE DA APLICAÇÃO EM JAVASCRIPT
DESENVOLVIMENTO DA APLICAÇÃO PELOS ENGENHEIROS EM JAVASCRIPT USANDO OS COMPONENTES
ATUALIZAÇÃO DOS CÓDIGOS DESENVOLVIDOS DE FORMA COLABORATIVA EM REPOSITÓRIO ONLINE
ATUALIZAÇÃO AUTOMÁTICA DA APLICAÇÃO ONLINE EM AMBIENTES DE TESTE E PRODUÇÃO PARA BRANCHES DISTINTOS
GIT
NODE
NPM
LINHA DE COMANDO
EDITOR DE CÓDIGO
GITHUB,
GITLAB,
BITBUCKET,
ETC.
VERCEL,
HEROKU,
AMAZON AWS,
ETC.
AMBIENTE DE TESTE INSTALADO LOCALMENTE
FRAMEWORK DE PROCESSAMENTO DO CÓDIGO
ESTRUTURA E DOCUMENTOS INICIAIS DA APLICAÇÃO
FERRAMENTAS, BIBLIOTECAS E RECURSOS UTILIZADOS (DEPENDÊNCIAS)
WEBSERVER
REACT/VUE/SVELTE
PASTAS E ARQUIVOS
COMPONENTES
DE DESIGN SYSTEMS
PRONTOS
DESIGN
SYSTEMS
VOCABULÁRIO DA INTERFACE
COMPONENTES
COMPORTAMENTOS
MICROINTERAÇÃO
2018 © PROF. DR. GUILHERME RANOYA
Interfaces Mobile Indigo
By Guilherme Ranoya
Interfaces Mobile Indigo
APRESENTAÇÃO MOBILE DA DISCIPLINA DE DESIGN DE INTERFACES DA UNIVERSIDADE FEDERAL DE PERNAMBUCO (dDESIGN|UFPE) VERSÃO 3.0
