Palestra ux e ui

Download Palestra ux e ui

Post on 21-Jun-2015

366 views

Category:

Documents

9 download

Embed Size (px)

TRANSCRIPT

  • 1. BEM VINDOS!

2. A importncia doDesign (UI) e daUsabilidade no desenvolvimento. 3. Sobre voc est aqui!MercadoUI e UXDica s 4. Sobre o Ivan / IVANPAULETTI@IVANHTPIvan Pauletti 24 anos Desenvolvedor Front End e Arquiteto de SoftwareIVANPAULETTI@GMAIL.COM 5. Por onde passou?ClaretianoAgncia Brandish AdTotvs Interior PaulistaB2Blue.com 6. Por onde passou?Danone Bonafont Bacardi Whisky GrantsEmbraturPalmirinhaNetshoes 7. Por onde passou?Dcima Arte 8. O mercado voc est aqui!MercadoUI e UXDica s 9. De onde veio isso?AppleGoogleMac Os X iOSAndroid Google AppsMicrosoft Zune XBox Windows Windows Phone 10. De onde veio isso? AppleJony Ive Mac Power 1995 11. De onde veio isso? AppleJony Ive iMac G3 1996 12. De onde veio isso? AppleJony Ive Mac OS 9.2 1999 13. De onde veio isso? AppleJony Ive Mac OS X 2000 14. De onde veio isso? AppleJony Ive Sony Discman 15. De onde veio isso? AppleJony Ive Apple iPod Classic 16. De onde veio isso?AppleGoogleMac Os X iOSAndroid Google AppsMicrosoft Zune XBox Windows Windows Phone 17. De onde veio isso? GoogleMatias Duarte T-Mobile Android G1 Android 1.0 18. De onde veio isso? GoogleMatias Duarte Nexus 4 Android 4.3 19. De onde veio isso? GoogleMatias DuarteGoogle Maps 2007 20. De onde veio isso? GoogleMatias Duarte Google Maps 2013 21. De onde veio isso?AppleGoogleMac Os X iOSAndroid Google AppsMicrosoft Zune XBox Windows Windows Phone 22. De onde veio isso? Microsoft Re-desenha a caixa do iPod 23. De onde veio isso? MicrosoftBill Flora Microsoft Zune 2007 24. De onde veio isso? MicrosoftBill Flora Microsoft Zune HD 2011 25. De onde veio isso? MicrosoftBill FloraXbox 360 Dashboard 2008 26. De onde veio isso? MicrosoftBill Flora Nokia Lumia 2011 27. De onde veio isso? MicrosoftBill FloraWindows 8 2012 28. O que eles tm em comum?Jony IveMatias DuarteBill FloraAppleGoogleMicrosoft 29. O que eles tm em comum?ELES MUDARAM O JOGO CXO Chief Experience Officer 30. O que eles tm em comum? Valor de mercado (USD)AppleMicrosoftGoogle Fonte: WolframAlpha 31. O que eles tm em comum? qualidadeSUCESSO facilidade de PRODUTO beleza 32. O que eles tm em comum? qualidadeSUCESSO usabilidade PRODUTO interface (UI) 33. UI & UX voc est aqui!MercadoUI e UXDica s 34. O que UI e UX? Visual Muda Funcionalidadesno Carro 35. O que UI e UX? UI - Interface Visual MudaDita tendncia mas no regra.UX Funcionalidades noAps criados, se mantm. 36. O que UI e UX? UI - Interface fsico ou Um boto para descer o vidro do carro. !Um volante esportivo. ! !Um cmbio automtico.UX Nem sempre tangvel mas sempre A facilidade de abrir os vidros sem esforo. !Suavidade de um carro nas curvas.!No precisar mudar marchas. 37. O que UI e UX? Windows TemasMenu Iniciar 38. O que UI e UX? Windows TemasMenu Iniciar 39. O que UI e UX? Windows TemasMenu Iniciar 40. User Interface BonitoSimples AjaxIntuitivoFLAT MinimalistaInterativoClean Animado 41. User InterfaceComo comeou? 42. User InterfaceComo comeou?SKEUMORFISMO! 43. User Interface SKEUMORFISMO! Similaridade com objetos fsicos. 44. User InterfaceJ aprendemos. E agora?FLAT DESIGN! 45. User Interface FLAT DESIGN!Objetividade, clareza e simplicidade. 46. User Interface SKEUOMORPHISMFLAT 47. User Interface SKEUOMORPHISMFLAT 48. User Interface SKEUOMORPHISMFLATBotoBotoJanuary 232008February 242009March 25201018April 262011SetembroMay 272012ON2013 49. User InterfaceFLAT MAIS BONITO.VOU USAR SEMPRE! 50. User Interface Tipo de dispositivo Pblico alvo Escopo do projeto Bom senso Tempo de criao 51. User Interface / Flat / Cores Cores claras e tons pastishttp://atuicolors.com/ 52. User Interface / Flat / Cores Kuler AppleFacebookGoogle http://kuler.adobe.com 53. User Interface cones Monocromticos Objetivos Leves Sem chamar a ateno 54. User Interface / Flat / Coreshttp:// graphicburger.com/wpcontent/uploads/ 2013/06/Flat-DesignUI-ComponentsFull.png 55. User Interface / Flat / Fontes Fontes serifadas (serif)Anexemplos:Times New Roman Garamond Courrier New 56. User Interface / Flat / Fontes Fontes sem serifa (sans-serif)Anexemplos:Helvetica Ubuntu Lato Futura 57. User Interface / Flat / Fontes SEM SERIFAHelvetica Ubuntu Lato Futura ProximaSERIFADARockwell Museohttp://kuler.adobe.com 58. User Interfacehttp://www.bienvillecapital.com/ 59. User Interfacehttp://code42.com 60. User Interfacehttp://designerfund.com/bridge/ 61. User Interfacehttp://www.frankdigital.com.au/portfolio/ 62. User Interfacehttp://www.sketchin.ch/en/ 63. User Interfaceltimo ponto!OBJETIVIDADE 64. User InterfaceO QUE MINHA EMPRESA / PRODUTO FAZ? 65. User Interfacehttp://www.bienvillecapital.com/ 66. User Interfacehttp://code42.com 67. User Interfacehttp://designerfund.com/bridge/ 68. User Interfacehttp://www.frankdigital.com.au/portfolio/ 69. User Interfacehttp://www.sketchin.ch/en/ 70. User ExperienceUSER EXPERIENCE 71. User ExperienceUSER EXPERIENCEa 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. User ExperienceUSER EXPERIENCEpercepes e respostas sensveis que vm da utilizao prevista de um produto, servio ou sistema . ISO 9241 - Human centered design processes for interativce systems (1999) 73. User ExperienceComo aprender?FEEDBACK 74. User Experience Heatmap + analytics 75. User Experience Prottipo (!!!) + Wireframes 76. User Experience Prottipo (!!!) + Wireframes 77. User Experience Preocupe - se com o dispositivo 78. User Experience Acessibilidade e responsividadeUIWindow 768 x 1024 79. User ExperienceComo aplicar?Paradoxo dos paisDESIGNERS 80. User ExperienceComo comear? 81. User ExperienceOK. Menos mais...porm.... 82. User ExperienceEu consigo acessar TODAS as funes da TV com essas teclas? 83. User Experience 84. User Experience 85. User Experience 86. User Experience Como comearmobile fist 87. User Experience 88. User Experience 89. User Experience 90. User ExperienceDe novo...wire frames 91. User ExperienceA pergunta no ...Como? 92. User ExperienceMas sim...Por que? 93. Dicas voc est aqui!MercadoUI e UXDica s 94. Estatsticas97%dos sites falham na execuo da UX ! 95. Estatsticas68%dos usurios desistem ao sentirem que o site no foi feito pra eles. ! 96. Estatsticas50%do tempo de desenvolvimento gasto resolvendo problemas. ! 97. Estatsticas5USURIOS TESTANDOso suficientes para encontrar 85% dos erros de usabilidade. ! 98. Ferramentas Prototipao e wireframeAxureOmnigrafflewindows e macmac e ios 99. Ferramentas Stencils Android Design Stencils A shimmering global phenomenon Surng invisible currents of information Design the soul of an intelligent machineTYPOGRAPHYUngroup to resizeUngroup to resizeUngroup to resizeUngroup to resizeLANDSCAPE (40dp)Ungroup to resizeUngroup to resizeUngroup to resizeCONTEXTUAL ACTION BARRoboto, text size micro - 12spRoboto, text size small - 14sp TABSRoboto, text size medium - 18spRoboto, text size large - 22sp Standard AccentCOLORTAB ONE51,181,229170,102,204153,204,0255,187,51153,51,204102,153,0255,136,0204,0,0TAB THREETAB ONETAB TWOTAB THREE255,68,680,153,204TAB TWOTAB ONEUngroup to resizeUngroup to resizeACTION BARTABLET (56dp) Ungroup to resizeUse MenusUse MenusSparingly, and onlySparingly, and onlyFor low usageFor low usageCommandsCommandsTAB TWOTAB THREETAB ONETAB TWOTAB THREE 100. Ferramentas FeedbackAnalyticsHeatmapwebmac e ios 101. isso a!MercadoUI e UXDica s 102. Baixem ae!!! https://www.slideshare.net/ivan_htp 103. OBRIGADO!! @IVANHTPIVANPAULETTI@GMAIL.COM/ IVANPAULETTIAdi cion a a !