eric quezado - design para windows phone

DESIGN PARA WINDOWS PHONE

modern style UI

boas práticas

estudo de caso de app

perguntas

AGENDA

inspirações e princípios, tipografia segoe,

grid, gestos suportados, iconografia minimalista e principais componentes

MODERN STYLE UI

inspirações e princípios

tipografia segoe

grid

gestos suportados

iconografia minimalista

principais componentes

MODERN STYLE UI

5 INdT 2012 | Filename.pptx v. 0.1 YYYY-MM-DD Author Document ID [Edit via Insert > Header & Footer]

• Sinalizações de Estações, Aeroportos, Espaços Urbanísticos em geral;


• Sinalizações que possuem uma unidade visual, não importa o lugar do mundo;



• Sinalizações simples, objetivas, universais;



• Sinalizações simples, objetivas, universais;

• Modern Style UI tem forte inspiração na Sinalização Urbanística.

• Bauhaus, berço do Design Gráfico Moderno: Design Funcional e Objetivo;


• Estilo Tipográfico Internacional: Clareza, Legibilidade e Objetividade;


• Estilo Tipográfico Internacional: Clareza, Legibilidade e Objetividade;

• Uso de Grid e Tipografias Sans Serif.


tipografia segoe

grid

gestos suportados



MODERN STYLE UI

GRID • Tudo inicia com uma tela de

480x800 e densidade de 96dpi;



• Este é o grid base do WP, tendo 12px e 25px como números mágicos;



• Este é o grid base do WP, tendo 12px e 25px como números mágicos;

• Quadrados de 25 px com 12px de espaçamento. 24 px de margens laterais;

GRID • Grid em coluna vertical;


• Grid em coluna horizontal;



• Outro grid em coluna vertical;

GRID • Grid na prática: Start Screen;


• Grid na prática: Application Screen;



• Grid na prática: Hub People;



• Grid na prática: Hub People;

• Grid na prática: Albums list.


tipografia segoe

grid

gestos suportados



MODERN STYLE UI

GESTOS • tap

• double tap

• pan

• flick

• pinch/stretch

• touch/hold

• four points

GESTOS • tap

• double tap

• pan

• flick

• pinch/stretch

• touch+hold

• four points


tipografia segoe

grid

gestos suportados



MODERN STYLE UI

COMPONENTES // PANORAMA

COMPONENTES // PANORAMA • Panorama é um dos mais

emblemáticos componentes WP;



• 5 a 6 telas;



• 5 a 6 telas;

• Visão de uma pequena parte da próxima tela;



• 5 a 6 telas;


• É opcional;



• 5 a 6 telas;


• É opcional;

• Sempre deve ser a 1ª tela do aplicativo;



• 5 a 6 telas;


• É opcional;

• Sempre deve ser a 1ª tela do aplicativo;

• Conceito de Capa de Revista.

COMPONENTES // PANORAMA

COMPONENTES // PIVOT

COMPONENTES // PIVOT • Pode ser a 1ª tela do App

mas também outras;


mas também outras;

• 5 a 6 telas;


mas também outras;

• 5 a 6 telas;

• Divisão de conteúdos semelhantes, como abas;


mas também outras;

• 5 a 6 telas;

• Divisão de conteúdos semelhantes, como abas;

• O fundo é fixo;

COMPONENTES // APP BAR

COMPONENTES // APP BAR • Até 4 botões;


• Diferente de um TabMenu do iOS;



• Contexto com a tela atual;




• Oculta ou recuada;




• Oculta ou recuada;

• MenuItens.

COMPONENTES // BUTTON

COMPONENTES // CHECK BOX

COMPONENTES // RADIO

COMPONENTES // SLIDER

COMPONENTES // PROGRESS

COMPONENTES // LIST BOX

COMPONENTES // CONTEXT M

COMPONENTES // DATE P

COMPONENTES // DIALOGS

COMPONENTES • Design Templates for Windows Phone

• http://go.microsoft.com/fwlink/?LinkId=266548

• Dev Center – Design Guides • https://dev.windowsphone.com/en-us/design

http://go.microsoft.com/fwlink/?LinkId=266548

http://go.microsoft.com/fwlink/?LinkId=266548

https://dev.windowsphone.com/en-us/design




erros mais comuns, layout responsivo ao tema, panorama x pivot, flow de navegação, tiles, lockscreen

BOAS PRÁTICAS

erros mais comuns

layout responsivo ao tema

flow de navegação

tiles

BOAS PRÁTICAS

ERROS MAIS COMUNS • Respeitar as magens de

24px.

ERROS MAIS COMUNS • Agrupamento das

informações em blocos.

ERROS MAIS COMUNS • Consistência de espaços na

vertical e horizontal;

ERROS MAIS COMUNS • Consistência de espaços na

vertical e horizontal;

• 12 px, e seus múltiplos, deve ser o número base.

ERROS MAIS COMUNS • Consistência de espaços

entre conteúdo similares.

ERROS MAIS COMUNS • Adornos que não possuam

uma função de botão ou ícone são proibidos.

ERROS MAIS COMUNS • Botões, na medida do

possível, devem ser movidos para o AppBar Menu.

ERROS MAIS COMUNS • Feedback visual de links

pressionados não deve ser feito com a troca de cores mas com o Tilt Effect.

erros mais comuns


flow de navegação

tiles

BOAS PRÁTICAS

LAYOUT RESPONSIVO AO TEMA

erros mais comuns


flow de navegação

tiles

BOAS PRÁTICAS


FLOW


FLOW • Sair;


FLOW • Sair;

• Voltar;


FLOW • Sair;

• Voltar;

• Voltar também pode ser Cancelar.

erros mais comuns


flow de navegação

tiles

BOAS PRÁTICAS

TILES • Estão na Start Screen;


• São poderosas ferramentas de interação dos Apps;



• Pequeno, Normal e Grande;




• Podem ser atalhos para partes específicas de um App;





• Podem receber informações dinâmicas;





• Podem receber informações dinâmicas;

• Podem ter 2 faces, sendo animado.

Cinema Manaus

Design de Interação e Design Visual para Windows Phone

ESTUDO DE CASO DE APP

TESTE DE USABILIDADE

CONCEITO

MODELAGEM

• Pesquisa • Briefing • Estrutura

• Design de interação

• Design Visual

• Útil? • Desejável? • Usável?

PROTÓTIPO

• Especificação

• Modelo funcional

DRAFTS


WIREFRAMES


VISUAL


PERGUNTAS

eric quezado - design para windows phone

Documents

grid grid na prtica

grid e tipografias sans

este o grid base

dd author document id

insert header footer

grid tudo inicia com

480x800 e densidade

mundo sinalizaes simples