O documento fornece uma introdução sobre design de interface do usuário (UI) e experiência do usuário (UX). Resume os principais pontos sobre a importância de UI/UX, como começou, tendências atuais como o design plano, e dicas para começar a projetar interfaces e experiências centradas no usuário.

1. BEM VINDOS!

2. A importância do
Design (UI)
e da
Usabilidade
no desenvolvimento.

3. Sobre
você está aqui!
Mercado
UI e UX
Dica
s

4. Sobre o Ivan
/ IVANPAULETTI
@IVANHTP
Ivan Pauletti
24 anos
Desenvolvedor Front End e
Arquiteto de Software
IVANPAULETTI@GMAIL.COM

5. Por onde passou?
Claretiano
Agência Brandish Ad
Totvs Interior Paulista
B2Blue.com

6. Por onde passou?
Danone Bonafont
Bacardi
Whisky Grant’s
Embratur
Palmirinha
Netshoes

7. Por onde passou?
Décima
Arte

8. O mercado
você está aqui!
Mercado
UI e UX
Dica
s

9. De onde veio isso?
Apple
Google
Mac Os X
iOS
Android
Google Apps
Microsoft
Zune
XBox
Windows
Windows
Phone

10. De onde veio isso?
Apple
Jony Ive
Mac Power
1995

11. De onde veio isso?
Apple
Jony Ive
iMac G3
1996

12. De onde veio isso?
Apple
Jony Ive
Mac OS 9.2
1999

13. De onde veio isso?
Apple
Jony Ive
Mac OS X
2000

14. De onde veio isso?
Apple
Jony Ive
Sony Discman

15. De onde veio isso?
Apple
Jony Ive
Apple iPod Classic

16. De onde veio isso?
Apple
Google
Mac Os X
iOS
Android
Google Apps
Microsoft
Zune
XBox
Windows
Windows
Phone

17. De onde veio isso?
Google
Matias Duarte
T-Mobile Android G1
Android 1.0

18. De onde veio isso?
Google
Matias Duarte
Nexus 4
Android 4.3

19. De onde veio isso?
Google
Matias Duarte
Google Maps
2007

20. De onde veio isso?
Google
Matias Duarte
Google Maps
2013

21. De onde veio isso?
Apple
Google
Mac Os X
iOS
Android
Google Apps
Microsoft
Zune
XBox
Windows
Windows
Phone

22. De onde veio isso?
Microsoft Re-desenha a caixa do iPod

23. De onde veio isso?
Microsoft
Bill Flora
Microsoft Zune
2007

24. De onde veio isso?
Microsoft
Bill Flora
Microsoft Zune HD
2011

25. De onde veio isso?
Microsoft
Bill Flora
Xbox 360 Dashboard
2008

26. De onde veio isso?
Microsoft
Bill Flora
Nokia Lumia
2011

27. De onde veio isso?
Microsoft
Bill Flora
Windows 8
2012

28. O que eles têm em comum?
Jony Ive
Matias Duarte
Bill Flora
Apple
Google
Microsoft

29. O que eles têm em comum?
ELES MUDARAM O JOGO
CXO
Chief Experience Officer

30. O que eles têm em comum?
Valor de mercado (USD)
Apple
Microsoft
Google
Fonte: WolframAlpha

31. O que eles têm em comum?
qualidade
SUCESSO
facilidade de
PRODUTO
beleza

32. O que eles têm em comum?
qualidade
SUCESSO
usabilidade
PRODUTO
interface (UI)

33. UI & UX
você está aqui!
Mercado
UI e UX
Dica
s

34. O que é UI e UX?
Visual Muda
Funcionalidades
não
Carro

35. O que é UI e UX?
UI - Interface
Visual Muda
Dita tendência mas
não é regra.
UX Funcionalidades não
Após criados, se
mantêm.

36. O que é UI e UX?
UI - Interface
É físico ou
Um botão para descer
o vidro do carro.
!
Um volante esportivo.
!
!
Um câmbio
automático.
UX Nem sempre
tangível mas sempre
A facilidade de abrir os
vidros sem esforço.
!
Suavidade de um carro
nas curvas.
!
Não precisar mudar
marchas.

37. O que é UI e UX?
Windows
Temas
Menu Iniciar

38. O que é UI e UX?
Windows
Temas
Menu Iniciar

39. O que é UI e UX?
Windows
Temas
Menu Iniciar

40. User Interface
Bonito
Simples
Ajax
Intuitivo
FLAT
Minimalista
Interativo
Clean
Animado

41. User Interface
Como começou?

42. User Interface
Como começou?
SKEUMORFISMO!

43. User Interface
SKEUMORFISMO! Similaridade com objetos físicos.

44. User Interface
Já aprendemos. E agora?
FLAT DESIGN!

45. User Interface
FLAT DESIGN!Objetividade, clareza e simplicidade.

46. User Interface
SKEUOMORPHISM
FLAT

47. User Interface
SKEUOMORPHISM
FLAT

48. User Interface
SKEUOMORPHISM
FLAT
Botão
Botão
January 23
2008
February 24
2009
March 25
2010
18
April 26
2011
Setembro
May 27
2012
ON
2013

49. User Interface
FLAT É MAIS BONITO.
VOU USAR SEMPRE!

51. User Interface
• Tipo de dispositivo
• Público alvo
• Escopo do projeto
• Bom senso
• Tempo de criação

52. User Interface / Flat / Cores
Cores claras e tons pastéis
http://flatuicolors.com/

53. User Interface / Flat / Cores
Kuler
Apple
Facebook
Google
http://kuler.adobe.com

54. User Interface
Ícones
• Monocromáticos
• Objetivos
• Leves
• Sem chamar a atenção

55. User Interface / Flat / Cores
http://
graphicburger.com/wpcontent/uploads/
2013/06/Flat-DesignUI-ComponentsFull.png

56. User Interface / Flat / Fontes
Fontes serifadas (serif)
An
exemplos:
Times New Roman
Garamond
Courrier New

57. User Interface / Flat / Fontes
Fontes sem serifa (sans-serif)
An
exemplos:
Helvetica
Ubuntu
Lato
Futura

58. User Interface / Flat / Fontes
SEM SERIFA
Helvetica
Ubuntu
Lato
Futura
Proxima
SERIFADA
Rockwell
Museo
http://kuler.adobe.com

59. User Interface
http://www.bienvillecapital.com/

60. User Interface
http://code42.com

61. User Interface
http://designerfund.com/bridge/

62. User Interface
http://www.frankdigital.com.au/portfolio/

63. User Interface
http://www.sketchin.ch/en/

64. User Interface
Último ponto!
OBJETIVIDADE

65. User Interface
O QUE MINHA
EMPRESA / PRODUTO
FAZ?

66. User Interface
http://www.bienvillecapital.com/

67. User Interface
http://code42.com

68. User Interface
http://designerfund.com/bridge/

69. User Interface
http://www.frankdigital.com.au/portfolio/

70. User Interface
http://www.sketchin.ch/en/

71. User Experience
USER EXPERIENCE

72. User Experience
USER EXPERIENCE
“
a person's perceptions and
responses that result from the
use or anticipated use of a
product, system or service"
ISO 9241 - Human centered design
processes for interativce systems (1999)

73. User Experience
USER EXPERIENCE
“
percepções e respostas
sensíveis que vêm da
utilização prevista de um
produto, serviço ou
sistema .
ISO 9241 - Human centered design
processes for interativce systems (1999)

74. User Experience
Como aprender?
FEEDBACK

75. User Experience
Heatmap + analytics

76. User Experience
Protótipo (!!!) + Wireframes

77. User Experience
Protótipo (!!!) + Wireframes

78. User Experience
Preocupe - se com o dispositivo

79. User Experience
Acessibilidade e responsividade
UIWindow
768 x 1024

80. User Experience
Como aplicar?
Paradoxo dos pais
DESIGNERS

81. User Experience
Como começar?

82. User Experience
OK. Menos é mais...
porém....

83. User Experience
Eu consigo acessar
TODAS as funções da TV
com essas teclas?

84. User Experience

85. User Experience

86. User Experience

87. User Experience
Como começar
mobile fist

88. User Experience

89. User Experience

90. User Experience

91. User Experience
De novo...
wire
frames

92. User Experience
A pergunta não é...
Como?

93. User Experience
Mas sim...
Por que?

94. Dicas
você está aqui!
Mercado
UI e UX
Dica
s

95. Estatísticas
97
%
dos sites falham na
execução da UX
!

96. Estatísticas
68
%
dos usuários desistem ao
sentirem que o site não
foi feito pra eles.
!

97. Estatísticas
50
%
do tempo de
desenvolvimento é gasto
resolvendo problemas.
!

98. Estatísticas
5
USUÁRIOS TESTANDO
são suficientes para
encontrar 85% dos erros
de usabilidade.
!

99. Ferramentas
Prototipação e wireframe
Axure
Omnigraffle
windows e mac
mac e ios

100. Ferramentas
Stencils
Android Design Stencils
A shimmering global phenomenon
Surfing invisible currents of information
Design the soul of an intelligent machine
TYPOGRAPHY
Ungroup to resize
Ungroup to resize
Ungroup to resize
Ungroup to resize
LANDSCAPE (40dp)
Ungroup to resize
Ungroup to resize
Ungroup to resize
CONTEXTUAL
ACTION BAR
Roboto, text size micro - 12sp
Roboto, text size small - 14sp
TABS
Roboto, text size medium - 18sp
Roboto, text size large - 22sp
Standard Accent
COLOR
TAB ONE
51,181,229
170,102,204
153,204,0
255,187,51
153,51,204
102,153,0
255,136,0
204,0,0
TAB THREE
TAB ONE
TAB TWO
TAB THREE
255,68,68
0,153,204
TAB TWO
TAB ONE
Ungroup to resize
Ungroup to resize
ACTION BAR
TABLET (56dp)
Ungroup to resize
Use Menus
Use Menus
Sparingly, and only
Sparingly, and only
For low usage
For low usage
Commands
Commands
TAB TWO
TAB THREE
TAB ONE
TAB TWO
TAB THREE

101. Ferramentas
Feedback
Analytics
Heatmap
web
mac e ios

102. É isso aí!
Mercado
UI e UX
Dica
s

103. Baixem ae!!!
https://www.slideshare.net/ivan_htp

104. OBRIGADO!!
@IVANHTP
IVANPAULETTI@GMAIL.COM
/ IVANPAULETTI
Adi
cion
a aí
!