wesley silva design para s40

58
DESIGN PARA S40 Wesley Silva e Mirella Ricci

Upload: indt

Post on 07-Jul-2015

306 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Wesley silva   design para s40

DESIGN PARA S40

Wesley Silva e Mirella Ricci

Page 2: Wesley silva   design para s40

AGENDA

Design para Nokia S40 Otimização e boas práticas

Estudo de caso

Page 3: Wesley silva   design para s40

Conhecendo a família S40

DESIGN PARA MODELOS NOKIA S40

Page 4: Wesley silva   design para s40
Page 5: Wesley silva   design para s40

NOKIA S40 COMO TUDO COMEÇOU

Page 6: Wesley silva   design para s40

NOKIA S40

Page 7: Wesley silva   design para s40

NOKIA S40

Page 8: Wesley silva   design para s40

NOKIA S40

QUAL FOI O SEU PRIMEIRO CELULAR?

Page 9: Wesley silva   design para s40

NOKIA S40

Page 10: Wesley silva   design para s40

PLATAFORMA MAIS USADA NO MUNDO

NOKIA S40

Page 11: Wesley silva   design para s40

PLATAFORMA MAIS USADA NO MUNDO

675 MILHÕES DE USUÁRIOS ATIVOS

NOKIA S40

Page 12: Wesley silva   design para s40

PLATAFORMA MAIS USADA NO MUNDO

675 MILHÕES DE USUÁRIOS ATIVOS

MAIS DE 150 MODELOS

NOKIA S40

Page 13: Wesley silva   design para s40

NOKIA S40

PREÇO $$$

Page 14: Wesley silva   design para s40

NOKIA S40

PREÇO $$$ X

Page 15: Wesley silva   design para s40

NOKIA S40

PREÇO $$$ X : ) EXPERIÊNCIA DO USUÁRIO

Page 16: Wesley silva   design para s40

FAMÍLIA NOKIA S40

Page 17: Wesley silva   design para s40

TY

PE

ON

LY

TO

UC

H A

ND

TY

PE

FU

LL

TO

UC

H

Page 18: Wesley silva   design para s40

FULL TOUCH PLAYGROUND

Page 19: Wesley silva   design para s40

FULL TOUCH PLAYGROUND

HEADER BAR COM 2 BOTÕES DE AÇÃO

Page 20: Wesley silva   design para s40

FULL TOUCH PLAYGROUND

HEADER BAR COM 2 BOTÕES DE AÇÃO

Page 21: Wesley silva   design para s40

FULL TOUCH PLAYGROUND

CATEGORY BAR

Page 22: Wesley silva   design para s40

FULL TOUCH PLAYGROUND

CATEGORY BAR

Page 23: Wesley silva   design para s40

FULL TOUCH PLAYGROUND

OPÇÕES DE PORTRAIT E LANDSCAPE

Page 24: Wesley silva   design para s40

COMPONENTES

Os componentes são utilizados para agilizar o processo, ajudando tando os designers quanto os desenvolvedores.

Quando necessário você pode desenvolver seus próprios componentes (Custom Components)

Todos os componentes e Stencils podem ser encontrados no portal Nokia Developer

Page 25: Wesley silva   design para s40

COMPONENTES COMPONENTES • Contextual Menus CONTEXTUAL MENU

Page 26: Wesley silva   design para s40

COMPONENTES COMPONENTES • Contextual Menus FORMS E LIST

Page 27: Wesley silva   design para s40

Design para S40

Otimização e boas práticas

Estudo de caso

AGENDA

Page 28: Wesley silva   design para s40

Dicas para o designer de S40

OTIMIZAÇÃO E BOAS PRÁTICAS

Page 29: Wesley silva   design para s40

OTIMIZANDO Adaptative design com medidas “smart and easy way” Ex.: Porcentagem Tenha em mente imagens e textos carregados via runtime. Crie elementos independentes do plano de fundo, requisitados no momento do uso.

Page 30: Wesley silva   design para s40

BOAS PRÁTICAS

Não utilize área constante de foco em modelos full touch! Botões de ação devem ser graficamente atraentes para que sejam explorados.

Page 31: Wesley silva   design para s40

BOAS PRÁTICAS

Use metáforas visuais reconhecíveis. Caso não tenha uma imagem que represente bem uma ação, prefira incluir no menu de opções.

Page 32: Wesley silva   design para s40

BOAS PRÁTICAS

Tempo para abrir o aplicativo

< 1.5s

Page 33: Wesley silva   design para s40

BOAS PRÁTICAS

Tempo para abrir o aplicativo

< 1.5s

Page 34: Wesley silva   design para s40

BOAS PRÁTICAS

Tempo para troca de tela

< 0.5s

Page 35: Wesley silva   design para s40

BOAS PRÁTICAS

Tempo para troca de tela

< 0.5s

Page 36: Wesley silva   design para s40

BOAS PRÁTICAS

Verifique sempre Portrait e landscape. Planeje e teste o escalonamento dos gráficos.

Page 37: Wesley silva   design para s40

BOAS PRÁTICAS

Prefira PNG a Jpeg Splash screen até 1.5 Mb Imagens pequenas de até 500 kb

Page 38: Wesley silva   design para s40

Simplicidade Melhor tempo de carregamento Visual mais claro e reconhecível

BOAS PRÁTICAS

Page 39: Wesley silva   design para s40

USANDO GRADIENTE

Use gradientes criados através do código. Sempre faça o teste no celular!

Page 40: Wesley silva   design para s40

ÁREA MÍNIMA 6

6

43

43

Elemento gráfico: 43x43 pixels Espaçamento: 6 pixels. Usuário tende a pressionar um pouco abaixo do centro do objeto e pode utilizar apenas o polegar ao segurar e navegar com uma só mão

Page 41: Wesley silva   design para s40

Design para S40

Otimização e boas práticas

Estudo de caso

AGENDA

Page 42: Wesley silva   design para s40

Desenhando um aplicativo para Nokia S40 full touch

CINEMANAUS: ESTUDO DE CASO

Page 43: Wesley silva   design para s40

TESTE DE USABILIDADE

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

PROTÓTIPO

CONCEITO

MODE LAGEM

• Pesquisa • Briefing • Estrutura

• Design de Interação

• Design Visual

• Modelo Funcional

• Especificação

Page 44: Wesley silva   design para s40

TESTE DE USABILIDADE

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

PROTÓTIPO

CONCEITO

• Pesquisa • Briefing • Estrutura

• Design de Interação

• Design Visual

• Modelo Funcional

• Especificação

MODE LAGEM

Page 45: Wesley silva   design para s40

CONCEITO

Facilitar e motivar a tomada de decisão do usuário para a ida ao cinema em Manaus através de uma experiência dinâmica. Foco no que os usuários poderão fazer com o app

Descobrir onde assistirei aquele filme que me interessou; Saber o que se pode assistir no local desejado; Saber quais são as sessões começando agora e seus locais de exibição.

CONCEITO

Page 46: Wesley silva   design para s40

CONCEITO

ESTRUTURA

Page 47: Wesley silva   design para s40

CONCEITO

INTERAÇÃO

Page 48: Wesley silva   design para s40

CONCEITO

INTERAÇÃO

Page 49: Wesley silva   design para s40

VISUAL

Page 50: Wesley silva   design para s40

VISUAL

Page 51: Wesley silva   design para s40

VISUAL

Page 52: Wesley silva   design para s40

VISUAL

Page 53: Wesley silva   design para s40

VISUAL

Page 54: Wesley silva   design para s40
Page 55: Wesley silva   design para s40

LINKS ÚTEIS • developer.nokia.com/Resources/Library/Porting_to_Series_40

• developer.nokia.com/Develop/Series_40/Business_opportunity/

• Mais informações: Java developers library

• developer.nokia.com/Community/Wiki/Draw_Gradient_in_Java_ME

• developer.nokia.com/Resources/Library/Full_Touch/

Page 56: Wesley silva   design para s40

: )

PERGUNTAS?

Page 57: Wesley silva   design para s40

DESIGN PARA WINDOWS PHONE Eric Quezado

PRÓXIMA PALESTRA