Palestra ministrada em Paracambi (07/12/2017) no Vale iTech. Local: No IFRJ e FAETEC – Paracambi, RJ. R. Sebastião de Lacerda, s/n - Centro, Paracambi / RJ. Sobre o evento Vale iTech: O Vale Itech é uma programação de eventos desenvolvida pelo Condado tecnológico |Cidades sustentáveis - ConTec.O objetivo do Vale Itech é fortalecer os ambientes de inovação, proporcionar o desenvolvimento da indústria de TI fluminense, crescimento da empregabilidade e da melhora do conhecimento de TI regional.

1. O PENSAMENTO
DO DESIGNER
RIAN DUTRA

2. EXPERIÊNCIA
+10 de experiência
Sócio fundador da Rian Design,
na qual desenvolveu sites,
aplicativos e projetos gráficos
para clientes como Udacity
Brasil, Museu Imperial de
Petrópolis, Instituto Ronald
McDonald, SOS Mata
Atlântica, Ephere, Sergio
Mallandro e Tom Cavalcante.
FORMAÇÃO
‣ Mestrado em Ciência da
Computação (UFJF)
‣ Pós-graduação em Gestão,
Empreendedorismo e Marketing
(PUCRS)
‣ Pós-graduação em Animação 3D
(Instituto Infnet)
‣ Graduação em Design Gráfico
(Instituto Infnet)
‣ Graduação em Análise e
Desenvolvimento de Sistemas
(UNESA)

3. MUITO TEMPO ATRÁS,
NUMA GALÁXIA MUITO,
MUITO DISTANTE (SQN)

4. MINHA PRIMEIRA EXPERIÊNCIA COM DESIGN
FOI HÁ MAIS DE 20 ANOS,
QUANDO EU NEM SABIA O QUE ERA DESIGN

7. 486 WINDOWS 3.0

11. 26 CORES

12. 16 MILHÕES
DE CORES

17. INTRODUÇÃO
PRIMEIRO EMPREGO
Este é ou não seu
emprego dos sonhos?
Designer na Fastheon Multimedia Software:
• Sites (design e programação)
• Vídeos
• CD Multimídia
• Interface para sistemas
• Materiais impressos
17/103

18. ENTÃO, MINHA PERSPECTIVA
DO QUE ERA DESIGN MUDOU
COMPLETAMENTE

19. O QUE É
DESIGN?

20. O QUE É DESIGN?
OBSERVAR E
FAZER CONEXÕES
• Antes da estética, o Design tem um papel estratégico
• O Designer basicamente observa e estabelece novas
conexões, para criar soluções para algum problema
20/103

23. O QUE É DESIGN?
2 COMPETÊNCIAS:
• Ser observador: perceber o problema, o fato, a situação,
sendo capaz de entender o cenário, as pessoas, as
dificuldades
• Capacidade de estabelecer conexões: ter ideia de
conectar elementos. Madeira + Pedra = ?
23/103

24. PEDRA +
MADEIRA =
MARTELOEssa ideia tem cerca de 70 mil
anos (estima-se) e é útil até hoje

25. O DESIGN TEM 3
DEFINIÇÕES BÁSICAS

26. O QUE É DESIGN? > DEFINIÇÕES BÁSICAS
DESENHO
• “Design" não é "desenho", mas precisa ter
• Não existe Design se não tiver uma experiência gráfica,
uma manifestação gráfica.
• Pode ter Design com tipografia, com aquarela, com
pintura, fotografia etc. Mas tem que ter desenho
• Pode ter design só com verbo ou áudio?
26/103

27. O QUE É DESIGN? > DEFINIÇÕES BÁSICAS
PROJETO
• “Design" significa “projeto"
• Ex: Sound Designer
• Os elementos que compõem uma peça de Design deve ter
seu significado e papel no projeto. Não meramente
ilustrativo
• O Design deve ter a capacidade de ser reproduzido em
larga escala.
27/103

28. O QUE É DESIGN? > DEFINIÇÕES BÁSICAS
FINALIDADE
• Ou Designo
• A peça deve ter objetivos, finalidade
28/103

29. QUANDO JUNTA ESSAS 3
DEFINIÇÕES, VOCÊ TEM DESIGN.
É, DE ALGUMA FORMA, MELHORAR A VIDA DE
ALGUÉM. SOLUCIONAR PROBLEMAS.

30. É DESIGN?

31. É DESIGN?
Desenhar uma placa no Corel
Draw para colocar na porta do
salão de cabeleireiro
31
É DESIGN?
/103

32. É DESIGN?
Criar uma placa onde qualquer
dono de salão pode alterar o
nome ou colar seu logotipo, e
mostrar “Salão especializado em
corte masculino”
32
É DESIGN?
/103

33. É DESIGN?
Uma carteira compacta
maravilhosa de couro, mas que
as notas caem toda vez que
puxa do bolso
33
É DESIGN?
/103

34. É DESIGN?
Um óculos com lentes
enormes que te fazem
enxergar melhor do que
nunca, mas que sua
namorada te jogaria uma
granada e fecharia tua
boca, de tão horrendo
que o óculos é
34 / 10
É DESIGN?

35. É DESIGN?
Saches de maionese,
que te sujam toda vez
que tenta abrir um
35
É DESIGN?
/103

36. É DESIGN?
Um cortador que deixa suas
unhas empecáveis, mas que
custa apenas R$ 1,90
36
É DESIGN?
/103

37. NATUREZA
E DESIGN

38. É HORA DE MEDITAR

39. NATUREZA E DESIGN
BIOMIMÉTICA
39
• Biomimética = Imitar a vida
• Ciência que estuda os modelos da natureza e depois os
imita ou se inspira neles.
• Essa ciência não se aplica apenas ao design de produto,
mas também em outras áreas criativas como no design de
moda, arquitetura etc
/103

40. NATUREZA E DESIGN
BIOMIMÉTICA
40
• Biomimética = Imitar a vida
• Ciência que estuda os modelos da natureza e depois os
imita ou se inspira neles.
• Essa ciência não se aplica apenas ao design de produto,
mas também em outras áreas criativas como no design de
moda, arquitetura etc
/103

41. A NATUREZA É A MELHOR REFERÊNCIA PARA
APRENDERMOS COMO PROJETAR (DESIGN)

42. A NATUREZA USA 3 PRINCÍPIOS
BÁSICOS QUE NORTEIAM TUDO
QUE ELA CRIAVA

43. NATUREZA E DESIGN > PRINCÍPIOS DA NATUREZA
OTIMIZAÇÃO
• Natureza detesta desperdício
• Se uma gota d’água escorre numa rocha, é certeza daquele
ser o melhor caminho, o mais otimizado, que menos gasta
energia
43/103

44. NATUREZA E DESIGN > PRINCÍPIOS DA NATUREZA
CICLO
• Sustentabilidade
• "Na Natureza nada se cria, nada se perde, tudo se
transforma" (Lavoisier)
• Não existe desperdício!
44/103

45. NATUREZA E DESIGN > PRINCÍPIOS DA NATUREZA
INTERDEPENDÊNCIA
• É como se a vida se estabelecesse em uma grande teia, e
quando fazemos algum tipo de intervenção nela, toda a
teia tem alguma reação
• Tudo está conectado a tudo
• Para toda ação, há uma reação que impacta o todo
45/103

46. MAS,FAZEMOS O OPOSTO

47. NATUREZA E DESIGN > PRINCÍPIOS DA NATUREZA
HUMANO X NATUREZA
47 / 10
• Em vez de otimizar, fazemos o inverso
Por exemplo, os carros
• Em vez de evitar o desperdício, gastamos.
O McDonald’s gera toneladas de lixo por dia. Não pensamos no descarte. Não
usamos até a última gota do xampu, porque a embalagem não nos permite
• Em vez de pensarmos como o princípio de
interdependência, em que tudo está conectado a tudo,
temos uma visão fragmentada da realidade

48. A FALTA QUE O
DESIGN FAZ

49. A FALTA QUE O DESIGN FAZ 49
Perde tempo colocando o arame!
5 segundos por vez. 10s por dia. 5 min por mês. 1 hora por ano. 20 horas nos últimos 20 anos.
/103

50. A FALTA QUE O DESIGN FAZ 50
Todo dia, num lugar diferente.
/103

51. A FALTA QUE O DESIGN FAZ 51
Lixo do McDona’s, para onde jogar?
/103

52. A FALTA QUE O DESIGN FAZ 52
iPhone, reconhecimento facial ao dirigir um carro.
/103

53. A FALTA QUE O DESIGN FAZ 53
Chuveiro, quente e frio.
/103

54. A FALTA QUE O DESIGN FAZ 54
Perde tempo amarrando os cadarços!
10 segundos por vez. 20s por dia. 10 min por mês. 2 hora por ano. 40 horas nos últimos 20 anos.
/103

55. A FALTA QUE O DESIGN FAZ 55
Erra a posição ao tentar conectar o USB.
/103

56. ERROS
DE DESIGN

57. A CATÁSTROFE
NUCLEAR DA THREE
MILE ISLAND

58. ERROS DE DESIGN > THREE MILE ISLAND
A CATÁSTROFE NUCLEAR
DA THREE MILE ISLAND
58
• Em 1979, a usina nuclear de Three Mile Island,
no condado de Dauphin, perto de Harrisburg
(EUA), era uma central nuclear
• Foi o pior acidente nuclear na história da
energia nuclear comercial com pequenas
quantidades de materiais radioativos liberados
para o ambiente
• Foram realizadas investigações para determinar
a causa exata da fusão nuclear e concluiu-se
que uma válvula de escape operada por piloto
estava na posição aberta, permitindo que
grandes quantidades de fluídos de reator
nuclear escapassem do sistema
/103

59. ERROS DE DESIGN > THREE MILE ISLAND
A CATÁSTROFE NUCLEAR DA THREE MILE ISLAND
59
• O design do painel de controle foi um dos
principais fatores contribuintes para a catástrofe
• O painel de controle indicou que a válvula estava
fechada quando na verdade estava na posição
aberta
• Os operadores não entenderam como a interface
funcionava. Acreditavam que a válvula ainda
estava na posição fechada, mas as informações
fornecidas pelo painel de controle eram apenas
um indicador do sinal elétrico para a válvula, não
a posição da válvula
ERRO DO DESIGN
DE INTERFACE
/103

60. ERROS DE DESIGN > THREE MILE ISLAND
A CATÁSTROFE NUCLEAR DA THREE MILE ISLAND
60
• A 1a heurística de Nielsen diz sobre a
"Visibilidade do Status do Sistema”
• Mantenha o usuário sempre informado
com o que ele está fazendo,
informando o retorno de suas ações
• O design deve levar em consideração
a forma como os usuários esperam que
os dispositivos funcionem e refletem
isso de acordo na interface do usuário
A SOLUÇÃO
DO DESIGN
/103

61. AS ELEIÇÕES
ENTRE BUSH E AL
GORE EM 2000

62. ERROS DE DESIGN > ELEIÇÕES DOS EUA
AS ELEIÇÕES ENTRE BUSH
E AL GORE EM 2000
62
• As eleições presidenciais de 2000
dos Estados Unidos estavam
acirradas, entre Bush e Al Gore
• Uma pesquisa apontava que Al
Gore havia vencido na Flórida,
somando 270 colégios eleitorais
contra 267
• Saiu o resultado: Bush era o
vencedor
/103

63. ERROS DE DESIGN > ELEIÇÕES DOS EUA 63
• Mas tinha um detalhe: Bush só
tinha 1.784 votos de vantagem, o
que obrigava uma recontagem,
de acordo com as leis da Flórida
• Estranhamente, depois da
recontagem, a diferença era de
apenas 900 votos
• Então, fizeram a recontagem à
mão, cédula por cédula
AS ELEIÇÕES ENTRE BUSH
E AL GORE EM 2000
/103

64. ERROS DE DESIGN > ELEIÇÕES DOS EUA 64 / 10
AS ELEIÇÕES ENTRE BUSH E AL GORE EM 2000
• Na cédula, a pessoa devia
furar o local do candidato
desejado
• Se você fosse votar em Al
Gore, onde iria furar?
ERRO DO DESIGN

65. Qual número você marcaria para votar no Al Gore?

66. ERROS DE DESIGN > ELEIÇÕES DOS EUA 66
AS ELEIÇÕES ENTRE BUSH E AL GORE EM 2000
• Estima-se que 4 mil pessoas dobraram
a cédula ao meio para votar em Al Gore,
sem nem olhar bem a tabela
• Mais de 19 mil eleitores viram que
votaram errado e então votaram
também no Al Gore (então, foram todos
anulados)
• Tudo ficou tão enrolado que a Suprema Corte Americana
notificou a violação da 4ª emenda dos Estados Unidos e
declarou George W. Bush como vencedor
CONSEQUÊNCIAS DO
ERRO DE DESIGN
/103

67. OUTROS ERROS

68. ERROS DE DESIGN 68 / 10

69. ERROS DE DESIGN 69 / 10

70. ERROS DE DESIGN 70 / 10

71. ERROS DE DESIGN 71 / 10
PgUp?
Cadê o 9?

72. ERROS DE DESIGN 72 / 10

73. ERROS DE DESIGN 73 / 10

74. ERROS DE DESIGN 74 / 10

75. ERROS DE DESIGN 75 / 10

76. DESIGN ATÉ QUE É
IMPORTANTE, NÃO?

77. TIPOS
DE DESIGNERS

78. TIPOS DE DESIGNERS 78
• Arte Visual, Desenho, Tipografia,
Ilustração, Diagramação
• Jobs: Identidade Visual,
papelaria, impressos, peças
publicitárias, ilustração
• Onde: Agências de publicidade,
Editoras, Jornais, Gráficas
DESIGNER
GRÁFICO
/103

79. TIPOS DE DESIGNERS
DESIGNER
DE PRODUTO
79
• Ergonomia, Usabilidade,
Materiais e estruturas, estética
do produto, sustentabilidade,
processos de fabricação
• Jobs: Projeto de produtos,
Melhoria de produtos
• Onde: Escritórios de design,
Indústrias, Fábricas
/103

80. TIPOS DE DESIGNERS
DESIGNER
DE INTERAÇÃO (IXD)
80
• Interação humano-computador,
prototipação, usabilidade, webdesign,
interface de softwares, Flash (sqn)
• Jobs: Interface de sites, de aplicativos,
de softwares, interfaces para games,
melhorias e projetos de interação
• Onde: Empresas de tecnologia,
escritórios de design
Nota: nem sempre IxD Designer tem relação com tecnologia
digital. No carro há peças que envolvem design de interação.
/103

81. TIPOS DE DESIGNERS
DESIGNER DE
EXPERIÊNCIA DO
USUÁRIO (UX)
81
• Pesquisa de usuário, prototipação,
teste de usabilidade, entrevista
com usuários
• Jobs: Projeto de produtos (sites,
apps, softwares), melhoria da
experiência do usuário
• Onde: Empresas de tecnologia,
escritórios de design
/103

82. OUTROS DESIGN DE
VEÍCULOS, DE MODA, DE
INTERIORES, EDITORIAL, DE
EMBALAGENS, DE GAMES ETC.

83. BONS
DESIGNS

84. BONS DESIGNS 84
É fácil beber água no copo redondo.
/103

85. BONS DESIGNS 85
Carro com câmbio automático não requer qualquer esforço físico ou mental.
/103

86. BONS DESIGNS 86
O design da calculadora é tão bom que se manteve até hoje.
Figura 1: Primeira calculadora eletrônica (Casio, 1965) com função de memória.
/103

87. BONS DESIGNS 87
Não é só beleza, é usabilidade e solução. Antes, ouvíamos música com rádio e Discman.
/103

88. BONS DESIGNS 88
Sem gabinete, sem cabos. Prático e pronto para o uso.
/103

89. BONS DESIGNS 89
Antes, os usuários não usavam mouse e precisavam digitar códigos (DOS) para acessar os softwares.
/103

90. BONS DESIGNS 90
Simples e direto ao que interessa.
/103

91. FORMAÇÃO
DO DESIGNER

92. FORMAÇÃO DO DESIGNER
GRADUAÇÃO E PÓS
92
• Apenas da evolução e novas demandas do Design, no
Brasil há poucas linhas de graduação
• Na grande maioria, resume-se a: Design Gráfico, Design
de Produto e Design de Moda
• Mas existem boas Pós-graduações (lato sensu e stricto
sensu): UX Design, Design de Interação, Design Digital,
Design Instrucional, Design de Interiores, Design 3D, Mídia
Digital, Ergonomia
/103

93. PROCESSO
DO DESIGN

94. PROCESSO DO DESIGN
PROCESSO DO RIAN
94
• Cada designer adapta o processo ao projeto e sua maneira
de trabalhar
• O processo apresentado aqui é com base no meu (Rian
Dutra) processo, geralmente em projetos que envolvem
UX e IxD Design
/103

95. PROCESSO DO DESIGN
1. DEFINIÇÃO DA
ESTRATÉGIA
95
• Entrevista com stakeholders
• Análise das tarefas
• Definição dos objetivos
/103

96. PROCESSO DO DESIGN
2. IDEAÇÃO
96
• Brainstorming
• Pesquisa de Usuário
• Jornada do Usuário
• Fluxo do Usuário
/103

97. PROCESSO DO DESIGN
3. DESIGN DE
INTERFACE
97
• Wireframes
• Design de Interface de Usuário
• Mockups
/103

98. PROCESSO DO DESIGN
4. VALIDAÇÃO
98
• Prototipação
• Teste de usabilidade
/103

99. PROCESSO DO DESIGN
5. PRODUÇÃO
99
• Desenvolvimento (do site, app)
• Feedback
• Melhorias
/103

100. MÃO NA MASSA
NO DESIGN

101. MÃO NA MASSA NO DESIGN
DESIGN DE UM APP
101
• Briefing: Criar o Design (inicial) do App Remedim. O App
notifica o usuário com lembretes para tomar seus
remédios diários ou semanais
• Público-alvo: Pessoas acima de 65 anos de idade
• Funcionalidades:
1. Adicionar/Remover remédios e datas/horários
2. Busca (textual) por remédios
3. Listar remédios
/103

102. MÃO NA MASSA NO DESIGN
ENTREGÁVEIS
102
1. USER FLOW 2. WIREFRAMES
/103

103. www.rian.design www.designr.com.br
eu@riandutra.com