Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX - UI DESIGN / MÉTODOS

2,280 views

Published on

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

Published in: Design

UX - UI DESIGN / MÉTODOS

  1. 1. UX - UI DESIGN MÉTODOS DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM
  2. 2. UX (USER EXPERIENCE)   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  3. 3. USER Os usuários pessoas reais que vão utilizar a interface.   INTERFACE Tudo aquilo que se torna usável e é capaz de desenvolver uma resposta sobre o uso. UI (USER INTERFACE)   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  4. 4. UI DESIGN / MÉTODOS   SKETCH WIREFRAME PROTOTIPAGEM LIBRARY PATTERN   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  5. 5. SKETCH DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  6. 6. SKETCH   Criado a patir do uso de papel e caneta ou lápis. Geralmente em folhas quadriculadas ou pontilhadas, o sketch é a forma mais rápida de se visualizar uma interface.   PARA QUE SERVEM? Forma prática de visualizar uma idéia/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 / MÉTODOS |
  7. 7. SKETCH   1.  Prático e fácil de criar 2.  Não precisa ser lindo 3.  Rabisque de forma iterativa 4.  Valide suas idéia de forma ágil e prática com os stakeholders 5.  Pense desde já em suas interações DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  8. 8. WIREFRAME DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  9. 9. WIREFRAME   Sua  própria  tradução  (armação  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? São  usados  parar  organizar  elementos  e  definer  a   hierarquia  das  informações,  validar  junto  ao  Gme  as   funcões  e  objeGvos  da  interface.   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  10. 10. WIREFRAME   1.  Usado para arquitetar as informações 2.  Deve ser simples e resumido 3.  Valide suas idéia de forma ágil e prática os stakeholders 4.  A reciclágem leva a evolução 5.  Ponte com geradores de conteúdo, engenheiros, desenvolvedores etc DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  11. 11. PROTOTIPAGEM DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  12. 12. PROTOTIPAGEM   ProtoGpagem  é  o  processo  de  transformar  uma  interface   em  clicável.  Os  sketchs,  wireframes  e  até  mesmo  o  GUI   (graphical  user  interface)  podem  ser  protoGpados     PARA QUE SERVEM? ProtóGpos  são  criados  de  forma  rápida  e  tem  a  função  de   validar  o  produto,  principalmente  suas  interações  antes  do   desenvolvimento  final.   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  13. 13. PROTOTIPAGEM   1.  Prototipos não são sistemas são apenas imagens interativas. 2.  Indentificar necessidades ainda não pensadas 3.  Simular o comportamento do produto final 4.  Estabelecer requisites 5.  Valide suas idéia de forma ágil e prática os stakeholders DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  14. 14. LIBRARY PATTERN DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  15. 15. LIBRARY PATTERN   Serve  como  facilitador  onde  são  disponibilizados   elementos  ou  referências.     PARA QUE SERVEM? Tem  como  finalidade  manter  a  consistência  do  trabalho  e   agilizar  processos.  Servem  também  como  referência  para   inspiração  que  ajuda  a  criaGvidade  fluir.   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  16. 16. LIBRARY PATTERN   1. Grandes  empresar  tem  seu  paPer  (Apple)   2. Facilitam  a  vida  do  usuário  criando  metaforas   3. Agilizam  o  trabalho  do  Gme   4. Fonte  de  consulta   5. Você  pode  construiar  a  sua  própria  paPern   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  17. 17. DIEGO MARTIM MORAES | UX/UI DESIGN SEUS ENTREGÁVEIS E MÉTODOSDIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  18. 18. DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  19. 19. SKETCH http://sneakpeekit.com/ WIREFRAME http://www.axure.com/ http://www.mockflow.com/ http://uxpin.com/ DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS | REFERÊNCIAS 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. 20. DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM FIM…

×