Da tela retina ao Google Glass, design responsivo não é feature é obrigação.

1,522 views

Published on

Slides da lightning talk ministrada no Front In BH.

Os slides falam sobre o processo de se desenhar para telas de altas resoluções e também sobre o web design para Google Glass.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,522
On SlideShare
0
From Embeds
0
Number of Embeds
181
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Da tela retina ao Google Glass, design responsivo não é feature é obrigação.

  1. 1. –Jaime Silveira “Digite uma citação aqui.” Hey!
  2. 2. Da tela retina ao Google Glass Responsive design não é feature, é obrigação
  3. 3. –Jaime Silveira “Digite uma citação aqui.” Quem Sou eu? Pedro Marques UI/UX Designer @ CI&T
  4. 4. Quem Sou eu? Pedro Marques UI/UX Designer @ CI&T Telas de alta resolução ou retina
  5. 5. Telas de alta resolução
  6. 6. Telas de alta resolução
  7. 7. 500px 1000px .bola {width:500px} Como Assim? 500px
  8. 8. Device Pixel Ratio Device Independent Pixel
  9. 9. Device Pixel Ratio Device Independent Pixel
  10. 10. Imagens
  11. 11. @2x Imagens
  12. 12. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
  13. 13. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Design Responsivo
  14. 14. Conteúdo
  15. 15. Conteúdo Responsive design is not about “designing for mobile.” But it’s not about “designing for the desktop,” either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web. Ethan Marcotte. " “
  16. 16. Conteúdo
  17. 17. Conteúdo It is your mission to get your content out, on whichever platform, in whichever format your audience wants to consume it. Your users get to decide how, when, and where they want to read your content. It is your challenge and your responsibility to deliver a good experience to them. Karen McGrane for A List Apart: " “
  18. 18. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Google Glass e a Web
  19. 19. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
  20. 20. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
  21. 21. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Como acessar um website?
  22. 22. Como acessar um website?
  23. 23. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi “Versão mobile”
  24. 24. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi “Versão mobile”
  25. 25. Zoom Scroll Interações Olhar em volta
  26. 26. Media queries
  27. 27. Media queries device-width: 640px device-height: 360px width: 427px height: 240px orientation: landscape -webkit-device-pixel-ratio: 1.5
  28. 28. User Agent Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Glass 1 Build/IMM76L; XE7) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
  29. 29. E O BROWSER?
  30. 30. Crie experiências Não importa a tela
  31. 31. Crie experiências Não importa a telaQ&A
  32. 32. –Jaime Silveira “Digite uma citação aqui.” Links! https://developers.google.com/glass/ https://developers.google.com/glass/design/index
  33. 33. –Jaime Silveira “Digite uma citação aqui.” Muito Obrigado! https://twitter.com/pedro_designer marksdesign.com.br pedro@marksdesign.com.br

×