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!

Ux vs Ui

  • 1.
    UX vs. UI O que é isso? O que isso come? Tem que ser maior de idade pra consumir? Isso mata?
  • 2.
    Quem é obaixinho, gordinho de óculos?
  • 3.
    Tá, mas oque ele já fez pra estar aqui?
  • 4.
  • 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...
  • 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 atal 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 elassão irmãs?
  • 23.
    Não, elas nãosã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ãosã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.
  • 29.
    E essa modinhade responsive design, design thinking? Isso é tendência pra 2012?
  • 30.
    Responsive, thinking... tudo design! Responsivedesign 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.
  • 31.
  • 32.
  • 33.
    Responsive, thinking... tudo design! DesignThinking é 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 receitade bolo... Claro que não! O que vai fazer de você um designer melhor é treino, estudo, observação, percepção...
  • 36.
    Não existe receitade 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 receitade bolo... Navegue MUITO por sites de prêmios... FWA, Awwwards, CSSMania;
  • 38.
    Não existe receitade bolo... Galerias online são sempre muito bem vindas. Behance, From Up North, Abduzeedo, etc;
  • 39.
    Não existe receitade 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 terQI. Quem Indica!
  • 42.
    Networking é fundamental TenhaLinkedin, 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 aagê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 projetosfakes. Só assim você consegue perceber que algumas ideias não funcionam!
  • 46.
  • 47.
    Qualquer dúvida: dpaola@gmail.com @dpaola facebook.com/danieldepaola
  • 48.

Notas do Editor

  • #2 \n
  • #3 \n
  • #4 \n
  • #5 \n
  • #6 \n
  • #7 o que sentimos quando entramos numa loja física da apple, da fast? e quando entramos numa renner? qual a sensação?\n
  • #8 muita informação sem hieraquia, tudo azul e vermelho, banners, shopping, barras etc.\n\n
  • #9 hierarquia visual limpa, cores separando os segmentos, estrutura, respiro\n
  • #10 mesma coisa\n
  • #11 \n
  • #12 \n
  • #13 cardsorting\n
  • #14 wire baixa fidelidade\n
  • #15 wire media fidelidade\n
  • #16 wire alta fidelidade\n
  • #17 site map\n
  • #18 \n
  • #19 \n
  • #20 exemplos: windows, iOS, android, sistema de caixa eletronico\n
  • #21 \n
  • #22 \n
  • #23 \n
  • #24 lembrar que ainda não estamos falando em execução, apenas no conceito da coisa holísticamente\n
  • #25 lembrar que nem sempre vamos conseguir usar e fazer isso tudo porque o tempo e o prazo jogam contra\n
  • #26 moodboard: conjunto de referencias visuais que ajuda na hora de definir cores, formas, diagramação\n
  • #27 iPhone 3GS GUI: importância da facilidade de uso dos elementos pro designer e pro front\n
  • #28 grid: 960.gs elementos alinhados, organizados... 12/16/24 colunas\n
  • #29 software não importa, o que você tiver mais facilidade. o que importa é o resultado, o refino, o cuidado\n
  • #30 \n
  • #31 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
  • #32 \n
  • #33 \n
  • #34 ainda não é muito difundido no brasil, obviamente, mas é praticamente uma nomenclatura pra o que fazemos normalmente nos projetos\n
  • #35 \n
  • #36 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
  • #37 citar Fi, Huge, North Kingdom, Possible, TBWA, Ogilvy, Crispin, Frog e outras\n
  • #38 \n
  • #39 \n
  • #40 Citar Adhemas, Dann Petty, Peter Jawroski, Fabio Sasso, Anton Repponen, Artem, Adam Safar, Efact, Zambrano, Vitor Lourenço, Hirata e outros\n
  • #41 \n
  • #42 \n
  • #43 \n
  • #44 citar intercon, ixda, ebai, edted, find\n
  • #45 \n
  • #46 \n
  • #47 \n
  • #48 \n
  • #49 \n