Palestra ux e ui

725 visualizações

Publicada em

1 comentário
4 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
725
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
14
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í !

×