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