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 estar resolvido

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 estar resolvido

Design de interface não é maquiagem

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

DESIGN

DIGITAIS

DE

INTERFACES

Não se faz o design de uma interface após o artefato 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

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

DESIGN

DIGITAIS

DE

INTERFACES

Não se faz o design de uma interface após o artefato 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

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

PROFESSOR

PROGRAMA

CALENDÁRIO

MEETS

BIBLIOGRAFIA

REFERÊNCIAS

DESIGN

DIGITAIS

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

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

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

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

ELUCIDANDO A CONFUSÃO CONCEITUAL

ID, IXD, UX

DESIGN DE INTERFACE

DESIGN DE INTERAÇÃO

O QUE É, ONDE MEXE

COMO É, COMO FUNCIONA

LAYOUT

COMPORTAMENTO

A PRIMEIRA INTERFACE

REPRESENTAÇÃO DA INFORMAÇÃO

POR

QUE?

COMO?

O QUE?

PRIORIDADES DA
REPRESENTAÇÃ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

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

=

FASE DE EMPATIA, ESCUTA E ENTENDIMENTO
QUESTS #1 - #4

USUÁRIO

USER MAPPING

PENSAMENTO

AUDIÇÃO

VISÃO

MOTIVAÇÃO

CONTEXTO

COMPORTAMENTO

INTERFACE

ENTENDENDO COMO O MÉTODO É APLICADO

PROCESSO

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

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

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

DESEJÁVEL

VIÁVEL

FAZÍ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

FAZÍ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

FAZÍ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

FAZÍ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

FAZÍ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

FAZÍ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
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

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

DESIGN
SYSTEMS

2018 © PROF. DR. GUILHERME RANOYA