Wesley silva design para s40

DESIGN PARA S40

Wesley Silva e Mirella Ricci

AGENDA

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

Estudo de caso

Conhecendo a família S40

DESIGN PARA MODELOS NOKIA S40

NOKIA S40 COMO TUDO COMEÇOU

NOKIA S40

NOKIA S40

NOKIA S40

QUAL FOI O SEU PRIMEIRO CELULAR?

NOKIA S40

PLATAFORMA MAIS USADA NO MUNDO

NOKIA S40

PLATAFORMA MAIS USADA NO MUNDO

675 MILHÕES DE USUÁRIOS ATIVOS

NOKIA S40

PLATAFORMA MAIS USADA NO MUNDO

675 MILHÕES DE USUÁRIOS ATIVOS

MAIS DE 150 MODELOS

NOKIA S40

NOKIA S40

PREÇO $$$

NOKIA S40

PREÇO $$$ X

NOKIA S40

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

FAMÍLIA NOKIA S40

TY

PE

ON

LY

TO

UC

H A

ND

TY

PE

FU

LL

TO

UC

H

FULL TOUCH PLAYGROUND

FULL TOUCH PLAYGROUND

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

FULL TOUCH PLAYGROUND

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

FULL TOUCH PLAYGROUND

CATEGORY BAR

FULL TOUCH PLAYGROUND

CATEGORY BAR

FULL TOUCH PLAYGROUND

OPÇÕES DE PORTRAIT E LANDSCAPE

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

COMPONENTES COMPONENTES • Contextual Menus CONTEXTUAL MENU

COMPONENTES COMPONENTES • Contextual Menus FORMS E LIST

Design para S40

Otimização e boas práticas

Estudo de caso

AGENDA

Dicas para o designer de S40

OTIMIZAÇÃO E BOAS PRÁTICAS

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.

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.

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.

BOAS PRÁTICAS

Tempo para abrir o aplicativo

< 1.5s

BOAS PRÁTICAS

Tempo para abrir o aplicativo

< 1.5s

BOAS PRÁTICAS

Tempo para troca de tela

< 0.5s

BOAS PRÁTICAS

Tempo para troca de tela

< 0.5s

BOAS PRÁTICAS

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

BOAS PRÁTICAS

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

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

BOAS PRÁTICAS

USANDO GRADIENTE

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

Á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

Design para S40

Otimização e boas práticas

Estudo de caso

AGENDA

Desenhando um aplicativo para Nokia S40 full touch

CINEMANAUS: ESTUDO DE CASO

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

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

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

CONCEITO

ESTRUTURA

CONCEITO

INTERAÇÃO

CONCEITO

INTERAÇÃO

VISUAL

VISUAL

VISUAL

VISUAL

VISUAL

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/

: )

PERGUNTAS?

DESIGN PARA WINDOWS PHONE Eric Quezado

PRÓXIMA PALESTRA

wesley.silva@indt.org.br mirella.ricci@indt.org.br

OBRIGADO!