“O controle que os designers têm da mídia impressa, e frequentementedesejam na Web, é simplesmente em função das limitaçõe...
Como temos feito sites até agora
Como temos feito sites até agora      Briefing    Pesquisa e   Conceituação   Arquitetura da    Informação    Wireframes  ...
Mancha gráfica
Web site em um monitor “convencional”
Web site em um monitor grande
Web site no smartphone
Design Gráfico            ConceitoProjeto#1   Projeto#2   Projeto#3
Web Design            Conceito            Projeto#117"   24"               TV   game
Algunsexemplos
Desktop 17"
Desktop 22"
Smartphone Xperia x10
Desktop 17"w i dg e t
Desktop 22"
Smartphone Xperia x10
1
1, 2
1, 2, 3
1, 2, 3, 4
1, 2, 3, 4, 5
1, 2, 3, 4, 5, 6
1, 2, 3, 4, 5, 6, 7, ...
Qual é o problemadesta abor-  dagem?
Nós temos que supor qual é a resolução do usuário.                                                                        ...
Em resoluções de 1024 x 768 (17”) Sistema Operacional                                     Navegador           Área útil (p...
Segundo o The Mobile Internet Reportproduzido pelo MORGAN STANLEY RESEARCH em 2009,        o acesso a Web via dispositivos...
Teste de usabilidade promovido pela Mozilla Labs            9.667 usuários em 5 dias                               http://...
TV tabletscelular GPS  vídeo games
TV tabletscelular GPS  vídeo games
TV tabletscelular GPS  vídeo gamesescolhas difíceis       >   projetistas
TV tabletscelular GPS  vídeo games              Experiência              do usuárioescolhas difíceis      Acessibilidade. ...
LayoutFluido ou Líquido  % ao invés de px       Proporção != Exatidão            Pouco controle do layout
Proporção perfeita   ao invés de     Pixel perfeito               Regra dos terços      33.33%         33.33%             ...
Proporção perfeita   ao invés de   Pixel perfeito    Proporção áurea =~ 1,618033989            61.8%                      ...
Proporção perfeita   ao invés de   Pixel perfeito      Só a prática leva a perfeição            50%                       ...
1680px
1280px
1024px
800px
800px
480px
até 800px
3º Design Adaptável2º Responsive Web Design     http://goo.gl/aVHo1º Responsive Architecture   http://goo.gl/bvUF
Design Adaptável              CSS3     width                 color     height                color-index     device-width ...
Design Adaptável                       CSS3@media query   > @media (min-width: 800px)     Esta janela tem no mínimo 800px ...
Design Adaptável                      Suporte em desktops > Navegadores com suporte a @media queries   Safari 3+          ...
Design Adaptável                   Suporte em smartphones                    sim                               nãoOpera Mo...
Design Adaptável        Exemplo 1
Design Adaptável        Exemplo 2                    http://goo.gl/CBR5
1680px
1280px
1024px
800px
480px
320px
240px
Design Adaptável        Exemplo 3                    http://goo.gl/giz7
1680px
1280px
800px
480px
Design Adaptável        Exemplo 4                    http://goo.gl/KAl4
1680px
1280px
1024px
800px
-800px
Design Adaptável        Exemplo 5                    http://goo.gl/oZaO
1680px
1024px
800px
-800px
Design Adaptável                Arquitetura da Informação > Selecionando os itens mais e menos importantes > Alterando os ...
Design Adaptável                    Wireframes... muitos! > Variações das principais páginas        >                     ...
1680px
1440px   1280px   1024px
800px   640px   480px   320px   240px
Design Adaptável      Áreas de arraste                         > Toque rápido                         > Toque prolongado  ...
Exemplo A    Exemplo BResumo não é link <   > Resumo é link
Design Adaptável                   Palheta de cor   > Título e texto corrido   > Títulos de seções e textos de apoio que n...
1680px
1440px
1280px
1024px
800px640px480px320px240px
1680px
1440px
1280px
1024px
800px640px480px320px240px
Design Adaptável        iPod screenshot
Design Adaptável        iPod screenshot
Design Adaptável         Obrigado! :-)        > @bruno_barros        > bruno@brunobarros.com        > www.designadaptavel....
Design Adaptável - Palestra ux dia INFNET
Design Adaptável - Palestra ux dia INFNET
Design Adaptável - Palestra ux dia INFNET
Design Adaptável - Palestra ux dia INFNET
Próximos SlideShares
Carregando em…5
×

Design Adaptável - Palestra ux dia INFNET

1.157 visualizações

Publicada em

Palestra no evento UX Dia promovido pelo instituto INFNET sobre meu projeto www.designadaptavel.com.br

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

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Design Adaptável - Palestra ux dia INFNET

  1. 1. “O controle que os designers têm da mídia impressa, e frequentementedesejam na Web, é simplesmente em função das limitações da página impressa. Nós devemos aceitar o fato de que a Web não tem os mesmos limites, e projetar para esta flexibilidade. Contudo, primeiro devemos aceitar o fluxo e refluxo das coisas.” A Dao of Web Design por John Allsopp, 10 de abril de 2000 http://goo.gl/wf6I
  2. 2. Como temos feito sites até agora
  3. 3. Como temos feito sites até agora Briefing Pesquisa e Conceituação Arquitetura da Informação Wireframes L a you t
  4. 4. Mancha gráfica
  5. 5. Web site em um monitor “convencional”
  6. 6. Web site em um monitor grande
  7. 7. Web site no smartphone
  8. 8. Design Gráfico ConceitoProjeto#1 Projeto#2 Projeto#3
  9. 9. Web Design Conceito Projeto#117" 24" TV game
  10. 10. Algunsexemplos
  11. 11. Desktop 17"
  12. 12. Desktop 22"
  13. 13. Smartphone Xperia x10
  14. 14. Desktop 17"w i dg e t
  15. 15. Desktop 22"
  16. 16. Smartphone Xperia x10
  17. 17. 1
  18. 18. 1, 2
  19. 19. 1, 2, 3
  20. 20. 1, 2, 3, 4
  21. 21. 1, 2, 3, 4, 5
  22. 22. 1, 2, 3, 4, 5, 6
  23. 23. 1, 2, 3, 4, 5, 6, 7, ...
  24. 24. Qual é o problemadesta abor- dagem?
  25. 25. Nós temos que supor qual é a resolução do usuário. Smart Phone 240 x 320 4:3 Palm Treo24’’ 21’’ 19’’ 17’’ 14’’ 320 x 3201920 x 1200 1600 x 1200 1280 x 1024 1152 x 864 800 x 600 1:1 iPhone5:3 4:3 5:4 4:3 4:3 320 x 480 3:2 Xperia X10 480 x 854 16:9 Desktops Smartphones
  26. 26. Em resoluções de 1024 x 768 (17”) Sistema Operacional Navegador Área útil (px) Mac OS X Safari 909 x 519 Mac OS X Firefox 909 x 507 Windows Vista (7) Internet Explorer 849 x 621 Windows Vista (7) Firefox 849 x 608 Windows XP Internet Explorer 998 x 615 Windows XP Firefox 998 x 622 Em todos os sistemas e navegadores 849 x 507 et wi d gFonte: http://www.designerstoolbox.com/designresources/safearea/compare
  27. 27. Segundo o The Mobile Internet Reportproduzido pelo MORGAN STANLEY RESEARCH em 2009, o acesso a Web via dispositivos móveis irá superar o de desktops em 5 anos.
  28. 28. Teste de usabilidade promovido pela Mozilla Labs 9.667 usuários em 5 dias http://goo.gl/KMLK
  29. 29. TV tabletscelular GPS vídeo games
  30. 30. TV tabletscelular GPS vídeo games
  31. 31. TV tabletscelular GPS vídeo gamesescolhas difíceis > projetistas
  32. 32. TV tabletscelular GPS vídeo games Experiência do usuárioescolhas difíceis Acessibilidade. > projetistas % é melhor que PX
  33. 33. LayoutFluido ou Líquido % ao invés de px Proporção != Exatidão Pouco controle do layout
  34. 34. Proporção perfeita ao invés de Pixel perfeito Regra dos terços 33.33% 33.33% 33.33% 33.33% 33.33% 33.33% 33.33% 33.33% 33.33%
  35. 35. Proporção perfeita ao invés de Pixel perfeito Proporção áurea =~ 1,618033989 61.8% 38.2% 61.8% 38.2%
  36. 36. Proporção perfeita ao invés de Pixel perfeito Só a prática leva a perfeição 50% 50% #IEfail
  37. 37. 1680px
  38. 38. 1280px
  39. 39. 1024px
  40. 40. 800px
  41. 41. 800px
  42. 42. 480px
  43. 43. até 800px
  44. 44. 3º Design Adaptável2º Responsive Web Design http://goo.gl/aVHo1º Responsive Architecture http://goo.gl/bvUF
  45. 45. Design Adaptável CSS3 width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio http://goo.gl/oKIB
  46. 46. Design Adaptável CSS3@media query > @media (min-width: 800px) Esta janela tem no mínimo 800px de largura? > @media screen and (max-device-width: 240px) Este dispositivo é uma tela e essa tela tem no máximo 240px de largura? > @media handheld and (orientation: landscape) Este é um dispositivo portátil e está no sentido horizontal?
  47. 47. Design Adaptável Suporte em desktops > Navegadores com suporte a @media queries Safari 3+ Opera 7+ Chrome IE9 Firefox 3.5+ > E o Internet Explorer 6-8? http://code.google.com/p/css3-mediaqueries-js
  48. 48. Design Adaptável Suporte em smartphones sim nãoOpera Mobile iPhone Firefox IE MobileOpera Mini Android MicroB BlackBerry old Dolfin NetFront BlackBerry Obigo Phantom Bolt Symbian * S40 * Presto WebKit Gecko fonte: www.quirksmode.org/mobile
  49. 49. Design Adaptável Exemplo 1
  50. 50. Design Adaptável Exemplo 2 http://goo.gl/CBR5
  51. 51. 1680px
  52. 52. 1280px
  53. 53. 1024px
  54. 54. 800px
  55. 55. 480px
  56. 56. 320px
  57. 57. 240px
  58. 58. Design Adaptável Exemplo 3 http://goo.gl/giz7
  59. 59. 1680px
  60. 60. 1280px
  61. 61. 800px
  62. 62. 480px
  63. 63. Design Adaptável Exemplo 4 http://goo.gl/KAl4
  64. 64. 1680px
  65. 65. 1280px
  66. 66. 1024px
  67. 67. 800px
  68. 68. -800px
  69. 69. Design Adaptável Exemplo 5 http://goo.gl/oZaO
  70. 70. 1680px
  71. 71. 1024px
  72. 72. 800px
  73. 73. -800px
  74. 74. Design Adaptável Arquitetura da Informação > Selecionando os itens mais e menos importantes > Alterando os nomes de links e botões > Alterando o posicionamento das partes do site
  75. 75. Design Adaptável Wireframes... muitos! > Variações das principais páginas > >240px 800px 1024px 1280px 1680px 640px 1440px 480px 320px
  76. 76. 1680px
  77. 77. 1440px 1280px 1024px
  78. 78. 800px 640px 480px 320px 240px
  79. 79. Design Adaptável Áreas de arraste > Toque rápido > Toque prolongado > Toque prolongado com arraste > Dois toques rápidos
  80. 80. Exemplo A Exemplo BResumo não é link < > Resumo é link
  81. 81. Design Adaptável Palheta de cor > Título e texto corrido > Títulos de seções e textos de apoio que não são conteúdo do post > Título da seção de posts em destaque > Links e botões
  82. 82. 1680px
  83. 83. 1440px
  84. 84. 1280px
  85. 85. 1024px
  86. 86. 800px640px480px320px240px
  87. 87. 1680px
  88. 88. 1440px
  89. 89. 1280px
  90. 90. 1024px
  91. 91. 800px640px480px320px240px
  92. 92. Design Adaptável iPod screenshot
  93. 93. Design Adaptável iPod screenshot
  94. 94. Design Adaptável Obrigado! :-) > @bruno_barros > bruno@brunobarros.com > www.designadaptavel.com.br

×