https://interfaces.ranoya.com
DESI
GN
FACES
INTER
D
I
AIS
D
I
G
T
E
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 PELO SLACK, NO GRUPO DE INOVAÇÃO DO CIN.
CADASTRE-SE E ACESSE POR ESTE
LINK
LINK
#INTERFACES
ACESSE O CANAL DA DISCIPLINA
#INTERFACES
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
METODOLOGIA
METODOLOGIAS
IDEO HCD
DESIGN COUNCIL DD
DTC
PROJETÃO
ETC.
2002
2004
2012
2015
2017
2020
2002
2004
2012
2015
2017
2020
NOVOS CURRÍCULOS DA EDUCAÇÃO
FOCO EM INOVAÇÃO
MULTIDISCIPLINARIDADE
MULTIPLICAÇÃO
INTEGRAÇÃO
REORGANIZAÇÃO
"VIVÊNCIA DO MUNDO REAL" VIA APLICAÇÃO PRÁTICA DESENVOLVIDA EM EQUIPE, REUNINDO CONHECIMENTOS DIVERSOS APRENDIDOS NO CURSO
ÊNFASE SOBRE O PAPEL DA INOVAÇÃO, PRINCIPALMENTE PELA RELAÇÃO COM O PORTO DIGITAL
INGRESSO DE ALUNOS E PROFESSORES DOS CURSOS DE DESIGN E PSICOLOGIA
CURSOS "FILHOS"
IMD | UFRN
SI | UFPE
CAC | UFPE
CAA | UFPE
DC | UFRPE
DQF | UFPE
IFMG
INTEGRAÇÃO E MOBILIDADE ENTRE OS CURSOS, CRIAÇÃO DE PROGRAMA DE EXTENSÃO, E INTERNACIONALIZAÇÃO
FUNDAÇÃO DO INSTITUTO DE EDUCAÇÃO PARA INOVAÇÃO
DISCIPLINAS "IRMÃS"
DESIGN DE
INTERFACES
PROJETÃO
DESIGN DE INTERFACE
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
MENTORIAS
ARQUITETURA
WIREFRAME
PROTÓTIPOS
USABILIDADE
TESTES
EXECUÇÃO
QUESTIONAMENTOS
COMO RESOLVÊ-LOS
ALUNOS PRECISAM ESTAR DESENVOLVENDO UM PROJETO DE ARTEFATO DIGITAL, PREFERENCIALMENTE COM METODOLOGIA PROJETÃO OU DESIGN THINKING CANVAS
RECOMENDA-SE FAZER PROJETÃO EM PARALELO
ALUNOS QUE NÃO ESTÃO MATRICULADOS EM PROJETÃO:
1) PODEM SE MATRICULAR NO PERÍODO DE REMATRÍCULA
2) PODEM TRABALHAR COM OS PARÂMETROS DE PROJETO DE UM GRUPO DE PROJETÃO (E/OU COLABORAR COM O GRUPO)
3) PORDEM USAR A METODOLOGIA EM UM PROJETO DE TCC
DEMODAY
Nas reformulações de curso feitas à partir de 2017, 10% da carga horária precisará ser cumprida obrigatoriamente em projetos de extensão, como se fossem disciplinas
Projetão é uma disciplina muito trabalhosa. Vamos para a aula no começo da semana, e só paramos de trabalhar no domingo antes da próxima aula
programa de extensão em inovação
Atividade de extensão de 140 horas (8 horas semanais) associada à disciplina de Projetão, para que as horas de dedicação dos alunos ao seus projetos sejam contabilizadas nos seus créditos
DESIGN DE INTERFACES
EXTENSÃO: INOVAÇÃO
60 HORAS
60 HORAS
140 HORAS
SEMESTRE 1
PROJETÃO
EXTENSÃO: EMPREENDEDORISMO
80 HORAS
SEMESTRE 2
DESIGN DE INTERFACES
EXTENSÃO: INOVAÇÃO
60 HORAS
60 HORAS
140 HORAS
SEMESTRE 1
PROJETÃO
EXTENSÃO: EMPREENDEDORISMO
80 HORAS
SEMESTRE 2
SANDPIT
SEMESTRE 3
MIND THE BIZZ
PORTO DIGITAL
SEMESTRE 4
PORTO DIGITAL
SEMESTRE 5
Mais informações
CENTELHA
CENTELHA
SALA DE AULA
EXTENSÃO
(FORA DA SALA DE AULA)
SOCIEDADE
ESTÉTICA
TECNOLOGIA
CIÊNCIA
USOS DOS ARTEFATOS
NECESSIDADES LATENTES
APLICAÇÕES
CONFIGURAÇÃO DOS ARTEFATOS
FORMA
SOLUÇÃO
PRODUÇÃO
MATERIAIS
TÉCNICAS
PROCESSOS
CONTEXTO
FUNDAMENTO
VERIFICAÇÃO
DESIGN DE INTERFACES
CONFIGURAÇÃO DAS INTERFACES DE USO DOS ARTEFATOS DIGITAIS
CONFIGURAÇÃO DA INFORMAÇÃO PRESENTE NELA
CONFIGURAÇÃO DE SUA INTERAÇÃO COM OS USUÁRIOS
EIXOS
CICLO /
PROCESSO DE DESIGN
ESTÉTICA
DESIGN DE INTERFACES | UFPE
PROGRAMA
CALENDÁRIO
PROGRAMA
CALENDÁRIO
Guilherme Ranoya
Design | UFPE
PERFIL
Dirigiu o trabalho criativo e o desenvolvimento de projetos relacionados com mídias digitais na Tortuga Studios e na L3A Interativa entre 2001 e 2017.
Coordenou de 2010 à 2017 as pesquisas sobre Wearable Computing, Estética da Interação e Generative Art no Laboratório de Pesquisa em Ambientes Interativos (LPAI) do grupo de Pesquisa em Tecnologias Aplicadas do do Centro Universitário Senac em São Paulo.
PERFIL
GRUPO DE INOVAÇÃO
GRUPO DE INOVAÇÃO
BIBLIOGRAFIA
BIBLIOGRAFIA
REFERÊNCIAS
REFERÊNCIAS
REFERÊNCIAS EM INTERFACES
FORMAÇÃO DO GRAPHIC USER INTERFACE
HISTÓRIA
BASE CONCEITUAL
FUNDAMENTOS
O QUE É
PROJETAR?
Design é uma
sistematização, design é um sistema
PETER BEHRENS, 1912
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
é sustentável?
é possível
construir?
é o que as pessoas querem?
INOVAÇÃO
DOUBLE DIAMOND
DESIGN COUNCIL
DIVERGÊNCIAS
CONVERGÊNCIAS
DIVERGÊNCIAS
CONVERGÊNCIAS
PROJETAR A COISA CERTA
PROJETAR CERTO A COISA
VÁRIAS RESPOSTAS POSSÍVEIS
UMA RESPOSTA IDEAL
UM PRODUTO FINAL
VÁRIAS CONFIGURAÇÕES POSSÍVEIS
1ª ITERAÇÃO
2ª ITERAÇÃO
Nª ITERAÇÃO
Isso não é Design Thinking
RODRIGO GIAFFREDO
29 DE NOVEMBRO DE 2017
Que me perdoem os puristas, mas passar etapas de framework e executar tarefas propostas por artefatos, sem mudança de pensamento apoiada nos pilares de empatia, colaboração e experimentação, não é design thinking.
Colar post-it pra todo lado, de cores diferentes, sem dar sentido claro orientado ao valor esperado em cada etapa do exercício, não é design thinking.
DESIGN DE INTERFACE
DESIGN DE INTERAÇÃO
O QUE É, ONDE MEXE
COMO É, COMO FUNCIONA
LAYOUT
COMPORTAMENTO
JOSHUA PORTER
PRINCIPLES OF USER INTERFACE DESIGN
Paradigmas da Interação
Extended Papers
O QUE SÃO
INTERFACES?
PRODUTO TÍPICO DA APPLE
PRODUTO TÍPICO DO GOOGLE
PRODUTO TÍPICO DA SUA EMPRESA
IDENTIDADE VISUAL
BRAND BOOK
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
INTERFACES MINIMALISTAS, EQUIVOCOS CONCEITUAIS
DESIGN SYSTEMS
IDENTIDADE VISUAL
LINGUAGEM
DESIGN SYSTEMS
DESIGN SYSTEMS
REPOSITÓRIO DE DESIGN SYSTEMS PÚBLICOS
REPOSITÓRIO DE DESIGN SYSTEMS PÚBLICOS
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
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
DIETER RAMS
TEN PRINCIPLES FOR GOOD DESIGN
DON NORMAN
PRINCIPLES OF DESIGN
BEN SHNEIDERMAN
8 GOLDEN RULES OF ID
DAN SAFFER
BASIC PRINCIPLES OF NUI DESIGN
MDA
MECÂNICAS
DINÂMICAS
MATERIALIDADES
MECHANICS
DYNAMICS
AESTHETICS
CONSUMO
PRODUÇÃO
LeBLANC, HUNICKE & ZUBEK
UXTOOLS.CO
UXTOOLS.CO
DEVICE METRICS
DEVICE METRICS
COMPORTAMENTO RESPONSIVO
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)
BLUEPRINTS
BLUEPRINTS
JORNADA DO USUÁRIO
JORNADA DO USUÁRIO
iOS GUIDELINES
iOS GUIDELINES
MATERIAL DESIGN
MATERIAL DESIGN
MATERIAL DESIGN COMPONENTS
MATERIAL DESIGN COMPONENTS
MATERIALIZE
MATERIALIZE
JAKOB NIELSEN
USABILITY HEURISTICS FOR USER INTERFACE DESIGN
2019 © PROF. DR. GUILHERME RANOYA
Mobile Projetão: Design de Interfaces Digitais
By Guilherme Ranoya
Mobile Projetão: Design de Interfaces Digitais
Slides da disciplina de Design de Interfaces Digitais, disciplina conjugada à Projetão
