Da tela retina ao Google Glass, design responsivo n£o © feature © obriga§£o

  • View
    1.121

  • Download
    1

Embed Size (px)

DESCRIPTION

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.

Text of Da tela retina ao Google Glass, design responsivo n£o © feature ©...

  • 1. Jaime Silveira Digite uma citao aqui. Hey!

2. Da tela retina ao Google Glass Responsive design no feature, obrigao 3. Jaime Silveira Digite uma citao 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 resoluo ou retina 5. Telas de alta resoluo 6. Telas de alta resoluo 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. Contedo 15. Contedo Responsive design is not about designing for mobile. But its not about designing for the desktop, either. Rather, its about adopting a more exible, device-agnostic approach to designing for the web. Ethan Marcotte. " 16. Contedo 17. Contedo 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 Verso mobile 24. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Verso mobile 25. Zoom Scroll Interaes 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 experincias No importa a tela 31. Crie experincias No importa a telaQ&A 32. Jaime Silveira Digite uma citao aqui. Links! https://developers.google.com/glass/ https://developers.google.com/glass/design/index 33. Jaime Silveira Digite uma citao aqui. Muito Obrigado! https://twitter.com/pedro_designer marksdesign.com.br pedro@marksdesign.com.br