metro ui na ixda floripa

43
Metro para Windows Phone Manoel dos Santos @manoeldossant os manoeldossant os @gmail.com blogs. solidq.co m/ msantos UX

Upload: manoel-dos-santos

Post on 22-May-2015

418 views

Category:

Design


2 download

DESCRIPTION

Palestra ministrada no encontro da IxDA Floripa apresentando a linguagem de design da Microsoft.

TRANSCRIPT

Page 1: Metro UI na IxDA Floripa

Metro para Windows PhoneManoel dos Santos

@manoeldossantos

[email protected]

blogs.solidq.com/msantos

UX

Page 2: Metro UI na IxDA Floripa

metro (ou seja lá como será o nome)

Page 3: Metro UI na IxDA Floripa

história

Page 4: Metro UI na IxDA Floripa

“evolução”

Page 5: Metro UI na IxDA Floripa

novas formas de interação

Page 6: Metro UI na IxDA Floripa

nova era

“Windows 8 sabe que nós utilizamos computadores de forma diferente agora”

http://www.theverge.com/2012/8/16/3246185/this-is-my-next-windows-8

Page 7: Metro UI na IxDA Floripa
Page 8: Metro UI na IxDA Floripa

METRO IS OUR DESIGNLANGUAGE. WE CALL IT METROBECAUSE IT’S MODERN ANDCLEAN. IT’S FAST AND INMOTION. IT’S ABOUT CONTENTAND TYPOGRAPHY. AND IT’SENTIRELY AUTHENTIC.

Page 9: Metro UI na IxDA Floripa
Page 10: Metro UI na IxDA Floripa
Page 11: Metro UI na IxDA Floripa

princípios

“Clean”, leve, aberto e rápidoTipografia é arteVivo, em movimentoConteúdo, sem decoraçãoAutenticamente digital

Page 12: Metro UI na IxDA Floripa
Page 13: Metro UI na IxDA Floripa

windows phone

Page 14: Metro UI na IxDA Floripa

windows 8

Page 15: Metro UI na IxDA Floripa

xbox

Page 16: Metro UI na IxDA Floripa

desktop

Page 17: Metro UI na IxDA Floripa

web

Page 18: Metro UI na IxDA Floripa

além do visual

A experiência METRO

Page 19: Metro UI na IxDA Floripa
Page 20: Metro UI na IxDA Floripa

tela inicial

Page 21: Metro UI na IxDA Floripa

tela inicial

Page 22: Metro UI na IxDA Floripa

live tiles

Page 23: Metro UI na IxDA Floripa

live tiles

Page 24: Metro UI na IxDA Floripa

panorama

Page 25: Metro UI na IxDA Floripa

panorama

Page 26: Metro UI na IxDA Floripa

integração

Page 27: Metro UI na IxDA Floripa

integração

Page 28: Metro UI na IxDA Floripa

fluxo

Page 29: Metro UI na IxDA Floripa

fluxo

Page 30: Metro UI na IxDA Floripa

grid

Page 31: Metro UI na IxDA Floripa

grid

Page 32: Metro UI na IxDA Floripa

tipografia

Windows 8

Segoe UIelementos da interface

Calibrileitura/escrita

Cambrialeitura

Windows Phone

Segoe WPtudo

Page 33: Metro UI na IxDA Floripa

tipografia

Page 34: Metro UI na IxDA Floripa

ícones

Page 35: Metro UI na IxDA Floripa

ícones

http://templarian.com/project_windows_phone_icons/

Page 36: Metro UI na IxDA Floripa

toque

Área recomendada para toque = 9mm

Área mínima para toque = 7mm

Espaço mínimo entre os elementos = 2mm

Conteúdo deve ocupar entre 60 e 100% da área de toque

Page 37: Metro UI na IxDA Floripa

gestos

Page 38: Metro UI na IxDA Floripa

seja você mesmo

Inspire-se nos conceitos da linguagem METRO,

mas procure balancear com sua identidade e estilo.

Page 39: Metro UI na IxDA Floripa

branding

Page 40: Metro UI na IxDA Floripa

processo de design

Tema do AppConceituação

Arquitetura da Informação

Design de Interação

Exploração, Brainstorm, Consolidação de ideias

Fluxo da aplicação, Documentação de AI, Protótipos de baixa fidelidade

Protótipo interativo, Design Patterns, Gestos e Animações, Áreas de toque

Design Visual

Ícones, Fundos, Estilos, Identidade, Paleta de cores, Tiles, SplashScreen

Page 41: Metro UI na IxDA Floripa

softwares

Sketchflow

Mão

Page 42: Metro UI na IxDA Floripa

links

User Experience Design Guidelines - WinPhonehttp://msdn.microsoft.com/en-us/library/hh202915.aspx

User Experience Design Guidelines – Win8http://msdn.microsoft.com/pt-br/library/windows/apps/hh779072.aspx

Microsoft .toolbox Design Traininghttp://www.microsoft.com/design/toolbox/school

Page 43: Metro UI na IxDA Floripa

Q&A

[email protected]@manoeldossantosblogs.solidq.com/msantos

?