https://interfaces.ranoya.com

DESI

GN

FACES

INTER

D

I

AIS

D

I

G

T

E

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

I

AVISOS

ESTE MATERIAL FOI DESENVOLVIDO COMO PARTE INTEGRANTE DA DISCIPLINA DE DESIGN DE INTERFACES DIGITAIS DO CURSO DE BACHARELADO EM DESIGN DA UNIVERSIDADE FEDERAL DE PERNAMBUCO. SEU USO E ACESSO É PÚBLICO E IRRESTRITO, MAS NÃO CONFIGURA VÍNCULO COM A UNIVERSIDADE, TAMPOUCO O CUMPRIMENTO DAS EXIGÊNCIAS DA UNIVERSIDADE PARA CONCLUIR A DISCIPLINA DO CURSO, OU REALIZAR EQUIVALÊNCIA À QUALQUER OUTRA DISCIPLINA DE CURSO SUPERIOR OU DE QUALQUER OUTRA MODALIDADE. ESTE É APENAS UM MATERIAL DE APOIO AS ATIVIDADES DOCENTES E DISCENTES.

AS TECNOLOGIAS ENVOLVIDAS PARA A CONSTRUÇÃO DESTE MATERIAL NÃO SÃO INTEGRALMENTE COMPATÍVEIS COM DISPOSITIVOS MOBILE, EM ESPECIAL, AO SISTEMA OPERACIONAL IOS. POR MAIORES QUE SEJAM OS ESFORÇOS EM PRODUZIR UM MATERIAL QUE FUNCIONE BEM EM QUALQUER PLATAFORMA OU DISPOSITIVO, ALGUNS RECURSOS NECESSÁRIOS PARA A INTERAÇÃO PODEM NÃO ESTAR DISPONÍVEIS, OU SEREM INSUFICIENTES, NESTES DISPOSITIVOS.

OS CONTEÚDOS QUE FORAM CRIADOS E PRODUZIDOS PARA ESTA DISCIPLINA, E A CURADORIA DE REFERÊNCIAS E EXEMPLOS, SÃO PROPRIEDADE INTELECTUAL DO PROF. DR. GUILHERME RANOYA. SEU USO COMERCIAL OU REPRODUÇÃO (MESMO PARCIAL) POR ORGANIZAÇÕES COM FINS LUCRATIVOS SÃO VEDADOS, EXCETO NA EXPRESSA AUTORIZAÇÃO DO AUTOR.

DEPARTAMENTO DE DESIGN
dDESIGN | UFPE

UNIVERSIDADE FEDERAL DE PERNAMBUCO

PESQUISA EM EXPERIÊNCIA E ESTÉTICA DA INTERAÇÃO

2017 © PROF. DR. GUILHERME RANOYA

INSTITUCIONAL

DOCUMENTOS DA DISCIPLINA

O QUE É ESTE MATERIAL/DOCUMENTAÇÃO?

ESTA DISCIPLINA UTILIZA O PRINCÍPIO DE "FLIPPED CLASSROOM", ADOTADO NAS MELHORES UNIVERSIDADES DO MUNDO.

O FORMATO DA AULA NÃO É A DE UM PROFESSOR EXPLICANDO CONTEÚDOS, E DE UM ALUNO OUVINDO PASSIVAMENTE.

OS CONTEÚDOS QUE VOCÊ PRECISA APRENDER ESTÃO DISPONÍVEIS NESTE MATERIAL; O QUE ESTÁ AQUI É SEU MATERIAL DE ESTUDO PARA CURSAR A DISCPLINA.

A AULA É O MOMENTO DE DISCUSSÃO E APLICAÇÃO DO CONHECIMENTO DISPONIBILIZADO NO MATERIAL

COMUNICAÇÕES SÃO FEITAS ATRAVÉS DO AMBIENTE DA DISCIPLINA NO

GOOGLE CLASSROOM

CÓDIGO DA TURMA

xrjachn

ATENDIMENTOS INDIVIDUAIS PRESENCIAIS OU VIA GOOGLE MEETS PARA ACOMPANHAMENTO DE TRABALHOS, ESCLARECIMENTO DE DÚVIDAS, OU OUTRAS QUESTÕES, PRECISAM SER AGENDADOS NOS HORÁRIOS DISPONÍVEIS NA AGENDA DO PROFESSOR

https://meet.google.com/lookup/d6ufyelgkc

SALA PARA VIDEOCONFERÊNCIAS

https://meet.google.com/lookup/d6ufyelgkc

SALA PARA VIDEOCONFERÊNCIAS

A DISCIPLINA DE DESIGN DE INTERFACES FOI ELABORADA RESPEITANDO O CALENDÁRIO DE ATIVIDADES DO PROGRAMA DE EXTENSÃO EM INOVAÇÃO

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

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 

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 

PROJETO

DESIGN DE INTERFACES

EXTENSÃO: INOVAÇÃO

EXTENSÃO: EMPREENDEDORISMO

60 HORAS

60 HORAS

140 HORAS

80 HORAS

SEMESTRE 1

SEMESTRE 2

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

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 

PROJETO

DESIGN DE INTERFACES

EXTENSÃO: INOVAÇÃO

EXTENSÃO: EMPREENDEDORISMO

60 HORAS

60 HORAS

140 HORAS

80 HORAS

SEMESTRE 1

EXTENSÃO

SANDPIT

MIND THE BIZZ

SEMESTRE 4 E 5

PORTO DIGITAL

CENTELHA

SEMESTRE 3

SEMESTRE 2

EXTENSÃO

INTERFACES

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 

PROJETÃO

DESIGN DE INTERFACES

EXTENSÃO: INOVAÇÃO

EXTENSÃO: EMPREENDEDORISMO

60 HORAS

60 HORAS

140 HORAS

80 HORAS

SEMESTRE 1

SEMESTRE 1

PROJETO

INTERFACES

EXTENSÃO

EXTENSÃO

SANDPIT

MIND THE BIZZ

SEMESTRE 4 E 5

PORTO DIGITAL

CENTELHA

SEMESTRE 3

SEMESTRE 2

2 OU MAIS  DISCIPLINAS
1 PROJETO, 1 FOCO, 1 PREOCUPAÇÃO
+340H DA SUA CARGA HORÁRIA

2 PROGRAMAS DE QUALIFICAÇÃO EMPREENDEDORA
1 PROGRAMA DE INCUBAÇÃO DE NOVOS NEGÓCIOS

CONTINUIDADE

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 

PROJETÃO

DESIGN DE INTERFACES

EXTENSÃO: INOVAÇÃO

EXTENSÃO: EMPREENDEDORISMO

60 HORAS

60 HORAS

140 HORAS

80 HORAS

SEMESTRE 1

SEMESTRE 1

PROJETO

INTERFACES

EXTENSÃO

EXTENSÃO

SANDPIT

MIND THE BIZZ

SEMESTRE 4 E 5

PORTO DIGITAL

CENTELHA

SEMESTRE 3

SEMESTRE 2

2 OU MAIS  DISCIPLINAS
1 PROJETO, 1 FOCO, 1 PREOCUPAÇÃO
+340H DA SUA CARGA HORÁRIA

2 PROGRAMAS DE QUALIFICAÇÃO EMPREENDEDORA
1 PROGRAMA DE INCUBAÇÃO DE NOVOS NEGÓCIOS

CONTINUIDADE

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

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 

PROJETÃO

DESIGN DE INTERFACES

EXTENSÃO: INOVAÇÃO

EXTENSÃO: EMPREENDEDORISMO

60 HORAS

60 HORAS

140 HORAS

80 HORAS

SEMESTRE 1

SEMESTRE 1

PROJETO

INTERFACES

EXTENSÃO

EXTENSÃO

SANDPIT

MIND THE BIZZ

SEMESTRE 4 E 5

PORTO DIGITAL

CENTELHA

SEMESTRE 3

SEMESTRE 2

2 OU MAIS  DISCIPLINAS
1 PROJETO, 1 FOCO, 1 PREOCUPAÇÃO
+340H DA SUA CARGA HORÁRIA

2 PROGRAMAS DE QUALIFICAÇÃO EMPREENDEDORA
1 PROGRAMA DE INCUBAÇÃO DE NOVOS NEGÓCIOS

CONTINUIDADE

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

DESIGN DE INTERFACES NÃO É UMA ATIVIDADE/CAMPO AUTÔNOMO DO DESIGN.

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

METODOLOGIAS

STANFORD "ORIGINAL" DESIGN THINKING

STANFORD D.SCHOOL DESIGN THINKING

ZURB DESIGN THINKING MODEL

DESIGN COUNCIL DOUBLE DIAMOND

GOOGLE SPRINTS

IBM "THE LOOP" DESIGN THINKING MODEL

IDEO HUMAN CENTERED DESIGN

PROJETÃO (UFPE)

DESIGN THINKING CANVAS (UFPE)

PROJETO (DESIGN)

DESIGN DE INTERFACE

METODOLOGIAS

STANFORD "ORIGINAL" DESIGN THINKING

STANFORD D.SCHOOL DESIGN THINKING

ZURB DESIGN THINKING MODEL

DESIGN COUNCIL DOUBLE DIAMOND

GOOGLE SPRINTS

IBM "THE LOOP" DESIGN THINKING MODEL

IDEO HUMAN CENTERED DESIGN

PROJETÃO (UFPE)

DESIGN THINKING CANVAS (UFPE)

+

PROJETO (DESIGN)

DESIGN DE INTERFACE

METODOLOGIAS

STANFORD "ORIGINAL" DESIGN THINKING

STANFORD D.SCHOOL DESIGN THINKING

ZURB DESIGN THINKING MODEL

DESIGN COUNCIL DOUBLE DIAMOND

GOOGLE SPRINTS

IBM "THE LOOP" DESIGN THINKING MODEL

IDEO HUMAN CENTERED DESIGN

PROJETÃO (UFPE)

DESIGN THINKING CANVAS (UFPE)

+

SOCIEDADE

ESTÉTICA

TECNOLOGIA

CIÊNCIA

SOCIEDADE

ESTÉTICA

TECNOLOGIA

CIÊNCIA

WEBDESIGN

EIXOS

CICLO / PROCESSO DE DESIGN

ESTRUTURA BASEADA NO TRABALHO DE GUSTAVO BOMFIM

DESIGN DE INFORMAÇÃO PARA WEB

ARQUITETURA DE INFORMAÇÃO

USER EXPERIENCE

DESIGN DE INTERFACES

USOS DOS ARTEFATOS

NECESSIDADES LATENTES

APLICAÇÕES

CONFIGURAÇÃO DOS ARTEFATOS

FORMA

SOLUÇÃO

PRODUÇÃO

MATERIAIS

TÉCNICAS

PROCESSOS

CONTEXTO

FUNDAMENTO

VERIFICAÇÃO
 

PROJETÃO

USABILIDADE

ERGONOMIA

PROBLEMA DE CONTEÚDO E SUA FORMA MULTIMIDIÁTICA

MATERIAIS, INSTRUMENTOS E FERRAMENTAS UTILIZADAS NA CONSTRUÇÃO DO DESIGN DE INFORMAÇÃO EM SUPORTE DIGITAL

IDENTIFICAÇÃO DAS NECESSIDADES DE USUÁRIOS / CONSUMIDORES E DEFINIÇÃO DE REQUISITOS DE PROJETO

VERIFICAÇÃO E AJUSTE DOS ARTEFATOS SOBRE O USO, CONFORTO, ADEQUAÇÃO, PERFORMANCE, ETC.

DESIGN DE INTERFACES

TECNOLOGIA

ESTÉTICA

SOCIEDADE

CIÊNCIA

CONFIGURAÇÃO DAS INTERFACES DE USO DOS ARTEFATOS DIGITAIS

CONFIGURAÇÃO DA INFORMAÇÃO PRESENTE NELA

CONFIGURAÇÃO E DE SUA INTERAÇÃO COM OS USUÁRIOS

BIBLIOGRAFIA  

A FORMAÇÃO DO CONCEITO DE GRAPHIC USER INTERFACE (GUI)

HISTÓRIA

BASE CONCEITUAL

FUNDAMENTOS

Design é uma sistematização;
Design é um sistema.

PETER BEHRENS, 19212
Considerado o primeiro designer

IDEO Design Kit

IDEO Human Centered Design

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

DESIRABILITY

FEASIBILITY

VIABILITY

Negócios

ESTRATÉGIA

MARKETING

LOGÍSTICA

OPERAÇÕES

FINANÇAS

Tecnologia

ENGENHARIA

EXECUÇÃO

PRODUÇÃO

TÉCNICA

INFRA-ESTRUTURA

Valores Humanos

PSICOLOGIA

ANTROPOLOGIA

SOCIOLOGIA

DESIGN

Manufatura

PROCESSO DE PRODUÇÃO

TECNOLOGIA PRODUTIVA

CADEIA DE SUPRIMENTOS

Interação

FORMA E FUNÇÃO

EXPERIÊNCIA E PRAZER DE USO

USABILIDADE

SUSTENTABILIDADE

Organização

EQUIPE

GESTÃO

LIDERANÇA

NEGOCIAÇÃO

Inovação

| é sustentável?

é possível |
 construir?|

é o que as pessoas querem?

PROCESSO ITERATIVO

IMERSÃO PRELIMINAR

IMERSÃO EM PROFUNDIDADE

ANÁLISE E SÍNTESE

IDEAÇÃO

PROTOTIPAÇÃO

SOLUÇÃO INOVADORA

1

2

3

4

5

6

REENQUADRAMENTO

PESQUISA EXPLORATÓRIA

ENTREVISTAS

FOCUS GROUPS

SONDAS CULTURAIS

UM DIA NA VIDA

SOMBRA

DIAGRAMA DE AFINIDADES

CARTÕES DE INSIGHT

MAPA CONCEITUAL

CRITÉRIOS NORTEADORES

PERSONAS

MAPA DE EMPATIA

JORNADA DO USUÁRIO

BLUEPRINTS

BRAINSTORMING

CO-CRIAÇÃO

CARDÁPIO DE IDEIAS

MATRIZ DE POSICIONAMENTO

PROTÓTIPOS DE PAPEL

PROTÓTIPOS DE VOLUME

ENCENAÇÃO

STORYBOARD

DOUBLE DIAMOND (DESIGN COUNCIL)

CONVERGENCIAS

DIVERGENCIAS

DESCOBERTA

DEFINIÇÃO

DESENVOLVIMENTO

ENTREGA

PESQUISA

SÍNTESE

IDEAÇÃO

IMPLEMENTAÇÃO

PROJETAR CERTO A COISA

PROJETAR A COISA CERTA

PROJETAR A COISA CERTA

PROJETAR A COISA CERTA

PROJETAR A COISA CERTA

QUESTÕES

DESAFIOS

DESCOBERTAS DESESTRUTURADAS

QUESTÃO          NORTEADORA

DESCONHECEMOS O QUE FAZER

SABEMOS COMO RESOLVER

MUITAS IDEIAS

DESCOBERTAS DESESTRUTURADAS

DESCOBERTAS DESESTRUTURADAS

DESCOBERTAS DESESTRUTURADAS

QUESTÃO          NORTEADORA

QUESTÃO          NORTEADORA

QUESTÃO          NORTEADORA

COMO FAZER

O QUE FAZER

COMO FAZER

O QUE FAZER

CONVERGENCIAS

DIVERGENCIAS

COMO FAZER

O QUE FAZER

COMO FAZER

O QUE FAZER

PROJETAR CERTO A COISA

PROJETAR CERTO A COISA

PROJETAR CERTO A COISA

MUITAS IDEIAS

MUITAS IDEIAS

MUITAS IDEIAS

NÃO ENTENDEMOS DO ASSUNTO

CONHECEMOS BEM O ASSUNTO

DORES

NECESSIDADES

PONTOS DE VISTA

DESEJOS

 

ENTREVISTAS

LEVANTAMENTOS

QUESTIONAMENTOS

OBSERVAÇÕES

ANOTAÇÕES

 

CRITICAR

COMPARAR

CLASSIFICAR

ATRIBUIR VALORES

EXEMPLIFICAR

EXPLICAR

PAINEIS

APROXIMAÇÃO DE

IDEIAS

NATUREZA DAS

QUESTÕES

DIAGRAMAS

CRIAR

PROPOR

ELABORAR

REPRESENTAR

DESENHAR

INVENTAR

TENTAR

ESBOÇOS

WIREFRAMES

PROTÓTIPOS DE BAIXA FIDELIDADE

EXPERIMENTOS

PROVA DE
CONCEITO

TESTES DE USABILIDADE
ENCENAÇÃO
PROTÓTIPOS DE ALTA FIDELIDADE
PROTÓTIPOS DE VOLUME
STORYBOARD
SIMULAÇÃO

TESTAR

AVERIGUAR

REPENSAR

VERIFICAR

AVALIAR

 

ITERAÇÕES

DESIGN DE INTERFACE

DESIGN DE INTERAÇÃO

O QUE É, ONDE MEXE

COMO É, COMO FUNCIONA

LAYOUT

COMPORTAMENTO

PRODUTO TÍPICO DA APPLE

PRODUTO TÍPICO DO GOOGLE

PRODUTO TÍPICO DA SUA EMPRESA

IDENTIDADE VISUAL

BRAND BOOK

PATTERNS

DESIGN SYSTEMS

PATTERNS

DESIGN SYSTEMS

CONJUNTO DE REGRAS PROJETADAS PARA GOVERNAR UM SISTEMA DE COMPONENTES

REGRAS

REGRAS DETERMINAM DINÂMICAS

DINÂMICAS DETERMINAM EXPRESSÕES

EXPRESSÕES CONFIGURAM MATERIALIDADE

MDA

MDA

DESIGN SYSTEMS

DESIGN SYSTEMS

IDENTIDADE VISUAL

LINGUAGEM

FOCO DO PROJETO

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"

SE VOCÊ ESTÁ DESENVOLVENDO ALGO COM BASE NO QUE "VOCÊ ACHA", ESTÁ NA HORA DE APROFUNDAR SEU CONHECIMENTO SOBRE O USUÁRIO

CONHECER BEM O USUÁRIO É A CHAVE PARA UM BOM PROJETO

OS ARTEFATOS E SEUS COMPORTAMENTOS SÃO APENAS MEIOS PARA SE PRODUZIR EFEITOS NO USUÁRIO

PROJETA-SE COM O USUÁRIO, E NÃO PARA O USUÁRIO

COM

PARA

O SEU MATERIAL DE EXPERIMENTAÇÃO É O USUÁRIO, E NÃO O ARTEFATO. ENVOLVA O USUÁRIO NO PROJETO, TESTE E VALIDE SEMPRE

IDEAÇÃO E REPRESENTAÇÃO

ARTEFATO

MDA

MECÂNICAS

DINÂMICAS

MATERIALIDADES

MECHANICS

DYNAMICS

AESTHETICS

CONSUMO

PRODUÇÃO

LeBLANC, HUNICKE & ZUBEK

CONSTRAINTS

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 

WIREFRAME

BOM PARA

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

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

BOM PARA

ENTENDER DEMANDAS DE INFORMAÇÃO AO LONGO DO SERVIÇO

ENTENDER HIERARQUIA DE DECISÕES E AÇÕES PARA FUNCIONAMENTO

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)

GRID 12 COLUNAS

12 É UM NÚMERO COM MUITOS DIVISORES COMUNS

3-5-4

3-6-3

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

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

QUESTS

METODOLOGIA PROJETÃO

2019 © PROF. DR. GUILHERME RANOYA

Made with Slides.com