Como trabalhar com mobile

1. 09.06.2014

2. Responsividade
vs
Mobile First

3.  Diagramação do conteúdo.
 Prioriza telas maiores.
 O comportamento para telas
menores é adaptado.
Responsivo Mobile First
 Prioriza o conteúdo.
 Pensado para telas menores.
 Leva em consideração a
experiência do usuário da tela
menor para a maior.
 Descarta conteúdo
desnecessário.
 Também é responsivo.
VS.

5. Fonte: http://www.myrender.com/blog/2012/10/responsive-websites/
Responsivo

6. Fonte: http://mediaqueri.es/
Mobile First

7. Fonte: http://www.myrender.com/blog/2012/10/responsive-websites/
Responsivo

8. Fonte: http://mediaqueri.es/
Mobile First

9. Usabilidade

10. Finger-Friendly design
Largura do dedo indicados = 1.6 a 2cm
Em pixels = 45 a 57px
Esta é a largura ideal da área de toque =)
Fonte: Smashing Magazine - http://bit.ly/1jClp8p
Usabilidade

11. Font Size
No mínimo 14px.
Fonte: Smashing Magazine - http://bit.ly/1jClp8p
Usabilidade

12. Somente o necessário.
Pra que encher linguiça?
1) Conexões móveis não são das melhores.
2) Muitos smartphones tem menor capacidades de
processamento.
Fonte: Smashing Magazine - http://bit.ly/1jClp8p
Usabilidade

13. Fonte: http://frederickswanston.com/always-design-with-mobile-in-mind/
Somente o necessário
O
Squarespace
serve para
criar sites.
Ponto.

14. Design intuitivo
“Intuição é uma capacidade interior de perceber
possibilidades”
~ Jung
Usabilidade

15. Usabilidade

16. Design intuitivo
Iconografia
Botões grandes
Call-to-Action claro
Usabilidade

17. Gestos
conhecidos
Usabilidade

18. Preferidos

19. Fonte: Distimo - Publication: Unveiling the Secrets behind App Store Category Dynamics – Fev/14 - http://bit.ly/1pvJaoS

20. Fonte: Distimo - Publication: Unveiling the Secrets behind App Store Category Dynamics – Fev/14 - http://bit.ly/1pvJaoS

21. Apps maiores legais

22. Color Picker
Captura cores de fotos, monta
esquemas de cor.
Pra iOS tem o Adobe Kuler
também.

23. Tick
Aplicativo de to-do list lindo e
incrivelmente personalizavel.

24. IFTTT Automatiza funções para você
através de uma “receita”.
Exemplos:

25. What the Font
Você tira a foto de uma fonte e,
com algumas pequenas
informações você descobre qual
ela é!

26. SignNow
Você assina no celular e aplica a
documentos.

27. TED
Todas as palestras do TED para
assistir em qualquer lugar.

28. PicLab HD - Design Studio
Pra fazer imagens inspiradoras e
lindas como vocês gostam.

29. Font Nerd
Game para adivinhar as fontes.

30. Sistemas Operacionais

31. % de Usuários por Sistema Operacional
Mobile / Tablet
Fonte: NetMarketshare – 06/2014 - http://www.netmarketshare.com/
48%
42%
7% Outros
2%
1%

32. iOS 8

33. Será lançado no final de 2014,
mas já está aberto para desenvolvedores
começarem os trabalhos.
Apple WWDC Jun/14

34. Com ele será possível
implementar novas
funcionalidades aos apps.
São 4.000 novas APIs
disponíveis.

35. O app nativo Health
permitirá que o usuário
guarde todas as
informações de saúde
vindas de outros aplicativos.

36. HomeKit permite que apps de automação
residencial sejam integrados ao Siri.
Isso significa que você poderá usar sua voz
para desligar as luzes ou ajustar o termostato.

37. Edição de fotos
Criação mais dinâmica de
filtros de fotos.

38. Ações customizáveis
Será possível a adição de
novas ações não previstas
na navegação do iOS,
desenvolvida por terceiros.
Exemplos: Incluir marca
d’água em documentos,
enviar para favoritos,
traduzir um texto…

39. Em iPhones 5s (e futuros aparelhos que
tragam o sensor Touch ID), desenvolvedores
podem acessar o sistema de autenticação via
leitor de digitais que a Apple lançou no ano
passado, utilizando o recurso nos apps.

40. Novo Safari permite scannear um cartão de
crédito com a câmera do dispositivo.

41. Dados
~desculpa :(

42. População Mundial
7.238.304.113 de pessoas
Fonte: Worldmeter – 06/06/2014 às 13:00h -- www.worldometers.info/world-population/

43. Usuários de internet no mundo.
2.910.063.393 pessoas.
Fonte: Internet Live Stats – 06/06/2014 às 15:05h -- http://www.internetlivestats.com/internet-users/
40% da população mundial

44. 6.8 bilhões* de pessoas
possuem celular.
Fontes:
*Ericsson Mobility Report – 06/2014 -- http://bit.ly/1kFCEeD
**Statista - Global smartphone penetration from 2008 to 2014 (in percent of new handset sales) http://bit.ly/Tnd1oe
94%
da população mundial
dos quais 37%**
são smartphones

45. Fonte: Deputy UN chief calls for urgent action to tackle global sanitation crisis – 03/2013 - http://bit.ly/1oAgmKr
62%
(4.5 bilhões)
Mais pessoas
que tem
acesso a
celulares do
que a
banheiros!

46. Fonte: União Internacional de Telecomunicações– 05/2014 - http://bit.ly/1kIZbXx
Até o final de
2014 o número
de aparelhos
celular atingirá
os 7 bilhões.
100%

47. são 2 bilhões de celulares
conectados à internet.
Fonte: Ericsson Mobility Report – 06/2014 -- http://bit.ly/1kFCEeD

48. População Brasil
202.663.551 de pessoas
Fonte: IBGE – 06/06/2014 às 17:31h -- http://www.ibge.gov.br/apps/populacao/projecao/index.html

49. Usuários de internet no Brasil.
107.822.831 pessoas.
Fonte: Internet Live Stats – 06/06/2014 -- http://www.internetlivestats.com/internet-users-by-country/
53% da população brasileira.

50. São quase 274 milhões* de
celulares ativos no Brasil.
Fontes:
*Teleco – 04/2014 -- http://www.teleco.com.br/ncel.asp
**Think with Google – Our Mobile Planet - http://bit.ly/1hEjiHA
135%
da população brasileira
dos quais 26%**
são smartphones
135%

51. são 43 milhões de brasileiros
acessando a internet via celular.
Fonte: F/Radar – 2013/2014 -- http://bit.ly/1nXHXJC