Post on 22-May-2015
description
Metro para Windows PhoneManoel dos Santos
@manoeldossantos
manoeldossantos@gmail.com
blogs.solidq.com/msantos
UX
história
“evolução”
novas formas de interação
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
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.
princípios
“Clean”, leve, aberto e rápidoTipografia é arteVivo, em movimentoConteúdo, sem decoraçãoAutenticamente digital
windows phone
windows 8
xbox
desktop
web
além do visual
A experiência METRO
tela inicial
tela inicial
live tiles
live tiles
panorama
panorama
integração
integração
fluxo
fluxo
grid
grid
tipografia
Windows 8
Segoe UIelementos da interface
Calibrileitura/escrita
Cambrialeitura
Windows Phone
Segoe WPtudo
tipografia
ícones
ícones
http://templarian.com/project_windows_phone_icons/
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
gestos
seja você mesmo
Inspire-se nos conceitos da linguagem METRO,
mas procure balancear com sua identidade e estilo.
branding
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
softwares
Sketchflow
Mão
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
Q&A
manoel@outlook.com@manoeldossantosblogs.solidq.com/msantos
?