Your SlideShare is downloading. ×
0
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,123

Published on

Slides da lightning talk ministrada no Front In BH. …

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,123
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. –Jaime Silveira “Digite uma citação aqui.” Hey!
  • 2. Da tela retina ao Google Glass Responsive design não é feature, é obrigação
  • 3. –Jaime Silveira “Digite uma citação aqui.” Quem Sou eu? Pedro Marques UI/UX Designer @ CI&T
  • 4. Quem Sou eu? Pedro Marques UI/UX Designer @ CI&T Telas de alta resolução ou retina
  • 5. Telas de alta resolução
  • 6. Telas de alta resolução
  • 7. 500px 1000px .bola {width:500px} Como Assim? 500px
  • 8. Device Pixel Ratio Device Independent Pixel
  • 9. Device Pixel Ratio Device Independent Pixel
  • 10. Imagens
  • 11. @2x Imagens
  • 12. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
  • 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. Conteúdo
  • 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. Conteúdo
  • 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. 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. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
  • 20. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
  • 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. Como acessar um website?
  • 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. 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. Zoom Scroll Interações Olhar em volta
  • 26. Media queries
  • 27. Media queries device-width: 640px device-height: 360px width: 427px height: 240px orientation: landscape -webkit-device-pixel-ratio: 1.5
  • 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. E O BROWSER?
  • 30. Crie experiências Não importa a tela
  • 31. Crie experiências Não importa a telaQ&A
  • 32. –Jaime Silveira “Digite uma citação aqui.” Links! https://developers.google.com/glass/ https://developers.google.com/glass/design/index
  • 33. –Jaime Silveira “Digite uma citação aqui.” Muito Obrigado! https://twitter.com/pedro_designer marksdesign.com.br pedro@marksdesign.com.br

×