wesley silva design para s40
TRANSCRIPT
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
[email protected] [email protected]
OBRIGADO!