Transcript
Page 1: Da tela retina ao Google Glass, design responsivo não é feature é obrigação

–Jaime Silveira

“Digite uma citação aqui.” Hey!

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

Da tela retina ao Google Glass

Responsive design não é feature, é obrigação

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

–Jaime Silveira

“Digite uma citação aqui.”

Quem Sou eu?

Pedro MarquesUI/UX Designer @ CI&T

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

Quem Sou eu?

Pedro MarquesUI/UX Designer @ CI&T

Telas de alta resoluçãoou retina

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

Telas de alta resolução

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

Telas de alta resolução

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

500px 1000px

.bola {width:500px}

Como Assim?

500px

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

Device Pixel Ratio

Device Independent Pixel

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

Device Pixel Ratio

Device Independent Pixel

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

Imagens

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

@2x

Imagens

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

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

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

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

Design Responsivo

Page 14: Da tela retina ao Google Glass, design responsivo não é feature é obrigação
Page 15: Da tela retina ao Google Glass, design responsivo não é feature é obrigação

Conteúdo

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

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.

"“

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

Conteúdo

Page 18: Da tela retina ao Google Glass, design responsivo não é feature é obrigação
Page 19: Da tela retina ao Google Glass, design responsivo não é feature é obrigação

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:

"“

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

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

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

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

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

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

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

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?

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

Como acessar um website?

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

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

“Versão mobile”

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

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

“Versão mobile”

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

Zoom Scroll

Interações

Olhar em volta

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

Media queries

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

Media queriesdevice-width: 640px

device-height: 360px

width: 427px

height: 240px

orientation: landscape

-webkit-device-pixel-ratio: 1.5

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

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

Page 31: Da tela retina ao Google Glass, design responsivo não é feature é obrigação
Page 32: Da tela retina ao Google Glass, design responsivo não é feature é obrigação
Page 33: Da tela retina ao Google Glass, design responsivo não é feature é obrigação

E O BROWSER?

Page 34: Da tela retina ao Google Glass, design responsivo não é feature é obrigação
Page 35: Da tela retina ao Google Glass, design responsivo não é feature é obrigação
Page 36: Da tela retina ao Google Glass, design responsivo não é feature é obrigação

Crie experiênciasNão importa a tela

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

Crie experiênciasNão importa a telaQ&A

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

–Jaime Silveira

“Digite uma citação aqui.”

Links!

https://developers.google.com/glass/https://developers.google.com/glass/design/index

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

–Jaime Silveira

“Digite uma citação aqui.”

Muito Obrigado!

https://twitter.com/pedro_designer

[email protected]