Curso Responsive Weekend

712 visualizações

Publicada em

No curso Responsive Week os alunos aprendem a criar sites com interfaces flexíveis e adaptáveis a uma ampla variedade de contextos, resoluções de tela e dispositivos, através da aplicação de conceitos de Arquitetura de Informação, Usabilidade, Mobile First e Responsive Design, com práticas de prototipação e codificação.

http://www.mergo.com.br/cursos/responsiveweekend/

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

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

Nenhuma nota no slide

Curso Responsive Weekend

  1. 1. ResponsiveWeekend
  2. 2. Edu Agni é designer, consultor especialista em experiência do usuário na Mergo User Experience.
  3. 3. O que veremos nesse workshop?
  4. 4. Sábado, primeira parte Design centrado no usuário Mobile First Design Responsivo Arquitetura de Informação
  5. 5. Domingo, segunda parte Grids fluidos Design adaptativo Otimização de desempenho Ferramentas
  6. 6. Junção da arte com a tecnologia
  7. 7. Design centrado no usuário
  8. 8. Design Centrado no Usuário é o processo de design em que as necessidades, desejos e limitações do ser humano são levados em conta durante todas as fases de concepção e desenvolvimento de um projeto.
  9. 9. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  10. 10. https://dribbble.com/shots/1078543-Sebonic-Financial-Responsive
  11. 11. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  12. 12. http://scotthurff.com/posts/facebook-paper-gestures
  13. 13. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  14. 14. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  15. 15. http://electricstudio.fr/news/how-do-users-really-hold-mobile-devices/
  16. 16. http://electricstudio.fr/news/how-do-users-really-hold-mobile-devices/
  17. 17. Criando personas
  18. 18. Personas são personagens fictícios de produtos e serviços que representam as necessidades de um grupo maior de usuários. Devem ser criadas com base em dados reais e atuam, nos projetos de design, como representantes dos usuários reais ajudando a equipe a tomar decisões sobre funcionalidades e design. (Alan Cooper)
  19. 19. Uma Persona é uma pessoa artificial, inventada para ajudar um designer entender as pessoas que usarão seu produto. (Don Norman)
  20. 20. Proto-personas se originam a partir de brainstormings, onde os participantes tentam encapsular as crenças da organização (com base na sua experiência de domínio e intuição) sobre quem está usando o seu produto ou serviço, e quais são as suas motivações.
  21. 21. Jeff Gothelf (autor do livro “Lean UX: Applying Lean Principles to Improve User Experience”) explica que proto-personas são uma variante das personas típicas, com a importante diferença de que não são, inicialmente, o resultado da pesquisa do usuário.
  22. 22. Rosto, 
 nome e 
 idade. Informações demográficas e comportamento. Pontos de conflito e necessidades. Possíveis funcionalidades e soluções.
  23. 23. Internet of things
  24. 24. “Essas metaformas, esses mapeamentos de bits virão para ocupar praticamente todas as facetas da sociedade contemporânea: trabalho, divertimento, amor, família, arte elevada, cultura popular, política.” (Cultura da Interface, de Steven Johnson)
  25. 25. http://youtu.be/6Cf7IL_eZ38
  26. 26. O futuro da interface é a “não-interface”. A tendência é darmos cada vez menos atenção 
 a interface gráfica, e cada vez mais foco na interação dos usuários. O design será cada vez menos visual, 
 e cada vez mais influenciado pela tecnologia.
  27. 27. Mobile First
  28. 28. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  29. 29. http://abookapart.com/products/mobile-first
  30. 30. O excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo na versão desktop.
  31. 31. O mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa. Para fazer isso você precisa conhecer bem os seus usuários e o seu mercado.
  32. 32. Desenhe sua solução primeiro 
 para mobile, depois para desktop.
  33. 33. A versão mobile te força a ter foco. Afinal, é muito pouco espaço de largura para você brincar.
  34. 34. A atenção em áreas como Arquitetura de Informação, Usabilidade e Acessibilidade é aumentada.
  35. 35. Mobile expande suas capacidades técnicas: GPS, user orientation, multi-touch, acelerômetro etc.
  36. 36. Design Responsivo
  37. 37. Criar sites com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela, dispositivos e contextos.
  38. 38. http://alistapart.com/article/responsive-web-design
  39. 39. Sites que usam Web Design Responsivo, isto é, sites que funcionam em todos os dispositivos com o mesmo conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para alterar como a página é processada no dispositivo. Essa é a configuração recomendada pelo Google. https://developers.google.com/webmasters/ mobile-sites/mobile-seo/overview/select-config
  40. 40. Layout Responsivo
  41. 41. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  42. 42. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  43. 43. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  44. 44. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  45. 45. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  46. 46. http://blog.froont.com/9-basic-principles-of-responsive-web-design/
  47. 47. Versão Mobile vs Site Responsivo
  48. 48. http://analytics.blogspot.com.br/2012/07/mobile-websites-vs-responsive-design.html
  49. 49. Arquitetura de Informação
  50. 50. Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site.
  51. 51. Repensar a pertinência de apresentação
 dessas informações em diferentes contextos e dispositivos.
  52. 52. Crie módulos, e não páginas
  53. 53. A maneira ideal de lidar com a complexidade
 dos sites responsivos é quebrar grandes coisas complexas em módulos menores e bem formados.
  54. 54. Ao assumir um layout flexível e simples por padrão, você se protege contra os navegadores - com viewports largos e pequenos - que não são capazes de renderizar um layout responsivo completo. Então, quando estamos falando sobre um layout “Mobile First”, isso significa "Progressive Enhancement." (Ethan Marcotte)
  55. 55. Prototipação
  56. 56. Protótipos respondem a questões e fornecem suporte as escolhas dos designers. Servem para testar a visibilidade técnica de uma ideia, esclarecer alguns requisitos vagos, realizar alguns testes com usuários ou verificar se certo rumo que se tomou no design é compatível com o resto do desenvolvimento do sistema. (Avaliação e Projeto no Design de Interfaces)
  57. 57. https://vimeo.com/65087962
  58. 58. Benefícios da prototipação em papel Rapidez e baixo custo; Identificação de problemas antes de serem implementados; Mais e melhores opiniões dos usuários; Ajudar os desenvolvedores e pensar criativamente; Permitir que os usuários se envolvam precocemente no processo; Proporcionar trabalho de grupo e comunicação; Evitar conflitos de opinião.
  59. 59. https://popapp.in/
  60. 60. Teste de Usabilidade Mobile
  61. 61. A Usabilidade é o estudo ou a aplicação de técnicas que proporcionem a facilidade de uso a um produto. A usabilidade busca assegurar que qualquer pessoa consiga usar o produto e que este funcione da forma esperada pela pessoa. http://epwg.governoeletronico.gov.br/cartilha-usabilidade#s1.1
  62. 62. Em resumo, usabilidade tem como objetivos a: Facilidade de uso; Facilidade de aprendizado; Facilidade de memorização de tarefas; Produtividade na execução de tarefas; Prevenção, visando a redução de erros; Satisfação do indivíduo. http://epwg.governoeletronico.gov.br/cartilha-usabilidade#s1.1
  63. 63. Um Teste de Usabilidade tradicional solicita aos usuários que realizem determinadas tarefas no site ou protótipo em análise, pensando em voz alta, enquanto são observados.
  64. 64. http://youtu.be/3Qg80qTfzgU
  65. 65. 1. Recepcionar o usuário, explicar a ele razão e os objetivos do teste, dar todas as recomendações e instruções; 2. Solicitar ao participante que assine o termo de consentimento; Realizar questionário com perguntas de perfil; 3. Permitir um breve teste exploratório; 4. Ler, explicar e entregar os cenários e as tarefa por escrito ao usuário, fornecer todas as instruções e iniciar o teste; 5. Coletar métricas como o tempo para execução, a quantidade de erros e a taxa de finalização da tarefa; 6. Conversar sobre a tarefa depois da execução ou desistência; Aplicar o questionário de satisfação.
  66. 66. http://vimeo.com/37421265
  67. 67. Interface responsiva: estrutura fluida
  68. 68. CSS Box Model
  69. 69. Conteúdo: onde texto e imagens aparecem.
  70. 70. Padding: espaçamento ao redor do conteúdo.
  71. 71. Borda: contorno ao redor do elemento.
  72. 72. Margem: espaçamento ao redor da borda.
  73. 73. O box model padrão do CSS faz com que o tamanho de propriedades como border e padding sejam somados a largura do elemento;
  74. 74. A propriedade box-sizing: border-box faz com que o tamanho dessas propriedades não seja somada a largura definida para o elemento;
  75. 75. *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  76. 76. Grids Fluidos
  77. 77. Em um grid fluido, o tamanho dos elementos é definido através de medidas relativas (porcentagem) ao invés de medidas absolutas (pixels).
  78. 78. Tamanho ÷ Contexto = Resultado
  79. 79. width: 1180px 20px180px 380px 580px 780px 980px
  80. 80. 180 ÷ 1180 x 100 = 15.2542%
  81. 81. max-width: 1180px; width: 100% 1.6949%15.2542% 32.2033% 49.1525% 66.1864% 83.0508%
  82. 82. Margin e Padding fluidos
  83. 83. 500px 40px 620px 40px 20px 20px
  84. 84. Margin: 40 ÷ 620 x 100 = 6.4516% Padding: 20 ÷ 500 x 100 = 4%
  85. 85. 80.64% (500px) 6.45% 100% (620px) 6.45% 4% 4%
  86. 86. Imagens Fluidas
  87. 87. Remova qualquer definição
 de tamanho feita no HTML <img src=“imagem.jpg” width=“250” height=“200”>
  88. 88. col-03 width: 100%
  89. 89. img { width: 100%; max-width: 100%; height: auto; }
  90. 90. Tipografia
  91. 91. O quadratim ou em é uma unidade de medida no campo da tipografia. Esta unidade define a proporção do comprimento e altura da letra com relação ao tamanho do ponto da fonte em questão. Originalmente a unidade era derivada
 do comprimento da letra "M" no tipo de letra utilizado atualmente.
  92. 92. h1 { font-size: 24px; } h1 span { font-size: 18px; }
  93. 93. h1 { font-size: 1.5em; } /* 24 ÷ 16 = 1.5 */ h1 span { font-size: 0.75em; } /* 18 ÷ 24 = 0.75 */
  94. 94. REM: utiliza sempre o valor do contexto do ROOT, ou seja, o elemento <body> ao invés do elemento pai. Isso faz com que não tenhamos que ficar calculando sempre de acordo com um contexto específico.
  95. 95. h1 { font-size: 24px; } h1 span { font-size: 18px; }
  96. 96. h1 { font-size: 1.5rem; } /*24÷16 = 1.5*/ h1 span { font-size: 1.125rem; } /*18÷16 = 1.125*/
  97. 97. Regra 1em = 10px: Para evitar o uso da calculadora e um monte de resultados quebrados, podemos atribuir ao elemento <html> o valor de 62.5% para o font-size. Dessa forma, o valor de 1EM equivalerá sempre a 10px, o que nos permite efetuar todos os cálculos de cabeça.
  98. 98. html { font-size: 62.5%; } h1 { font-size: 24px; } h1 span { font-size: 18px; }
  99. 99. html { font-size: 62.5%; } h1 { font-size: 2.4rem; } h1 span { font-size: 1.8rem; }
  100. 100. Interface responsiva: design adaptativo
  101. 101. Media Queries: Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ou aspect ratio.
  102. 102. https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
  103. 103. https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
  104. 104. https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
  105. 105. @media screen and (max-width: 480px) {…} @media screen and (orientation: landscape) {…} @media screen and (device-aspect-ratio: 16/9) {…} @media screen and (min-width: 400px) and (max-width: 700px) {…}
  106. 106. Viewport: aréa de visualização do dispositivo aonde o site deve aparecer. A customização do viewport serve para definir a resolução inicial de visualização do site, e evitar a miniaturização do mesmo Seus parâmetros são: width/height, initial- scale, user-scalable e minimum/maximum-scale.
  107. 107. <meta name="viewport" content=“width=device-width, initial-scale=1, maximum-scale=1.5">
  108. 108. Responsive Nav
  109. 109. Plugin Javascript que agiliza a criação de menu de navegação compacto para o formato de layout próprio para smartphones. http://responsive-nav.com/
  110. 110. Otimização de desempenho
  111. 111. Otimize seu código HTML e CSS
  112. 112. Renomeie ou remova elementos não-semânticos do seu HTML; Remova seletores ineficientes do CSS; Mantenha Estilos no topo do HTML, e Scripts no Rodapé; Evite CSS Incorporado ou Inline; Comprima sua folha de estilo e scripts.
  113. 113. <style> .center { width: 960px; margin: 0 auto; } </style> <div style="width: 960px; margin: 0 auto;"> Evite CSS Incorporado ou Inline
  114. 114. .center { width: 960px; margin: 0 auto; } /* --- Structure --- */ .intro { margin: 100px; position: relative; } Comprima sua folha de estilo e scripts:
  115. 115. .center{width:960px;margin:0 auto}.intro{margin:100px;position:relative} Comprima sua folha de estilo e scripts:
  116. 116. Reduza o número de requisições do site, principalmente de Javascript.
  117. 117. Otimize suas imagens
  118. 118. Não escale imagens diretamente no código HTML; Otimize suas imagens com o uso de sprites; Utilize compressores de imagem; Utilize Base64 encode; Substitua imagens por CSS3 aonde for possível; Utilize Font Icons; Utilize imagens SVG.
  119. 119. Otimize suas imagens com o uso de Sprites
  120. 120. .icon-foo { background-image: url('foo.png'); } .icon-foo { background-image: url('data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQM AAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZ gAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII %3D'); } Utilize Base64 encode
  121. 121. SVG
  122. 122. SVG é a abreviatura de Scalable Vector Graphics que pode ser traduzido do inglês como gráficos vetoriais escaláveis. Trata-se de uma linguagem XML para descrever de forma vetorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada.
  123. 123. <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http:// www.w3.org/2000/svg" xmlns:xlink="http:// www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve"> <circle fill="#682A68" cx="40" cy="40" r="40"/> <polygon fill="#FFFFFF" points="39.136,15.483 45.049,33.682 64.186,33.682 48.704,44.93 54.615,63.127 39.136,51.881 23.655,63.127 29.568,44.93 14.087,33.682 33.223,33.682 "/> </svg>
  124. 124. http://browserdiet.com/pt/
  125. 125. https://developers.google.com/speed/pagespeed/insights?hl=pt-br
  126. 126. Imagens Responsivas
 e outras ferramentas
  127. 127. <picture>
  128. 128. Depois de muita briga, os fabricantes de navegadores chegaram a um consenso (no início de 2014) e vão implementar o elemento <picture>, solucionando um problema que se arrastou por três anos.
  129. 129. <picture> <source media="(min-width: 45em)" srcset="large-1.jpg, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg, med-2.jpg 2x"> <source srcset="small-1.jpg, small-2.jpg 2x"> <img src="small-1.jpg" alt="The president giving an award."> </picture>
  130. 130. Picturefill
  131. 131. Biblioteca Javascript que permite definir várias chamadas de mídia para diferentes resoluções de tela. Podemos gerar diferentes tamanhos de uma mesma imagem, para que dessa forma a imagem mais otimizada seja utilizada no contexto correto. http://scottjehl.github.io/picturefill/
  132. 132. <span data-picture data-alt="Responsive Weekend"> <span data-src="img/responsive-small.jpg"></span> <span data-src="img/responsive-medium.jpg" data- media="(min-width: 431px)"></span> <span data-src="img/responsive-large.jpg" data- media="(min-width: 581px)"></span> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="images/responsive-small.jpg" alt="Curso de Responsive Web Design"> </noscript> </span>
  133. 133. Embed Responsively
  134. 134. Site que te fornece um código CSS apropriado para tornar fluidos conteúdos embedados (como Vídeos do Youtube ou Mapas do Google Maps) . http://embedresponsively.com/
  135. 135. FitText
  136. 136. Plugin Javascript que permite tornar os textos de um site fluidos, ocupando toda a largura do elemento pai. http://fittextjs.com/
  137. 137. This is Responsive
  138. 138. Site criado por Brad Frost, com padrões de interface, notícias e recursos para desenvolvimento de sites responsivos. http://bradfrost.github.io/this-is-responsive/
  139. 139. www.mergo.com.br/treinamentos

×