1. DESIGN PARA S40
Wesley Silva e Mirella Ricci

2. AGENDA
Design para Nokia S40
Otimização e boas práticas
Estudo de caso

3. DESIGN PARA
MODELOS NOKIA S40
Conhecendo a família S40

5. NOKIA S40
COMO TUDO COMEÇOU

6. NOKIA S40

7. NOKIA S40

8. NOKIA S40
QUAL FOI O SEU
PRIMEIRO CELULAR?

9. NOKIA S40

10. NOKIA S40
PLATAFORMA MAIS
USADA NO MUNDO

11. NOKIA S40
PLATAFORMA MAIS
USADA NO MUNDO
675 MILHÕES DE
USUÁRIOS ATIVOS

12. NOKIA S40
PLATAFORMA MAIS
USADA NO MUNDO
675 MILHÕES DE
USUÁRIOS ATIVOS
MAIS DE 150
MODELOS

13. NOKIA S40
PREÇO $$$

14. NOKIA S40
PREÇO $$$ X

15. NOKIA S40
PREÇO $$$ X EXPERIÊNCIA DO USUÁRIO
:)

16. FAMÍLIA
NOKIA S40

17. TYPE ONLY
TOUCH AND TYPE
FULL TOUCH

18. FULL TOUCH PLAYGROUND

19. FULL TOUCH PLAYGROUND
HEADER BAR COM
2 BOTÕES DE AÇÃO

20. FULL TOUCH PLAYGROUND
HEADER BAR COM
2 BOTÕES DE AÇÃO

21. FULL TOUCH PLAYGROUND
CATEGORY
BAR

22. FULL TOUCH PLAYGROUND
CATEGORY
BAR

23. FULL TOUCH PLAYGROUND
OPÇÕES DE PORTRAIT E
LANDSCAPE

24. 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

25. COMPONENTES
• Contextual Menus
CONTEXTUAL MENU

26. COMPONENTES
• Contextual Menus
FORMS E LIST

27. AGENDA
Design para S40
Otimização e boas práticas
Estudo de caso

28. OTIMIZAÇÃO E BOAS
PRÁTICAS
Dicas para o designer de S40

29. 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.

30. 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.

31. 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.

32. BOAS PRÁTICAS
Tempo para abrir o aplicativo
< 1.5s

33. BOAS PRÁTICAS
Tempo para abrir o aplicativo
< 1.5s

34. BOAS PRÁTICAS
Tempo para troca de tela
< 0.5s

35. BOAS PRÁTICAS
Tempo para troca de tela
< 0.5s

36. BOAS PRÁTICAS
Verifique sempre
Portrait e landscape.
Planeje e teste o
escalonamento dos
gráficos.

37. BOAS PRÁTICAS
Prefira PNG a Jpeg
Splash screen até 1.5 Mb
Imagens pequenas de até 500 kb

38. BOAS PRÁTICAS
Simplicidade
Melhor tempo de carregamento
Visual mais claro e reconhecível

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

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

41. AGENDA
Design para S40
Otimização e boas práticas
Estudo de caso

42. CINEMANAUS:
ESTUDO DE CASO
Desenhando um aplicativo para Nokia S40
full touch

43. CONCEI MODE PROTÓ TESTE DE
USABILIDA
TO LAGEM TIPO DE
• Pesquisa • Design de • Modelo • Útil?
• Briefing Interação Funcional • Desejável?
• Estrutura • Design Visual • Especificação • Usável?

44. CONCEI MODE PROTÓ TESTE DE
USABILIDA
TO LAGEM TIPO DE
• Pesquisa • Design de • Modelo • Útil?
• Briefing Interação Funcional • Desejável?
• Estrutura • Design Visual • Especificação • Usável?

45. CONCEITO
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.

46. CONCEITO
ESTRUTURA

47. CONCEITO
INTERAÇÃO

48. CONCEITO
INTERAÇÃO

49. VISUAL

50. VISUAL

51. VISUAL

52. VISUAL

53. VISUAL

55. 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/

56. PERGUNTAS?
:)

57. PRÓXIMA PALESTRA
DESIGN PARA WINDOWS PHONE
Eric Quezado

58. OBRIGADO!
wesley.silva@indt.org.br
mirella.ricci@indt.org.br