UX - UI DESIGN / MTODOS

Download UX - UI DESIGN / MTODOS

Post on 18-Dec-2014

354 views

Category:

Design

5 download

DESCRIPTION

Depois de explicar dezenas de vezes o que UX, o que uma interface, o que UI,

TRANSCRIPT

  • 1. UX - UI DESIGN MTODOS DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM
  • 2. UX (USER EXPERIENCE) DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 3. USER Os usurios pessoas reais que vo utilizar a interface. INTERFACE Tudo aquilo que se torna usvel e capaz de desenvolver uma resposta sobre o uso. UI (USER INTERFACE) DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 4. UI DESIGN / MTODOS SKETCH WIREFRAME PROTOTIPAGEM LIBRARY PATTERN DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 5. SKETCH DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS
  • 6. SKETCH Criado a patir do uso de papel e caneta ou lpis. Geralmente em folhas quadriculadas ou pontilhadas, o sketch a forma mais rpida de se visualizar uma interface. PARA QUE SERVEM? Forma prtica de visualizar uma idia/conceito de uma interface ou produto. Boa forma do UI Designer validar a interface para os stakeholders receber feedbacks. DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 7. SKETCH 1. Prtico e fcil de criar 2. No precisa ser lindo 3. Rabisque de forma iterativa 4. Valide suas idia de forma gil e prtica com os stakeholders 5. Pense desde j em suas interaes DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 8. WIREFRAME DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS
  • 9. WIREFRAME Sua prpria traduo (armao de arame) j deixa bem transparente o que o wireframe. Geralmente criado sem cor e com elementos simples visando mostrar apenas o essencial da interface. PARA QUE SERVEM? So usados parar organizar elementos e dener a hierarquia das informaes, validar junto ao Gme as funces e objeGvos da interface. DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 10. WIREFRAME 1. Usado para arquitetar as informaes 2. Deve ser simples e resumido 3. Valide suas idia de forma gil e prtica os stakeholders 4. A reciclgem leva a evoluo 5. Ponte comgeradores de contedo, engenheiros, desenvolvedores etc DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 11. PROTOTIPAGEM DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 12. PROTOTIPAGEM ProtoGpagem o processo de transformar uma interface em clicvel. Os sketchs, wireframes e at mesmo o GUI (graphical user interface) podem ser protoGpados PARA QUE SERVEM? ProtGpos so criados de forma rpida e tem a funo de validar o produto, principalmente suas interaes antes do desenvolvimento nal. DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 13. PROTOTIPAGEM 1. Prototipos no so sistemas so apenas imagens interativas. 2. Indentificar necessidades ainda no pensadas 3. Simular o comportamento do produto final 4. Estabelecer requisites 5. Valide suas idia de forma gil e prtica os stakeholders DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 14. LIBRARY PATTERN DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS
  • 15. LIBRARY PATTERN Serve como facilitador onde so disponibilizados elementos ou referncias. PARA QUE SERVEM? Tem como nalidade manter a consistncia do trabalho e agilizar processos. Servem tambm como referncia para inspirao que ajuda a criaGvidade uir. DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 16. LIBRARY PATTERN 1. Grandes empresar tem seu paPer (Apple) 2. Facilitam a vida do usurio criando metaforas 3. Agilizam o trabalho do Gme 4. Fonte de consulta 5. Voc pode construiar a sua prpria paPern DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS |
  • 17. DIEGO MARTIM MORAES | UX/UI DESIGN SEUS ENTREGVEIS E MTODOSDIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS
  • 18. DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS
  • 19. SKETCH http://sneakpeekit.com/ WIREFRAME http://www.axure.com/ http://www.mockflow.com/ http://uxpin.com/ DIEGO MARTIM MORAES | UX - UI DESIGN / MTODOS | REFERNCIAS E FERRAMENTAS PROTOTIPAGEM http://www.invisionapp.com/ http://www.axure.com/ http://uxpin.com/ LIBRARY PATTER http://demo.patternlab.io/ http://dribbble.com/ http://pttrns.com/
  • 20. DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM FIM