Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
39
–Jaime Silveira “Digite uma citação aqui.” Hey!
-
Upload
pedro-marques -
Category
Design
-
view
1.122 -
download
1
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.
Transcript of Da tela retina ao Google Glass, design responsivo não é feature é obrigação.
–Jaime Silveira
“Digite uma citação aqui.” Hey!
Da tela retina ao Google Glass
Responsive design não é feature, é obrigação
–Jaime Silveira
“Digite uma citação aqui.”
Quem Sou eu?
Pedro MarquesUI/UX Designer @ CI&T
Quem Sou eu?
Pedro MarquesUI/UX Designer @ CI&T
Telas de alta resoluçãoou retina
Telas de alta resolução
Telas de alta resolução
500px 1000px
.bola {width:500px}
Como Assim?
500px
Device Pixel Ratio
Device Independent Pixel
Device Pixel Ratio
Device Independent Pixel
Imagens
@2x
Imagens
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
Design Responsivo
Conteúdo
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.
"“
Conteúdo
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:
"“
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
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
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?
Como acessar um website?
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
“Versão mobile”
Device Pixel Ratio
0.75 1
1.33 1.5
2 3
Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi
“Versão mobile”
Zoom Scroll
Interações
Olhar em volta
Media queries
Media queriesdevice-width: 640px
device-height: 360px
width: 427px
height: 240px
orientation: landscape
-webkit-device-pixel-ratio: 1.5
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
E O BROWSER?
Crie experiênciasNão importa a tela
Crie experiênciasNão importa a telaQ&A
–Jaime Silveira
“Digite uma citação aqui.”
Links!
https://developers.google.com/glass/https://developers.google.com/glass/design/index
–Jaime Silveira
“Digite uma citação aqui.”
Muito Obrigado!
https://twitter.com/pedro_designer
