estratégiapara “responsive ux”
NUNO MB RODRIGUES
Multimedia - Web - Mobile - Consultoria
nuno rodrigues
designer
2002
BOLD International
Interação - Interface - UX - Desig...
responsive
design!
um
projeto
de
introdução estratégia para “responsive ux"
UX?
introdução estratégia para “responsive ux"
user experiEnce≠interface
introdução estratégia para “responsive ux"
estratégia antes de tudo
Cliente quer um “doce” mas…
introdução estratégia para “responsive ux"
responsive design é muito, muito difícil.
precisa de tempo e planeamento
A verd...
responsive
vs
adaptive
responsive vs adaptative estratégia para “responsive ux"
responsive adaptive
Conteúdo mantêm-se o mesmo
PRÓS
CONTRAS
É con...
introdução estratégia para “responsive ux"
uma boa opção :
combinar
AWESOME!
introdução estratégia para “responsive ux"
responsive
% em
FASES
metodologia
ux
fases metodologia ux estratégia para “responsive ux"
Objectivos (porquê?)
Requisitos (angariar)
Pesquisa (utilizadores, et...
content
first
primeiro, o conteúdo estratégia para “responsive ux"
Uma aproximação “conteúdo primeiro”
ensina-nos que o design visual de...
primeiro, o conteúdo estratégia para “responsive ux"
Têm haver com escolher o elemento de HTML
que melhor descreva um dete...
primeiro, o conteúdo estratégia para “responsive ux"
estrutura da
informação
primeiro, o conteúdo estratégia para “responsive ux"
Estamos a criar estrutura e planeamento para o
próximo passo…
mobile
first
mobile first estratégia para “responsive ux"
Luke Wroblewski
“What’s the minimum amount of content and
navigation that we ...
mobile first estratégia para “responsive ux"
É mais fácil adicionar a um design que tirar
princípio
mobile first estratégia para “responsive ux"
Design para Mobile está
cheio de particularidades.
a prática
a prática estratégia para “responsive ux"
Perceber pontos de quebra. As larguras que fazem a página
quebrar. Wireframing a...
a prática estratégia para “responsive ux"
Desktop ≠ Mobile
pesquisa
O que é importante? O que é “nice-to-have” para o util...
a prática estratégia para “responsive ux"
Bastante complexo.
passar de informação para interacção
O que cabe ou não no ecr...
a prática estratégia para “responsive ux"
Como se comporta a imagem?
estratégias para as imagens
Crop? Resize?
É necessári...
a prática estratégia para “responsive ux"
critérios para concursos
Clean Code
Semantics
Web Technologies
Accessibility
SEO...
a prática estratégia para “responsive ux"
“vender
responsive
design”
design é um negócio !
vender responsive design estratégia para “responsive ux"
a prática estratégia para “responsive ux"
“Your Strategy Maps How
You’ll Get There”
a prática estratégia para “responsive ux"
Ajuda a ter argumentos fortes
Reduz surpresas no projecto
a prática estratégia para “responsive ux"
Dizer que sim requer mudanças:
Quando se vende Responsive Design à gestão, é
fác...
a prática estratégia para “responsive ux"
não vendam “responsive design” barato !
…No fim de contas, Está a poupar dinheir...
obrigado!
NUNO MB RODRIGUES @nunorod hello@nunorod.com
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Responsive Design
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Responsive Design
Próximos SlideShares
Carregando em…5
×

"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Responsive Design

555 visualizações

Publicada em

É necessário uma boa estratégia e preparação para implementar Responsive Design. Na fase de preparação deve-se preparar a estrutura, filtrar requisitos do cliente e apresentar possíveis soluções antes de fazer Design Visual do website.

Publicada em: Engenharia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
555
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Responsive Design

  1. 1. estratégiapara “responsive ux” NUNO MB RODRIGUES
  2. 2. Multimedia - Web - Mobile - Consultoria nuno rodrigues designer 2002 BOLD International Interação - Interface - UX - Design Thinking
  3. 3. responsive design! um projeto de
  4. 4. introdução estratégia para “responsive ux" UX?
  5. 5. introdução estratégia para “responsive ux" user experiEnce≠interface
  6. 6. introdução estratégia para “responsive ux" estratégia antes de tudo Cliente quer um “doce” mas…
  7. 7. introdução estratégia para “responsive ux" responsive design é muito, muito difícil. precisa de tempo e planeamento A verdade?…
  8. 8. responsive vs adaptive
  9. 9. responsive vs adaptative estratégia para “responsive ux" responsive adaptive Conteúdo mantêm-se o mesmo PRÓS CONTRAS É conseguido automaticamente (adaptação ao ecrã) Custo Experiencias algo genéricas, não optimizadas Diferenças de comportamentos em diferentes meios Tempos de carregamento PRÓS CONTRAS Velocidade Desenhado para sensações ( gestos mobile friendly …) Portabilidade para Apps Nativas Pesadelo de conteúdo (Diferenças no CMS, etc) Demasiadas versões Transformação para nativo (pode comprometer código)
  10. 10. introdução estratégia para “responsive ux" uma boa opção : combinar AWESOME!
  11. 11. introdução estratégia para “responsive ux" responsive % em
  12. 12. FASES metodologia ux
  13. 13. fases metodologia ux estratégia para “responsive ux" Objectivos (porquê?) Requisitos (angariar) Pesquisa (utilizadores, etc) Arq. de Informação (agrupar de conteúdo) Html (semântico) e CSS
  14. 14. content first
  15. 15. primeiro, o conteúdo estratégia para “responsive ux" Uma aproximação “conteúdo primeiro” ensina-nos que o design visual deve ser sempre baseado em conteúdo real. Só assim saberemos como o apresentar melhor aos utilizadores.
  16. 16. primeiro, o conteúdo estratégia para “responsive ux" Têm haver com escolher o elemento de HTML que melhor descreva um determinado pedaço de informação, em vez de usar o HTML para definir como a informação deve “parecer”. HTML semântico <DIV> ?…. <article>
  17. 17. primeiro, o conteúdo estratégia para “responsive ux" estrutura da informação
  18. 18. primeiro, o conteúdo estratégia para “responsive ux" Estamos a criar estrutura e planeamento para o próximo passo…
  19. 19. mobile first
  20. 20. mobile first estratégia para “responsive ux" Luke Wroblewski “What’s the minimum amount of content and navigation that we need to make our design useful?  From this, start to define the most minimal configuration, and work the way back to their maximum case. ”
  21. 21. mobile first estratégia para “responsive ux" É mais fácil adicionar a um design que tirar princípio
  22. 22. mobile first estratégia para “responsive ux" Design para Mobile está cheio de particularidades.
  23. 23. a prática
  24. 24. a prática estratégia para “responsive ux" Perceber pontos de quebra. As larguras que fazem a página quebrar. Wireframing ajuda. primeira táCtica base Manter os tempos de carregamento baixos. Ter atenção ao CSS e à sua optimização. “Progressive enhancement” - Google it. segunda táCtica base Optimização de imagens. terceira táCtica base
  25. 25. a prática estratégia para “responsive ux" Desktop ≠ Mobile pesquisa O que é importante? O que é “nice-to-have” para o utilizador? Conjunto de cenários para dirigir as discussões Eliminar o factor opinião
  26. 26. a prática estratégia para “responsive ux" Bastante complexo. passar de informação para interacção O que cabe ou não no ecrã? Como apresentar o que não se vê? Interacção ajuda a perceber hierarquias e navegação, ex: Modais, animações, “acordeões”, etc.
  27. 27. a prática estratégia para “responsive ux" Como se comporta a imagem? estratégias para as imagens Crop? Resize? É necessária?
  28. 28. a prática estratégia para “responsive ux" critérios para concursos Clean Code Semantics Web Technologies Accessibility SEO Performance Animations Responsive Design
  29. 29. a prática estratégia para “responsive ux"
  30. 30. “vender responsive design”
  31. 31. design é um negócio ! vender responsive design estratégia para “responsive ux"
  32. 32. a prática estratégia para “responsive ux" “Your Strategy Maps How You’ll Get There”
  33. 33. a prática estratégia para “responsive ux" Ajuda a ter argumentos fortes Reduz surpresas no projecto
  34. 34. a prática estratégia para “responsive ux" Dizer que sim requer mudanças: Quando se vende Responsive Design à gestão, é fácil que passe despercebido o alcance dos efeitos que esta metodologia tem. Nos processos editoriais Na aproximação à interacção e visuais Na forma como se pensa nos utilizadores
  35. 35. a prática estratégia para “responsive ux" não vendam “responsive design” barato ! …No fim de contas, Está a poupar dinheiro ao cliente.
  36. 36. obrigado! NUNO MB RODRIGUES @nunorod hello@nunorod.com

×