SlideShare uma empresa Scribd logo
1 de 48
UX vs. UI
     O que é isso? O que isso come?
Tem que ser maior de idade pra consumir?
               Isso mata?
Quem é o baixinho,
gordinho de óculos?
Tá, mas o que ele já
 fez pra estar aqui?
Afinal, que diabos é
     essa UX?
Afinal, que diabos é essa UX?



User eXperience, traduzindo... Experiência do
Usuário!!!!

Ou seja, é o que a pessoa, usuário, sente e
interpreta ao usar uma interface. Seja ela um
site, um app, um sistema, um celular, um tablet,
um produto.
Afinal, que diabos é essa UX?




A importância disso: vamos pensar...
Afinal, que diabos é essa UX?




O UOL por exemplo?
Afinal, que diabos é essa UX?




E a Globo.com?
Afinal, que diabos é essa UX?




E a Fox.com?
Afinal, que diabos é essa UX?



Por que estudar isso?
Pra não frustar nossos usuários logo de cara.

Estude, leia, pesquise. Nem que seja o mínimo.
Afinal, que diabos é essa UX?



O que interpretar com UX?

É tanta coisa que não cabe aqui, mas vale
pesquisar sobre e aí analisar qual se encaixa
melhor no seu projeto.

Card sorting, storyboard, wireframe, personas, métricas de sucesso, road
map, benchmark, focus group, site map, fluxograma, protótipo navegável
etc...
Afinal, que diabos é essa UX?



Referências de blogs e autores sobre UX:

@blogdeai
@ixdsa
www.informationarchitects.jp/en
www.melinaalves.com

e muitos outros....
Legal, e a tal da UI?
 É parente da UX?
A UI é parente da UX?



User Interface, traduzindo... Interface do Usuário
(hein?)!!!!

Ou seja, é o que a pessoa, usuário, utiliza para
chegar a informação. Seja ela um site, um app,
um sistema, um celular, um tablet, um produto.
A UI é parente da UX?



User Interface, traduzindo... Interface do Usuário
(hein?)!!!!

Ou seja, é o que a pessoa, usuário, utiliza para
chegar a informação. Seja ela um site, um app,
um sistema, um celular, um tablet, um produto.
A UI é parente da UX?




É nesse momento que aplica-se o que foi
estudado, pesquisado e pensado sobre a
experiência do usuário, no papel e depois pra tela.
Ah, então elas são
      irmãs?
Não, elas não são irmãs. Elas
se completam como amantes.


A aplicação das duas disciplinas fortalece muito, na
parte conceitual, o designer.

Aplicar essas técnicas e seus conceitos, ajuda no
processo criativo e conceptivo do projeto.
Não, elas não são irmãs. Elas
se completam como amantes.


Algumas dicas pra facilitar a organização das
ideias e agilizar no processo criativo:

Moodboards, GUI, prototipar o projeto de forma navegável, o uso de grid no
layout, a escolha do software que você tiver facilidade, saber a maior
quantidade de atalhos possível, e...

... testar, testar, testar, testar, testar, testar, testar, testar, testar, testar,
testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar,
testar, testar, testar até que tudo esteja pronto pra ser layoutado.
E essa modinha de
 responsive design,
  design thinking?
Isso é tendência pra
        2012?
Responsive, thinking... tudo
design!


Responsive design nada mais é do que pensar na
aplicação para qualquer tela: desktop, tablet e
smartphone.

Envolve muita interação do time de criação com o
time de implementação e desenvolvimento.
Responsive, thinking... tudo
design!
Demo
Responsive, thinking... tudo
design!


Design Thinking é o processo de identificar os
problemas que podem ser resolvidos pelo design.

Ou seja, combinar empatia pelo problema,
criatividade pra gerar soluções e racionalidade pra
aplicar essas soluções nesse problema.
Show de bola. Quer
dizer que isso tudo
  vai me fazer um
 designer melhor?
Não existe receita de bolo...




Claro que não!

O que vai fazer de você um designer melhor é
treino, estudo, observação, percepção...
Não existe receita de bolo...




Observe outros designers, outras agências. Saiba o
que está sendo feito fora do eixo RJ-SP, fora do
Brasil.

Europa é uma ótima fonte de referências. EUA
também, obviamente. Vale do Silício tá aí né?
Não existe receita de bolo...




Navegue MUITO por sites de prêmios...

FWA, Awwwards, CSSMania;
Não existe receita de bolo...




Galerias online são sempre muito bem vindas.

Behance, From Up North, Abduzeedo, etc;
Não existe receita de bolo...




Siga outros designers no twitter! Isso sempre é
bom pra saber o que eles estão lendo, estudando,
fazendo, falando...
Nada de ctrl+c, ctrl+v hein...




Lembre-se de não imitar ou copiar layouts.
Estude-os, use-os como referência e busque
desenvolver seu estilo.
Nada como ter QI.
  Quem Indica!
Networking é fundamental




Tenha Linkedin, Behance, Cargo, Delicious e outras
redes onde você consiga seguir e compartilhar. Ter
referências e recomendações é sempre importante
na hora do freela ou de trocar de agência/
empresa/startup.
Eventos, conferências,
congressos...


Se a agência pagar integral ou parte, vale. Se não,
faça uma força e vá ao que mais interessar.

Além do networking, você sempre descobre
assuntos novos e técnicas que podem ajudar.
Pra fechar:
   esteja sempre
conectado e estude,
 treine e divulgue!
Experimente! Faça
 projetos fakes. Só
    assim você
consegue perceber
que algumas ideias
  não funcionam!
É isso...
Qualquer dúvida:
dpaola@gmail.com
     @dpaola
facebook.com/danieldepaola
Obrigado!

Mais conteúdo relacionado

Mais procurados

Palestra ux e ui
Palestra ux e uiPalestra ux e ui
Palestra ux e uiDirect Talk
 
Ux design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negociosUx design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negociostdc-globalcode
 
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e ExperiênciasAndreza Godoy
 
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óciosPriscilla Albuquerque
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioGustavo Gil
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframeFabricio Teixeira
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuárioVictor Rubens
 
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
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Catarinas Design de Interação
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosCatarinas Design de Interação
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilLariane Rossanese
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilDiogo Riker
 
UX para desenvolvedores - UX Conf BR 2015
UX para desenvolvedores - UX Conf BR 2015UX para desenvolvedores - UX Conf BR 2015
UX para desenvolvedores - UX Conf BR 2015Samantha Rosa
 
UX e sua importância na construção das marcas
UX e sua importância na construção das marcasUX e sua importância na construção das marcas
UX e sua importância na construção das marcasFabiano Nadler
 

Mais procurados (20)

Palestra ux e ui
Palestra ux e uiPalestra ux e ui
Palestra ux e ui
 
Ux design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negociosUx design como estrategia conquistar clientes impactar negocios
Ux design como estrategia conquistar clientes impactar negocios
 
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
[Palestra UNICAP] UX Design - Projetando Soluções e Experiências
 
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 Samsung
UX SamsungUX Samsung
UX Samsung
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
 
Ux design antes do wireframe
Ux design antes do wireframeUx design antes do wireframe
Ux design antes do wireframe
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
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....
 
Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...Interaction South America 2015 - Concepção de um framework para definição em ...
Interaction South America 2015 - Concepção de um framework para definição em ...
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
UX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negóciosUX Design como estratégia para conquistar mais clientes e impactar negócios
UX Design como estratégia para conquistar mais clientes e impactar negócios
 
UX - Entregaveis
UX - EntregaveisUX - Entregaveis
UX - Entregaveis
 
Introdução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no BrasilIntrodução a User Experience e o mercado de trabalho no Brasil
Introdução a User Experience e o mercado de trabalho no Brasil
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo Ágil
 
UX para desenvolvedores - UX Conf BR 2015
UX para desenvolvedores - UX Conf BR 2015UX para desenvolvedores - UX Conf BR 2015
UX para desenvolvedores - UX Conf BR 2015
 
Experiencia do usuario
Experiencia do usuarioExperiencia do usuario
Experiencia do usuario
 
UX e sua importância na construção das marcas
UX e sua importância na construção das marcasUX e sua importância na construção das marcas
UX e sua importância na construção das marcas
 

Destaque

Design de Cores na Web, por Martha Gabriel
Design de Cores na Web, por  Martha GabrielDesign de Cores na Web, por  Martha Gabriel
Design de Cores na Web, por Martha GabrielMartha Gabriel
 
User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.Catarinas Design de Interação
 
O que é o Adobe Photoshop - Por Império Criativo
O que é o Adobe Photoshop - Por Império CriativoO que é o Adobe Photoshop - Por Império Criativo
O que é o Adobe Photoshop - Por Império Criativoimperiocriativo
 
The User Experience Iceberg
The User Experience IcebergThe User Experience Iceberg
The User Experience IcebergTrevor van Gorp
 
Introdução ao Photoshop Cs4
Introdução ao Photoshop Cs4Introdução ao Photoshop Cs4
Introdução ao Photoshop Cs4Magdiel Silva
 
INTRODUÇÃO AO PHOTOSHOP 2014
INTRODUÇÃO AO PHOTOSHOP 2014INTRODUÇÃO AO PHOTOSHOP 2014
INTRODUÇÃO AO PHOTOSHOP 2014Renato Melo
 
Correção de cor em Photoshop
Correção de cor em PhotoshopCorreção de cor em Photoshop
Correção de cor em PhotoshopLeonardo Pereira
 
Teoria das Cores - Cores que Comunicam
Teoria das Cores - Cores que Comunicam Teoria das Cores - Cores que Comunicam
Teoria das Cores - Cores que Comunicam Coresquecomunicam
 
Técnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em PhotoshopTécnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em PhotoshopLeonardo Pereira
 
Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Willian Magalhães
 
Aula 2 - Photoshop Básico: tratamento da imagem
Aula 2 -  Photoshop Básico: tratamento da imagemAula 2 -  Photoshop Básico: tratamento da imagem
Aula 2 - Photoshop Básico: tratamento da imagemOswaldo Hernandez
 
Experiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no GovernoExperiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no GovernoUFPE
 

Destaque (16)

Design de Cores na Web, por Martha Gabriel
Design de Cores na Web, por  Martha GabrielDesign de Cores na Web, por  Martha Gabriel
Design de Cores na Web, por Martha Gabriel
 
User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.User Experience: O que sua empresa pode ganhar com isso.
User Experience: O que sua empresa pode ganhar com isso.
 
O que é o Adobe Photoshop - Por Império Criativo
O que é o Adobe Photoshop - Por Império CriativoO que é o Adobe Photoshop - Por Império Criativo
O que é o Adobe Photoshop - Por Império Criativo
 
The User Experience Iceberg
The User Experience IcebergThe User Experience Iceberg
The User Experience Iceberg
 
Introdução ao Photoshop Cs4
Introdução ao Photoshop Cs4Introdução ao Photoshop Cs4
Introdução ao Photoshop Cs4
 
Apresentação sobre conceitos básicos do Adobe Photoshop
Apresentação sobre conceitos básicos do Adobe PhotoshopApresentação sobre conceitos básicos do Adobe Photoshop
Apresentação sobre conceitos básicos do Adobe Photoshop
 
INTRODUÇÃO AO PHOTOSHOP 2014
INTRODUÇÃO AO PHOTOSHOP 2014INTRODUÇÃO AO PHOTOSHOP 2014
INTRODUÇÃO AO PHOTOSHOP 2014
 
Correção de cor em Photoshop
Correção de cor em PhotoshopCorreção de cor em Photoshop
Correção de cor em Photoshop
 
Teoria das Cores - Cores que Comunicam
Teoria das Cores - Cores que Comunicam Teoria das Cores - Cores que Comunicam
Teoria das Cores - Cores que Comunicam
 
Técnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em PhotoshopTécnica avançadas de recorte em Photoshop
Técnica avançadas de recorte em Photoshop
 
Introdução ao Photoshop
Introdução ao PhotoshopIntrodução ao Photoshop
Introdução ao Photoshop
 
Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01Curso Photoshop 2009 - Aula 01
Curso Photoshop 2009 - Aula 01
 
Photoshop Básico: Aula 1
Photoshop Básico: Aula 1Photoshop Básico: Aula 1
Photoshop Básico: Aula 1
 
Aula 2 - Photoshop Básico: tratamento da imagem
Aula 2 -  Photoshop Básico: tratamento da imagemAula 2 -  Photoshop Básico: tratamento da imagem
Aula 2 - Photoshop Básico: tratamento da imagem
 
Experiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no GovernoExperiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no Governo
 
Projex finalizado
Projex finalizadoProjex finalizado
Projex finalizado
 

Semelhante a O que é UX e UI

Experiência do Usuário: uma introdução
Experiência do Usuário: uma introduçãoExperiência do Usuário: uma introdução
Experiência do Usuário: uma introduçãoJuliana Dorneles
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirUXPA-Rio
 
templates+das+ferramentas_Design thinking.pdf
templates+das+ferramentas_Design thinking.pdftemplates+das+ferramentas_Design thinking.pdf
templates+das+ferramentas_Design thinking.pdfJulianoMazzucatto
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceEdu Agni
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Jane Vita
 
UX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca BrancaleoneUX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca BrancaleoneByte Girl
 
A importância de UX no desenvolviimento de produtos digitais.
A importância de UX no desenvolviimento de produtos digitais.A importância de UX no desenvolviimento de produtos digitais.
A importância de UX no desenvolviimento de produtos digitais.Bruno Said
 
UX e Branding para Desenvolvedores
UX e Branding para DesenvolvedoresUX e Branding para Desenvolvedores
UX e Branding para DesenvolvedoresLuiz Vitulo
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Aula inaugural estácio 20140318
Aula inaugural estácio 20140318Aula inaugural estácio 20140318
Aula inaugural estácio 20140318Gustavo Dore
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando MobiledevMob
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJHorácio Soares
 
Pesquisa com usuários - O que é e por que você deveria estar fazendo
Pesquisa com usuários - O que é e por que você deveria estar fazendoPesquisa com usuários - O que é e por que você deveria estar fazendo
Pesquisa com usuários - O que é e por que você deveria estar fazendoMellina
 
Design Antecipatório para projetos zero interface - 2017 Campus Party -
Design Antecipatório para projetos zero interface - 2017 Campus Party -Design Antecipatório para projetos zero interface - 2017 Campus Party -
Design Antecipatório para projetos zero interface - 2017 Campus Party -Catarinas Design de Interação
 
Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017Catarinas Design de Interação
 
Jordana Mello
Jordana MelloJordana Mello
Jordana Melloossobuco
 

Semelhante a O que é UX e UI (20)

Ebook ui-design-v2
Ebook ui-design-v2Ebook ui-design-v2
Ebook ui-design-v2
 
Experiência do Usuário: uma introdução
Experiência do Usuário: uma introduçãoExperiência do Usuário: uma introdução
Experiência do Usuário: uma introdução
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrir
 
templates+das+ferramentas_Design thinking.pdf
templates+das+ferramentas_Design thinking.pdftemplates+das+ferramentas_Design thinking.pdf
templates+das+ferramentas_Design thinking.pdf
 
Usabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerceUsabilidade, User Experience e Design Emocional no E-commerce
Usabilidade, User Experience e Design Emocional no E-commerce
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
UX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca BrancaleoneUX e Tecnologia - Bianca Brancaleone
UX e Tecnologia - Bianca Brancaleone
 
Prototipação
PrototipaçãoPrototipação
Prototipação
 
A importância de UX no desenvolviimento de produtos digitais.
A importância de UX no desenvolviimento de produtos digitais.A importância de UX no desenvolviimento de produtos digitais.
A importância de UX no desenvolviimento de produtos digitais.
 
UX Dos and Dont's
UX  Dos and Dont's UX  Dos and Dont's
UX Dos and Dont's
 
UX e Branding para Desenvolvedores
UX e Branding para DesenvolvedoresUX e Branding para Desenvolvedores
UX e Branding para Desenvolvedores
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Aula inaugural estácio 20140318
Aula inaugural estácio 20140318Aula inaugural estácio 20140318
Aula inaugural estácio 20140318
 
Projetando Mobile
Projetando MobileProjetando Mobile
Projetando Mobile
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJ
 
Pesquisa com usuários - O que é e por que você deveria estar fazendo
Pesquisa com usuários - O que é e por que você deveria estar fazendoPesquisa com usuários - O que é e por que você deveria estar fazendo
Pesquisa com usuários - O que é e por que você deveria estar fazendo
 
Design Antecipatório para projetos zero interface - 2017 Campus Party -
Design Antecipatório para projetos zero interface - 2017 Campus Party -Design Antecipatório para projetos zero interface - 2017 Campus Party -
Design Antecipatório para projetos zero interface - 2017 Campus Party -
 
Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017Design antecipatório para projetos zero interface - Campus Party 2017
Design antecipatório para projetos zero interface - Campus Party 2017
 
Jordana Mello
Jordana MelloJordana Mello
Jordana Mello
 
Seminario
SeminarioSeminario
Seminario
 

O que é UX e UI

  • 1. UX vs. UI O que é isso? O que isso come? Tem que ser maior de idade pra consumir? Isso mata?
  • 2. Quem é o baixinho, gordinho de óculos?
  • 3. Tá, mas o que ele já fez pra estar aqui?
  • 4. Afinal, que diabos é essa UX?
  • 5. Afinal, que diabos é essa UX? User eXperience, traduzindo... Experiência do Usuário!!!! Ou seja, é o que a pessoa, usuário, sente e interpreta ao usar uma interface. Seja ela um site, um app, um sistema, um celular, um tablet, um produto.
  • 6. Afinal, que diabos é essa UX? A importância disso: vamos pensar...
  • 7. Afinal, que diabos é essa UX? O UOL por exemplo?
  • 8. Afinal, que diabos é essa UX? E a Globo.com?
  • 9. Afinal, que diabos é essa UX? E a Fox.com?
  • 10. Afinal, que diabos é essa UX? Por que estudar isso? Pra não frustar nossos usuários logo de cara. Estude, leia, pesquise. Nem que seja o mínimo.
  • 11. Afinal, que diabos é essa UX? O que interpretar com UX? É tanta coisa que não cabe aqui, mas vale pesquisar sobre e aí analisar qual se encaixa melhor no seu projeto. Card sorting, storyboard, wireframe, personas, métricas de sucesso, road map, benchmark, focus group, site map, fluxograma, protótipo navegável etc...
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. Afinal, que diabos é essa UX? Referências de blogs e autores sobre UX: @blogdeai @ixdsa www.informationarchitects.jp/en www.melinaalves.com e muitos outros....
  • 18. Legal, e a tal da UI? É parente da UX?
  • 19. A UI é parente da UX? User Interface, traduzindo... Interface do Usuário (hein?)!!!! Ou seja, é o que a pessoa, usuário, utiliza para chegar a informação. Seja ela um site, um app, um sistema, um celular, um tablet, um produto.
  • 20. A UI é parente da UX? User Interface, traduzindo... Interface do Usuário (hein?)!!!! Ou seja, é o que a pessoa, usuário, utiliza para chegar a informação. Seja ela um site, um app, um sistema, um celular, um tablet, um produto.
  • 21. A UI é parente da UX? É nesse momento que aplica-se o que foi estudado, pesquisado e pensado sobre a experiência do usuário, no papel e depois pra tela.
  • 22. Ah, então elas são irmãs?
  • 23. Não, elas não são irmãs. Elas se completam como amantes. A aplicação das duas disciplinas fortalece muito, na parte conceitual, o designer. Aplicar essas técnicas e seus conceitos, ajuda no processo criativo e conceptivo do projeto.
  • 24. Não, elas não são irmãs. Elas se completam como amantes. Algumas dicas pra facilitar a organização das ideias e agilizar no processo criativo: Moodboards, GUI, prototipar o projeto de forma navegável, o uso de grid no layout, a escolha do software que você tiver facilidade, saber a maior quantidade de atalhos possível, e... ... testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar, testar até que tudo esteja pronto pra ser layoutado.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29. E essa modinha de responsive design, design thinking? Isso é tendência pra 2012?
  • 30. Responsive, thinking... tudo design! Responsive design nada mais é do que pensar na aplicação para qualquer tela: desktop, tablet e smartphone. Envolve muita interação do time de criação com o time de implementação e desenvolvimento.
  • 32. Demo
  • 33. Responsive, thinking... tudo design! Design Thinking é o processo de identificar os problemas que podem ser resolvidos pelo design. Ou seja, combinar empatia pelo problema, criatividade pra gerar soluções e racionalidade pra aplicar essas soluções nesse problema.
  • 34. Show de bola. Quer dizer que isso tudo vai me fazer um designer melhor?
  • 35. Não existe receita de bolo... Claro que não! O que vai fazer de você um designer melhor é treino, estudo, observação, percepção...
  • 36. Não existe receita de bolo... Observe outros designers, outras agências. Saiba o que está sendo feito fora do eixo RJ-SP, fora do Brasil. Europa é uma ótima fonte de referências. EUA também, obviamente. Vale do Silício tá aí né?
  • 37. Não existe receita de bolo... Navegue MUITO por sites de prêmios... FWA, Awwwards, CSSMania;
  • 38. Não existe receita de bolo... Galerias online são sempre muito bem vindas. Behance, From Up North, Abduzeedo, etc;
  • 39. Não existe receita de bolo... Siga outros designers no twitter! Isso sempre é bom pra saber o que eles estão lendo, estudando, fazendo, falando...
  • 40. Nada de ctrl+c, ctrl+v hein... Lembre-se de não imitar ou copiar layouts. Estude-os, use-os como referência e busque desenvolver seu estilo.
  • 41. Nada como ter QI. Quem Indica!
  • 42. Networking é fundamental Tenha Linkedin, Behance, Cargo, Delicious e outras redes onde você consiga seguir e compartilhar. Ter referências e recomendações é sempre importante na hora do freela ou de trocar de agência/ empresa/startup.
  • 43. Eventos, conferências, congressos... Se a agência pagar integral ou parte, vale. Se não, faça uma força e vá ao que mais interessar. Além do networking, você sempre descobre assuntos novos e técnicas que podem ajudar.
  • 44. Pra fechar: esteja sempre conectado e estude, treine e divulgue!
  • 45. Experimente! Faça projetos fakes. Só assim você consegue perceber que algumas ideias não funcionam!
  • 47. Qualquer dúvida: dpaola@gmail.com @dpaola facebook.com/danieldepaola

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. o que sentimos quando entramos numa loja física da apple, da fast? e quando entramos numa renner? qual a sensação?\n
  7. muita informação sem hieraquia, tudo azul e vermelho, banners, shopping, barras etc.\n\n
  8. hierarquia visual limpa, cores separando os segmentos, estrutura, respiro\n
  9. mesma coisa\n
  10. \n
  11. \n
  12. cardsorting\n
  13. wire baixa fidelidade\n
  14. wire media fidelidade\n
  15. wire alta fidelidade\n
  16. site map\n
  17. \n
  18. \n
  19. exemplos: windows, iOS, android, sistema de caixa eletronico\n
  20. \n
  21. \n
  22. \n
  23. lembrar que ainda não estamos falando em execução, apenas no conceito da coisa holísticamente\n
  24. lembrar que nem sempre vamos conseguir usar e fazer isso tudo porque o tempo e o prazo jogam contra\n
  25. moodboard: conjunto de referencias visuais que ajuda na hora de definir cores, formas, diagramação\n
  26. iPhone 3GS GUI: importância da facilidade de uso dos elementos pro designer e pro front\n
  27. grid: 960.gs elementos alinhados, organizados... 12/16/24 colunas\n
  28. software não importa, o que você tiver mais facilidade. o que importa é o resultado, o refino, o cuidado\n
  29. \n
  30. explicar que rola muito js, mts calculos por parte do time de front e uma modelagem bem trabalhada de grids, imagens e blocos de textos por parte do time de criaçao\n
  31. \n
  32. \n
  33. ainda não é muito difundido no brasil, obviamente, mas é praticamente uma nomenclatura pra o que fazemos normalmente nos projetos\n
  34. \n
  35. falar aquele bla bla bla de que ao observar tudo a sua volta você acaba percebendo coisas que normalmente passam batidas por você. é perceber q um determinado angulo pode parecer uma foto ou um quadro. em algum momento da sua vida vc vai lembrar disso e aplicar\n
  36. citar Fi, Huge, North Kingdom, Possible, TBWA, Ogilvy, Crispin, Frog e outras\n
  37. \n
  38. \n
  39. Citar Adhemas, Dann Petty, Peter Jawroski, Fabio Sasso, Anton Repponen, Artem, Adam Safar, Efact, Zambrano, Vitor Lourenço, Hirata e outros\n
  40. \n
  41. \n
  42. \n
  43. citar intercon, ixda, ebai, edted, find\n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n