BEM VINDOS!
A importância do

Design (UI)
e da

Usabilidade
no desenvolvimento.
Sobre
você está aqui!

Mercado

UI e UX

Dica
s
Sobre o Ivan
/ IVANPAULETTI

@IVANHTP

Ivan Pauletti
24 anos
Desenvolvedor Front End e
Arquiteto de Software

IVANPAULETTI...
Por onde passou?

Claretiano

Agência Brandish Ad

Totvs Interior Paulista

B2Blue.com
Por onde passou?

Danone Bonafont
Bacardi
Whisky Grant’s

Embratur

Palmirinha

Netshoes
Por onde passou?

Décima
Arte
O mercado
você está aqui!

Mercado

UI e UX

Dica
s
De onde veio isso?

Apple

Google

Mac Os X
iOS

Android
Google Apps

Microsoft
Zune
XBox
Windows
Windows
Phone
De onde veio isso?
Apple

Jony Ive
Mac Power
1995
De onde veio isso?
Apple

Jony Ive
iMac G3
1996
De onde veio isso?
Apple

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

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

Jony Ive
Sony Discman
De onde veio isso?
Apple

Jony Ive
Apple iPod Classic
De onde veio isso?

Apple

Google

Mac Os X
iOS

Android
Google Apps

Microsoft
Zune
XBox
Windows
Windows
Phone
De onde veio isso?
Google

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

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

Matias Duarte

Google Maps
2007
De onde veio isso?
Google

Matias Duarte
Google Maps
2013
De onde veio isso?

Apple

Google

Mac Os X
iOS

Android
Google Apps

Microsoft
Zune
XBox
Windows
Windows
Phone
De onde veio isso?
Microsoft Re-desenha a caixa do iPod
De onde veio isso?
Microsoft

Bill Flora
Microsoft Zune
2007
De onde veio isso?
Microsoft

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

Bill Flora

Xbox 360 Dashboard
2008
De onde veio isso?
Microsoft

Bill Flora
Nokia Lumia
2011
De onde veio isso?
Microsoft

Bill Flora

Windows 8
2012
O que eles têm em comum?

Jony Ive

Matias Duarte

Bill Flora

Apple

Google

Microsoft
O que eles têm em comum?

ELES MUDARAM O JOGO
CXO
Chief Experience Officer
O que eles têm em comum?
Valor de mercado (USD)

Apple

Microsoft

Google
Fonte: WolframAlpha
O que eles têm em comum?
qualidade

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

SUCESSO
usabilidade
PRODUTO
interface (UI)
UI & UX
você está aqui!

Mercado

UI e UX

Dica
s
O que é UI e UX?
Visual Muda
Funcionalidades 
não
Carro
O que é UI e UX?
UI - Interface
Visual Muda

Dita tendência mas
não é regra.

UX Funcionalidades não

Após criados, se
man...
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...
O que é UI e UX?
Windows
Temas

Menu Iniciar
O que é UI e UX?
Windows
Temas

Menu Iniciar
O que é UI e UX?
Windows
Temas

Menu Iniciar
User Interface
Bonito

Simples
Ajax

Intuitivo

FLAT
Minimalista

Interativo

Clean
Animado
User Interface

Como começou?
User Interface

Como começou?

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

Já aprendemos. E agora?

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

FLAT
User Interface
SKEUOMORPHISM

FLAT
User Interface
SKEUOMORPHISM

FLAT

Botão

Botão

January 23

2008

February 24

2009

March 25

2010

18

April 26

2011
...
User Interface

FLAT É MAIS BONITO. 
VOU USAR SEMPRE!
User Interface

• Tipo de dispositivo
• Público alvo
• Escopo do projeto
• Bom senso
• Tempo de criação
User Interface / Flat / Cores
Cores claras e tons pastéis

http://flatuicolors.com/
User Interface / Flat / Cores
Kuler
Apple

Facebook

Google
http://kuler.adobe.com
User Interface
Ícones

• Monocromáticos
• Objetivos
• Leves
• Sem chamar a atenção
User Interface / Flat / Cores

http://
graphicburger.com/wpcontent/uploads/
2013/06/Flat-DesignUI-ComponentsFull.png
User Interface / Flat / Fontes
Fontes serifadas (serif)

An

exemplos:

Times New Roman
Garamond
Courrier New
User Interface / Flat / Fontes
Fontes sem serifa (sans-serif)

An

exemplos:

Helvetica
Ubuntu
Lato
Futura
User Interface / Flat / Fontes
SEM SERIFA

Helvetica
Ubuntu
Lato
Futura
Proxima

SERIFADA

Rockwell
Museo

http://kuler.ad...
User Interface

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

http://code42.com
User Interface

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

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

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

Último ponto!

OBJETIVIDADE
User Interface

O QUE MINHA
EMPRESA / PRODUTO
FAZ?
User Interface

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

http://code42.com
User Interface

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

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

http://www.sketchin.ch/en/
User Experience

USER EXPERIENCE
User Experience

USER EXPERIENCE

“

a person's perceptions and
responses that result from the
use or anticipated use of a...
User Experience

USER EXPERIENCE

“

percepções e respostas
sensíveis que vêm da
utilização prevista de um
produto, serviç...
User Experience

Como aprender?

FEEDBACK
User Experience
Heatmap + analytics
User Experience
Protótipo (!!!) + Wireframes
User Experience
Protótipo (!!!) + Wireframes
User Experience
Preocupe - se com o dispositivo
User Experience
Acessibilidade e responsividade

UIWindow
768 x 1024
User Experience

Como aplicar?

Paradoxo dos pais

DESIGNERS
User Experience

Como começar?
User Experience

OK. Menos é mais...

porém....
User Experience

Eu consigo acessar
TODAS as funções da TV
com essas teclas?
User Experience
User Experience
User Experience
User Experience
Como começar

mobile fist
User Experience
User Experience
User Experience
User Experience

De novo...

wire
frames
User Experience

A pergunta não é...

Como?
User Experience

Mas sim...

Por que?
Dicas
você está aqui!

Mercado

UI e UX

Dica
s
Estatísticas

97 
%

dos sites falham na
execução da UX
!
Estatísticas

68 
%

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

50 
%

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

5

USUÁRIOS TESTANDO



são suficientes para
encontrar 85% dos erros
de usabilidade.
!
Ferramentas
Prototipação e wireframe

Axure

Omnigraffle

windows e mac

mac e ios
Ferramentas
Stencils
Android Design Stencils
A shimmering global phenomenon
Surfing invisible currents of information
Desig...
Ferramentas
Feedback

Analytics

Heatmap

web

mac e ios
É isso aí!

Mercado

UI e UX

Dica
s
Baixem ae!!!
https://www.slideshare.net/ivan_htp
OBRIGADO!!
@IVANHTP

IVANPAULETTI@GMAIL.COM

/ IVANPAULETTI

Adi
cion
a aí
!
Palestra ux e ui
Próximos SlideShares
Carregando em…5
×

Palestra ux e ui

769 visualizações

Publicada em

1 comentário
4 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
769
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
16
Comentários
1
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Palestra ux e ui

  1. 1. BEM VINDOS!
  2. 2. A importância do Design (UI) e da Usabilidade no desenvolvimento.
  3. 3. Sobre você está aqui! Mercado UI e UX Dica s
  4. 4. Sobre o Ivan / IVANPAULETTI @IVANHTP Ivan Pauletti 24 anos Desenvolvedor Front End e Arquiteto de Software IVANPAULETTI@GMAIL.COM
  5. 5. Por onde passou? Claretiano Agência Brandish Ad Totvs Interior Paulista B2Blue.com
  6. 6. Por onde passou? Danone Bonafont Bacardi Whisky Grant’s Embratur Palmirinha Netshoes
  7. 7. Por onde passou? Décima Arte
  8. 8. O mercado você está aqui! Mercado UI e UX Dica s
  9. 9. De onde veio isso? Apple Google Mac Os X iOS Android Google Apps Microsoft Zune XBox Windows Windows Phone
  10. 10. De onde veio isso? Apple Jony Ive Mac Power 1995
  11. 11. De onde veio isso? Apple Jony Ive iMac G3 1996
  12. 12. De onde veio isso? Apple Jony Ive Mac OS 9.2 1999
  13. 13. De onde veio isso? Apple Jony Ive Mac OS X 2000
  14. 14. De onde veio isso? Apple Jony Ive Sony Discman
  15. 15. De onde veio isso? Apple Jony Ive Apple iPod Classic
  16. 16. De onde veio isso? Apple Google Mac Os X iOS Android Google Apps Microsoft Zune XBox Windows Windows Phone
  17. 17. De onde veio isso? Google Matias Duarte T-Mobile Android G1 Android 1.0
  18. 18. De onde veio isso? Google Matias Duarte Nexus 4 Android 4.3
  19. 19. De onde veio isso? Google Matias Duarte Google Maps 2007
  20. 20. De onde veio isso? Google Matias Duarte Google Maps 2013
  21. 21. De onde veio isso? Apple Google Mac Os X iOS Android Google Apps Microsoft Zune XBox Windows Windows Phone
  22. 22. De onde veio isso? Microsoft Re-desenha a caixa do iPod
  23. 23. De onde veio isso? Microsoft Bill Flora Microsoft Zune 2007
  24. 24. De onde veio isso? Microsoft Bill Flora Microsoft Zune HD 2011
  25. 25. De onde veio isso? Microsoft Bill Flora Xbox 360 Dashboard 2008
  26. 26. De onde veio isso? Microsoft Bill Flora Nokia Lumia 2011
  27. 27. De onde veio isso? Microsoft Bill Flora Windows 8 2012
  28. 28. O que eles têm em comum? Jony Ive Matias Duarte Bill Flora Apple Google Microsoft
  29. 29. O que eles têm em comum? ELES MUDARAM O JOGO CXO Chief Experience Officer
  30. 30. O que eles têm em comum? Valor de mercado (USD) Apple Microsoft Google Fonte: WolframAlpha
  31. 31. O que eles têm em comum? qualidade SUCESSO facilidade de PRODUTO beleza
  32. 32. O que eles têm em comum? qualidade SUCESSO usabilidade PRODUTO interface (UI)
  33. 33. UI & UX você está aqui! Mercado UI e UX Dica s
  34. 34. O que é UI e UX? Visual Muda Funcionalidades não Carro
  35. 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. 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. 37. O que é UI e UX? Windows Temas Menu Iniciar
  38. 38. O que é UI e UX? Windows Temas Menu Iniciar
  39. 39. O que é UI e UX? Windows Temas Menu Iniciar
  40. 40. User Interface Bonito Simples Ajax Intuitivo FLAT Minimalista Interativo Clean Animado
  41. 41. User Interface Como começou?
  42. 42. User Interface Como começou? SKEUMORFISMO!
  43. 43. User Interface SKEUMORFISMO! Similaridade com objetos físicos.
  44. 44. User Interface Já aprendemos. E agora? FLAT DESIGN!
  45. 45. User Interface FLAT DESIGN!Objetividade, clareza e simplicidade.
  46. 46. User Interface SKEUOMORPHISM FLAT
  47. 47. User Interface SKEUOMORPHISM FLAT
  48. 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. 49. User Interface FLAT É MAIS BONITO. VOU USAR SEMPRE!
  50. 50. User Interface • Tipo de dispositivo • Público alvo • Escopo do projeto • Bom senso • Tempo de criação
  51. 51. User Interface / Flat / Cores Cores claras e tons pastéis http://flatuicolors.com/
  52. 52. User Interface / Flat / Cores Kuler Apple Facebook Google http://kuler.adobe.com
  53. 53. User Interface Ícones • Monocromáticos • Objetivos • Leves • Sem chamar a atenção
  54. 54. User Interface / Flat / Cores http:// graphicburger.com/wpcontent/uploads/ 2013/06/Flat-DesignUI-ComponentsFull.png
  55. 55. User Interface / Flat / Fontes Fontes serifadas (serif) An exemplos: Times New Roman Garamond Courrier New
  56. 56. User Interface / Flat / Fontes Fontes sem serifa (sans-serif) An exemplos: Helvetica Ubuntu Lato Futura
  57. 57. User Interface / Flat / Fontes SEM SERIFA Helvetica Ubuntu Lato Futura Proxima SERIFADA Rockwell Museo http://kuler.adobe.com
  58. 58. User Interface http://www.bienvillecapital.com/
  59. 59. User Interface http://code42.com
  60. 60. User Interface http://designerfund.com/bridge/
  61. 61. User Interface http://www.frankdigital.com.au/portfolio/
  62. 62. User Interface http://www.sketchin.ch/en/
  63. 63. User Interface Último ponto! OBJETIVIDADE
  64. 64. User Interface O QUE MINHA EMPRESA / PRODUTO FAZ?
  65. 65. User Interface http://www.bienvillecapital.com/
  66. 66. User Interface http://code42.com
  67. 67. User Interface http://designerfund.com/bridge/
  68. 68. User Interface http://www.frankdigital.com.au/portfolio/
  69. 69. User Interface http://www.sketchin.ch/en/
  70. 70. User Experience USER EXPERIENCE
  71. 71. 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)
  72. 72. 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)
  73. 73. User Experience Como aprender? FEEDBACK
  74. 74. User Experience Heatmap + analytics
  75. 75. User Experience Protótipo (!!!) + Wireframes
  76. 76. User Experience Protótipo (!!!) + Wireframes
  77. 77. User Experience Preocupe - se com o dispositivo
  78. 78. User Experience Acessibilidade e responsividade UIWindow 768 x 1024
  79. 79. User Experience Como aplicar? Paradoxo dos pais DESIGNERS
  80. 80. User Experience Como começar?
  81. 81. User Experience OK. Menos é mais... porém....
  82. 82. User Experience Eu consigo acessar TODAS as funções da TV com essas teclas?
  83. 83. User Experience
  84. 84. User Experience
  85. 85. User Experience
  86. 86. User Experience Como começar mobile fist
  87. 87. User Experience
  88. 88. User Experience
  89. 89. User Experience
  90. 90. User Experience De novo... wire frames
  91. 91. User Experience A pergunta não é... Como?
  92. 92. User Experience Mas sim... Por que?
  93. 93. Dicas você está aqui! Mercado UI e UX Dica s
  94. 94. Estatísticas 97 % dos sites falham na execução da UX !
  95. 95. Estatísticas 68 % dos usuários desistem ao sentirem que o site não foi feito pra eles. !
  96. 96. Estatísticas 50 % do tempo de desenvolvimento é gasto resolvendo problemas. !
  97. 97. Estatísticas 5 USUÁRIOS TESTANDO são suficientes para encontrar 85% dos erros de usabilidade. !
  98. 98. Ferramentas Prototipação e wireframe Axure Omnigraffle windows e mac mac e ios
  99. 99. 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
  100. 100. Ferramentas Feedback Analytics Heatmap web mac e ios
  101. 101. É isso aí! Mercado UI e UX Dica s
  102. 102. Baixem ae!!! https://www.slideshare.net/ivan_htp
  103. 103. OBRIGADO!! @IVANHTP IVANPAULETTI@GMAIL.COM / IVANPAULETTI Adi cion a aí !

×