Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile First & Responsive Design

2,317 views

Published on

Palestra sobre Design Mobile ministrada no dia 23/10/2013 na Semana Acadêmica da Universidade Anhembi Morumbi em São Paulo, e no dia 24/10/2013 na Jornada Tecnológica da Fatec de Carapicuiba.

Published in: Design

Mobile First & Responsive Design

  1. 1. //UX.BLOG
 Mobile First &
 Responsive Design
  2. 2. //UX.BLOG Edu Agni / Designer e Consultor Trabalha há nove anos com projetos nas áreas de direção de arte, usabilidade, design de interfaces e front-end. Criador e editor do UX.BLOG e curador da área de Design da Campus Party Brasil. www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni
  3. 3. Inclusão Digital
  4. 4. Não.
  5. 5. Não. http://www.youtube.com/watch?v=ndkIP7ec3O8
  6. 6. Existem 5 vezes mais telefones celulares no mundo do que PCs. ! http://slidesha.re/QAHdFU
  7. 7. Há 6,8 bilhões de pessoas no planeta. 
 4 bilhões delas usam telefone celular. 3,5 bilhões delas usam uma escova de dentes. ! http://bit.ly/o03mRg
  8. 8. O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015. ! International Data Corporation (http://bit.ly/nLrEdy)
  9. 9. Cultura da Interface
  10. 10. Interface: zona entre o meio e a mensagem
  11. 11. Designing Natural Interfaces Darren David & Nathan Moody, 2008 Interface Gráfica do Usuário • • Interface de linha de comando • Gráfica Indireta Mouse / Ponteiro Interface Natural do Usuário • • • http://bit.ly/H2rZtl Textual Abstrata Teclado QWERTY • • • Física Direta Gestual
  12. 12. Designing Natural Interfaces Darren David & Nathan Moody, 2008 Interface Gráfica do Usuário Interface Natural do Usuário 1. Controle mediado; 1. Manipulação direta; 2. Maior precisão, menor imersão; 2. Menor precisão, maior imersão; 3. Aproveita a familiaridade e experiência computacional; 3. Aproveita as suposições do usuário e conclusões lógicas; 4. Associações emocionais com o trabalho; 4. Associações emocionais com o entretenimento; 5. Perfeito para produtividade e eficiência nas tarefas; 5. Perfeito para tarefas sociais e colaborativas; 6. A interface é visível e gráfica. 6. A interface é física e invisível. http://bit.ly/H2rZtl
  13. 13. Projetar para pessoas Compartilhar boas histórias de se jo us ab ili da de < < Tríade da Experiência Digital > < utilidade > > Estimular os sentidos
  14. 14. 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)
  15. 15. 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) http://youtu.be/6Cf7IL_eZ38
  16. 16. Mobile First
  17. 17. http://www.abookapart.com/products/mobile-first
  18. 18. O excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo na versão desktop.
  19. 19. Desenhe sua solução primeiro para mobile, depois para desktop.
  20. 20. 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.
  21. 21. Mobile First ! ★ A versão mobile te força a ter foco. Afinal, são apenas 320 pixels de largura para você brincar. ★ A atenção em áreas como Arquitetura de Informação, Usabilidade e Acessibilidade é aumentada. ★ Mobile expande suas capacidades técnicas: GPS, user orientation, multi-touch, acelerômetro etc.
  22. 22. Responsive Design
  23. 23. Criar sites com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela e dispositivos.
  24. 24. http://alistapart.com/article/responsive-web-design
  25. 25. O que inspirou o Responsive Web Design?
  26. 26. Arquitetura Responsiva Condições do espaço e ambientes podem mudar e se adaptar a condições pre-definidas ou desejáveis , por meio de sensores, alterando as características de forma, cores, espaços e todos os elementos que compõem o espaço arquitetônico de modo responsivo. (Wikipedia)
  27. 27. Arquitetura Responsiva Condições do espaço e ambientes podem mudar e se adaptar a condições pre-definidas ou desejáveis , por meio de sensores, alterando as características de forma, cores, espaços e todos os elementos que compõem o espaço arquitetônico de modo responsivo. (Wikipedia) http://www.youtube.com/watch?v=WwzCfKvFxRQ
  28. 28. Layout Responsivo ★ Grids Fluidos ★ Design Adaptatívo e Conteúdo Flexível ★ Otimização de desempenho
  29. 29. Criando uma Estrutura Fluida
  30. 30. Tamanho ÷ contexto = resultado
  31. 31. Estrutura Fluida: Fontes ★ O tamanho padrão da fonte na maioria em praticamente todos os sites é de 16px ★ As medidas devem ser convertidas de medidas absolutas (px) para medidas relativas (em) ★ Utilizamos para essa conversão a formula
 tamanho ÷ contexto = resultado
  32. 32. Estrutura Fluida: Fontes h1 { font-size: 24px; }! h1 span { font-size: 18px; }! ! ________________________________________________________________! ! ! h1 { font-size: 1.5em; }! /* 24 ÷ 16 = 1.5 */! ! h1 span { font-size: 0.75em; }! /* 18 ÷ 24 = 0.75 */!
  33. 33. Estrutura Fluida: Grid width: 900px 20px 180px 360px 540px 720px
  34. 34. Estrutura Fluida: Grid max-width: 900px; width: 90%; 2,222222% 20% 40% 60% 80%
  35. 35. Estrutura Fluida: Margin & Padding 800px 20px 40px 500px 40px 20px margin: 5% (40 ÷ 800 = 0,05) - padding: 4% (20 ÷ 500 = 0,04)
  36. 36. Estrutura Fluida: Imagens width: 45% max-width: 100%
  37. 37. Criando um Design Adaptável
  38. 38. Design Adaptável: Breakpoints
  39. 39. Arquitetura de Informação ★ Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site ★ Repensar a pertinência de apresentação dessas informações em diferentes contextos e dispositivos
  40. 40. Design Adaptável: Media Queries Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ ou aspect ratio: ★ @media screen and (max-width:480px)
 (resolução máxima no viewport de 480px) ★ @media all and (orientation:landscape)
 Orientação “paisagem” ★ @media screen and (device-aspect-ratio: 16/9)
 Monitores 16:9 (ex.: resolução de 1280 x 720px) ★ @media screen and (min-width: 400px) and (max-width: 700px)
 Tela com resolução mínima de 400px e máxima de 700px
  41. 41. Otimização de Desempenho
  42. 42. Renomeie ou remova elementos não-semânticos do seu HTML, e remova seletores ineficientes do CSS.
  43. 43. Reduza o número de requisições do site, principalmente de Javascript.
  44. 44. Otimize suas imagens com o uso de sprites, compressores, Base64 encode, ou substituindo-as por CSS3.
  45. 45. http://browserdiet.com/pt/
  46. 46. https://developers.google.com/speed/pagespeed/insights?hl=pt-br
  47. 47. Design Responsivo não é apenas uma
 questão tecnológica de adaptação para diferentes dispositivos, mas sim uma adaptação para diferentes contextos.
  48. 48. //UX.BLOG Obrigado ;) Edu Agni / Designer e Consultor ! ! www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni

×