SlideShare uma empresa Scribd logo
UX - UI DESIGN
MÉTODOS
DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM
UX (USER EXPERIENCE)	
  
DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
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 |
UI DESIGN / MÉTODOS	
  
SKETCH WIREFRAME PROTOTIPAGEM LIBRARY PATTERN
	
  
DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
SKETCH
DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
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 |
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 |
WIREFRAME
DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
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 |
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 |
PROTOTIPAGEM
DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
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 |
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 |
LIBRARY PATTERN
DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
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 |
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 |
DIEGO MARTIM MORAES | UX/UI DESIGN SEUS ENTREGÁVEIS E MÉTODOSDIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
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/
DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM
FIM…

Mais conteúdo relacionado

Mais procurados

Identificando Personas
Identificando PersonasIdentificando Personas
Identificando Personas
Daniel Gizo
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Ros Galabo, PhD
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
Renato Melo
 
Aula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioAula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no Usuário
Erico Fileno
 
UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
Daniel Coscarelli
 
Design Thinking e Ferramentas de Inovação
Design Thinking e Ferramentas de InovaçãoDesign Thinking e Ferramentas de Inovação
Design Thinking e Ferramentas de Inovação
Maristela Meireles
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
Marconi Pacheco
 
Mapeamento de jornadas no design de experiências
Mapeamento de jornadas no design de experiênciasMapeamento de jornadas no design de experiências
Mapeamento de jornadas no design de experiências
UTFPR
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
Victor Rubens
 
Apresentação sobre UX
Apresentação sobre UXApresentação sobre UX
Apresentação sobre UX
André Leoni
 
Um quase papo sobre UX Writing
Um quase papo sobre UX WritingUm quase papo sobre UX Writing
Um quase papo sobre UX Writing
Hélio Eduardo Lopes
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
André Constantino da Silva
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
Wellington Oliveira
 
Design thinking
Design thinkingDesign thinking
Design thinking
Alessandra Rosa
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
Suzi Sarmento
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
Marconi Pacheco
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
Robson Santos
 
Design de Serviço, Inovação e UX
Design de Serviço, Inovação e UXDesign de Serviço, Inovação e UX
Design de Serviço, Inovação e UX
Heller de Paula
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
Cristiane Mendes
 
Heurísticas de Jakob Nielsen
Heurísticas de Jakob NielsenHeurísticas de Jakob Nielsen
Heurísticas de Jakob Nielsen
Graciane Xavier
 

Mais procurados (20)

Identificando Personas
Identificando PersonasIdentificando Personas
Identificando Personas
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
Aula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no UsuárioAula 1 - Minicurso sobre Design Centrado no Usuário
Aula 1 - Minicurso sobre Design Centrado no Usuário
 
UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
 
Design Thinking e Ferramentas de Inovação
Design Thinking e Ferramentas de InovaçãoDesign Thinking e Ferramentas de Inovação
Design Thinking e Ferramentas de Inovação
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
 
Mapeamento de jornadas no design de experiências
Mapeamento de jornadas no design de experiênciasMapeamento de jornadas no design de experiências
Mapeamento de jornadas no design de experiências
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Apresentação sobre UX
Apresentação sobre UXApresentação sobre UX
Apresentação sobre UX
 
Um quase papo sobre UX Writing
Um quase papo sobre UX WritingUm quase papo sobre UX Writing
Um quase papo sobre UX Writing
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Design thinking
Design thinkingDesign thinking
Design thinking
 
Workshop • UX design •
Workshop • UX design •  Workshop • UX design •
Workshop • UX design •
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
 
Design de Serviço, Inovação e UX
Design de Serviço, Inovação e UXDesign de Serviço, Inovação e UX
Design de Serviço, Inovação e UX
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Heurísticas de Jakob Nielsen
Heurísticas de Jakob NielsenHeurísticas de Jakob Nielsen
Heurísticas de Jakob Nielsen
 

Destaque

Startups + UX = ♥
Startups + UX = ♥Startups + UX = ♥
Startups + UX = ♥
Neue Labs
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
Gustavo Gobbi
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
Mário Barros
 
Planos de ensino Design Digital 2012 UNIARA
Planos de ensino Design Digital 2012 UNIARAPlanos de ensino Design Digital 2012 UNIARA
Planos de ensino Design Digital 2012 UNIARA
DESIGN DIGITAL UNIARA 2012
 
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
Paula Azevedo Macedo
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UX
Edu Agni
 
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
EDIT. - Disruptive Digital Education
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
Priscilla Albuquerque
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
Fabricio Teixeira
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
Richard Jesus
 
Presentacion fotografia digital
Presentacion fotografia digitalPresentacion fotografia digital
Presentacion fotografia digital
adabellemedina05
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
Leandro Alves
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
Henrique Gogó
 
WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
Leandro Alves
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
Gustavo Gobbi
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
Ana Paula Batista
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
Leandro Alves
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
Leandro Alves
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Anna Cruz
 

Destaque (20)

Startups + UX = ♥
Startups + UX = ♥Startups + UX = ♥
Startups + UX = ♥
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
 
Planos de ensino Design Digital 2012 UNIARA
Planos de ensino Design Digital 2012 UNIARAPlanos de ensino Design Digital 2012 UNIARA
Planos de ensino Design Digital 2012 UNIARA
 
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UX
 
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
UX Design: desenvolver experiências positivas - #8 Industry Sessions by EDIT....
 
UX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negóciosUX como estratégia para conquistar clientes e impactar negócios
UX como estratégia para conquistar clientes e impactar negócios
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
 
Presentacion fotografia digital
Presentacion fotografia digitalPresentacion fotografia digital
Presentacion fotografia digital
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
 

Semelhante a UX - UI DESIGN / MÉTODOS

Prototipagem em Papel - Oficina
Prototipagem em Papel - OficinaPrototipagem em Papel - Oficina
Prototipagem em Papel - Oficina
Ltia Unesp
 
UX Design
UX DesignUX Design
UX Design
Vitor Garcia
 
User experience
User experienceUser experience
User experience
Rafael Souza
 
Ux Presentation
Ux PresentationUx Presentation
Ux Presentation
EstúdioBerinjela
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
Daniel Lugondi
 
Trabaho design de interação
Trabaho design de interaçãoTrabaho design de interação
Trabaho design de interação
Silvio Sales do Nascimento Júnior
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
Lógica Digital
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
andreluizlc
 
Palestra UX Etec - 22_04
Palestra UX Etec - 22_04Palestra UX Etec - 22_04
Palestra UX Etec - 22_04
danilopinheirosan
 
Design De Interfaces
Design De InterfacesDesign De Interfaces
Design De Interfaces
Bruno Brant
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
Horácio Soares
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
Marconi Pacheco
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AI
klaibert
 
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
Renato Melo
 
Design: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempoDesign: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempo
Comunidade NetPonto
 
Pesquisas em usabilidade de interfaces e interação - 2 bim
Pesquisas em usabilidade de interfaces e interação -  2 bimPesquisas em usabilidade de interfaces e interação -  2 bim
Pesquisas em usabilidade de interfaces e interação - 2 bim
Reuel Lopes
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
wudrs
 
ux em aplicativos
ux em aplicativosux em aplicativos
ux em aplicativos
Thales Rodrigues
 
UX para Startups
UX para StartupsUX para Startups
UX para Startups
Tuia
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
iMasters
 

Semelhante a UX - UI DESIGN / MÉTODOS (20)

Prototipagem em Papel - Oficina
Prototipagem em Papel - OficinaPrototipagem em Papel - Oficina
Prototipagem em Papel - Oficina
 
UX Design
UX DesignUX Design
UX Design
 
User experience
User experienceUser experience
User experience
 
Ux Presentation
Ux PresentationUx Presentation
Ux Presentation
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
 
Trabaho design de interação
Trabaho design de interaçãoTrabaho design de interação
Trabaho design de interação
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
 
Palestra UX Etec - 22_04
Palestra UX Etec - 22_04Palestra UX Etec - 22_04
Palestra UX Etec - 22_04
 
Design De Interfaces
Design De InterfacesDesign De Interfaces
Design De Interfaces
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AI
 
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
 
Design: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempoDesign: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempo
 
Pesquisas em usabilidade de interfaces e interação - 2 bim
Pesquisas em usabilidade de interfaces e interação -  2 bimPesquisas em usabilidade de interfaces e interação -  2 bim
Pesquisas em usabilidade de interfaces e interação - 2 bim
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
ux em aplicativos
ux em aplicativosux em aplicativos
ux em aplicativos
 
UX para Startups
UX para StartupsUX para Startups
UX para Startups
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
 

UX - UI DESIGN / MÉTODOS

  • 1. UX - UI DESIGN MÉTODOS DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM
  • 2. UX (USER EXPERIENCE)   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  • 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. UI DESIGN / MÉTODOS   SKETCH WIREFRAME PROTOTIPAGEM LIBRARY PATTERN   DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  • 5. SKETCH DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  • 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. 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.
  • 9.
  • 10. WIREFRAME DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  • 11. 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 |
  • 12. 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 |
  • 13.
  • 14.
  • 15. PROTOTIPAGEM DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS |
  • 16. 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 |
  • 17. 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 |
  • 18.
  • 19.
  • 20. LIBRARY PATTERN DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  • 21. 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 |
  • 22. 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 |
  • 23.
  • 24.
  • 25. DIEGO MARTIM MORAES | UX/UI DESIGN SEUS ENTREGÁVEIS E MÉTODOSDIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  • 26. DIEGO MARTIM MORAES | UX - UI DESIGN / MÉTODOS
  • 27. 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/
  • 28. DIEGO MARTIM MORAES SOBRE ABOUT.ME/DIEGOMORAES1988 CONTATO DIEGOMORAES1988@GMAIL.COM FIM…