O documento descreve um workshop sobre design de interface para dispositivos móveis. O workshop discute tópicos como entendimento do usuário, prototipagem, flat design, grids, e apresenta contatos de especialistas.

1. workshop de design de
interação
Design de Interface para dispositivos móveis

2. Tema da atividade:
TUrismo durante a copa do mundo
Workshop:
Daniel Lugondi - Felipe Cumaru - Helio Souza - Jonathas Silva

3. Para ENTENDER o universo dos
dispositivos móveis é preciso entender
primeiro os USUÁRIOS
workshop de design de interação
Design de Interface para dispositivos móveis

4. ...e o que eles buscam
Facilidade?
Entretenimento?
Agilidade?
workshop de design de interação
Inovação?
Design de Interface para dispositivos móveis

5. workshop de design de interação
Design de Interface para dispositivos móveis

6. workshop de design de interação
Design de Interface para dispositivos móveis

7. você tem que ser o usuário!
workshop de design de interação
Design de Interface para dispositivos móveis

8. você tem que ser o usuário!
A day in the life
workshop de design de interação
Design de Interface para dispositivos móveis

9. você tem que ser o usuário!
como funciona?
pesado ou leve?
confortável?
ergonômico?
como acesso as
funções?
● quais botões ele
possui?
● quais aplicativos são
legais?
●
●
●
●
●
A day in the life
workshop de design de interação
Design de Interface para dispositivos móveis

10. Não é um computador tradicional!
workshop de design de interação
Design de Interface para dispositivos móveis

11. A interface tem que ser repensada
workshop de design de interação
Design de Interface para dispositivos móveis

12. somente os elementos
chave continuam!
workshop de design de interação
Design de Interface para dispositivos móveis

13. Atividade vs. tempo
workshop de design de interação
Design de Interface para dispositivos móveis

14. Atividade vs. tempo
workshop de design de interação
Design de Interface para dispositivos móveis

15. Como fazemos?
workshop de design de interação
Design de Interface para dispositivos móveis

16. necessidades vs. funcionalidades
workshop de design de interação
Design de Interface para dispositivos móveis

17. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
workshop de design de interação
Design de Interface para dispositivos móveis

18. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
workshop de design de interação
● consumir ou produzir
conteúdo?
● Serviços acoplados?
● resolver um problema
ou apenas
entretenimento?
Design de Interface para dispositivos móveis

19. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
● consumir ou produzir
conteúdo?
● Serviços acoplados?
● resolver um problema
ou apenas
entretenimento?
O que o usuário realmente quer?
workshop de design de interação
Design de Interface para dispositivos móveis

20. necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso diário? ocasional?
● consumir ou produzir
conteúdo?
● Serviços acoplados?
● resolver um problema
ou apenas
entretenimento?
O que o usuário realmente quer?
O que o usuário realmente precisa?
workshop de design de interação
Design de Interface para dispositivos móveis

21. design deve ser pensado como
diferencial
workshop de design de interação
Design de Interface para dispositivos móveis

22. workshop de design de interação
Design de Interface para dispositivos móveis

23. atividade
1. Utilizar o painel para composição das principais
necessidades (percebidas ou que se julgue verdadeiras)
dos usuários.
2. Utilizar uma coluna análoga para sugerir as
funcionalidade compatíveis para a resolução dos
problemas/necessidades elencados.
:)
workshop de design de interação
Design de Interface para dispositivos móveis

24. Fluxos
workshop de design de interação
Design de Interface para dispositivos móveis

25. mapas do site
workshop de design de interação
Design de Interface para dispositivos móveis

26. FLUXOS DE TAREFA
workshop de design de interação
Design de Interface para dispositivos móveis

27. FLUXOS HÍBRIDOS
workshop de design de interação
Design de Interface para dispositivos móveis

28. Fluxos - por onde começar?
De cima para baixo:
> Recomendado se quando
está no plano estratégico com
entendimento dos objetivos do
produto e necessidades dos
usuários.
De baixo para cima:
> Recomendado para análise
do conteúdo e requisitos
funcionais, começando com
material já existente, objetiva
refletir as necessidades dos
usuários.
FONTE: GARRET, Jesse James.The Elements of User Experience: User-Centered
Design for the Web and Beyond, Second Edition. NewRiders, 2011.
workshop de design de interação
Design de Interface para dispositivos móveis

29. Fluxos - recomendações de apresentação
workshop de design de interação
Design de Interface para dispositivos móveis

30. Fluxos, vamos fazer!
>> Com os requisitos é hora de começar o fluxo…
> Podemos ter algumas etapas:
REQUISITOS
LISTA
DE
CAMINHOS
workshop de design de interação
FLUXO
Design de Interface para dispositivos móveis

31. Prototipação
Teste rápido, erre rápido, e acerte rápido.
Para seguir este caminho, que é a chave do sucesso na
inovação, saber prototipar e modelar um projeto evita que se
gaste com ideias que talvez não estejam prontas para o
mercado.
workshop de design de interação
Design de Interface para dispositivos móveis

32. Prototipação em papel
Modelo básico, de baixo custo, que auxilia o teste de
usabilidade, validando fluxos e a interface de aplicações e
websites.
workshop de design de interação
Design de Interface para dispositivos móveis

34. Sem desculpas de que não sabem desenhar!

38. MAS ASSIM, TÃO FÁCIL?
O protótipo é a melhor forma de testar se uma ideia funciona
ou não antes de investir em seu desenvolvimento. Mas dar
corpo a uma ideia e tirá-la do papel não é uma tarefa fácil.
workshop de design de interação
Design de Interface para dispositivos móveis

41. 1. Alinhamento e espaçamento

42. 2. Consistência

43. 3. Ecossistemas

45. 4. LEGIBILIDADE

46. 5. "AFFORDANCE"

47. 6. CORES E FORMAS

48. 7. HIERARQUIA VISUAL

49. 8. TIPOGRAFIA

50. 9. TESTES

51. 10. ORGANIZAÇÃO

52. VAMOS PROTOTIPAR?
workshop de design de interação
Design de Interface para dispositivos móveis

55. Ícones
launcher
workshop de design de interação
Design de Interface para dispositivos móveis

56. workshop de design de interação
Design de Interface para dispositivos móveis

57. Significante x Significado
workshop de design de interação
Design de Interface para dispositivos móveis

58. Metodologia
●
●
Problema
Ordem
Caos
●
Resolução do
Problema
●
Produto final
Briefing
●
Pesquisa
●
●
Desenvolvimento
Conceituação
workshop de design de interação
Design de Interface para dispositivos móveis

59. Skeumorphismo x Flat
●
●
●
●
●
Texturas
3D
Degradês
Sombras
Simula elementos reais
workshop de design de interação
●
●
●
●
●
●
●
Uniforme
2D
Preenchimento Sólido
Sombra chapada
Simplificação de elementos
Tipografia
Favorece a pregnância
Design de Interface para dispositivos móveis

60. onde o Flat começou?
Windows Phone???
workshop de design de interação
Windows 8???
Design de Interface para dispositivos móveis

61. O que é isso?
composição em vermelho, amarelo e azul
Piet Mondrian
workshop de design de interação
Design de Interface para dispositivos móveis

62. O estilo
o Neoplasticismo...
... defendia uma total limpeza
espacial para a pintura, reduzindo-a
a seus elementos mais puros e
buscando suas características mais
próprias.
●
●
●
Van Doesburg
Piet Mondrian
Gerrit Rietvield
A revista "De Stijl" foi uma publicação iniciada em 1917 por Theo van Doesburg e alguns
colegas que viriam a compor o movimento artístico conhecido por Neoplasticismo.
workshop de design de interação
Design de Interface para dispositivos móveis

63. Skeumorphismo x Flat
Piet Mondrian
workshop de design de interação
Design de Interface para dispositivos móveis

64. interface metro
workshop de design de interação
Design de Interface para dispositivos móveis

65. vamos ao q interessa!!!
quadrado
triângulo
workshop de design de interação
círculo
Design de Interface para dispositivos móveis

66. Grid
iOS grid
workshop de design de interação
Design de Interface para dispositivos móveis

67. onde começa tudo isso?
workshop de design de interação
Design de Interface para dispositivos móveis

68. Conceito
workshop de design de interação
Design de Interface para dispositivos móveis

69. referências
workshop de design de interação
Design de Interface para dispositivos móveis

70. rafes manuais
workshop de design de interação
Design de Interface para dispositivos móveis

71. rafes digitais
workshop de design de interação
Design de Interface para dispositivos móveis

72. produto final
workshop de design de interação
Design de Interface para dispositivos móveis

73. aplicação em fundo colorido
workshop de design de interação
Design de Interface para dispositivos móveis

74. aplicações
workshop de design de interação
Design de Interface para dispositivos móveis

75. Referências e links
Referências:
>> UNGER, Russ & CHANDLER, Carolyn.O Guia para projetar UX: a experiência do
usuário (UX) para projetistas de conteúdo digital, aplicações e web sites. Rio de
Janeiro: Alta Com. Com. Ltda., 2009.
Links:
>> http://iainstitute.org/pt/translations/000332.html
>> Android DevSite: http://developer.android.com/design/index.html
>> I Phone DevSite: https://developer.apple.com/devcenter/ios/index.action
>> Windows Phone DevSite: http://developer.windowsphone.com/en-us
>> Alessandra Mess: http://www.behance.net/gallery/Processo-criativo-marcapessoal/6292423
Ferramentas:
Microsoft Visio - http://office.microsoft.com/visio
Axure RP Pro - http://www.axure.com
OmniGraffle - http://www.omnigroup.com/omniGraffle/
POP - https://popapp.in/
Fluid UI - https://fluidui.com/
workshop de design de interação
Design de Interface para dispositivos móveis

76. Contatos
Daniel Lugondi - UX e interação
>> me@daniellugondi.net
Jonathas Silva - UX e fluxos
>> jonathassilvabr@gmail.com
Felipe Cumaru - UI e wireframes
>> fcumaru@gmail.com
Hélio Souza - UI e ícones
>> helio2010br@gmail.com
workshop de design de interação
Design de Interface para dispositivos móveis

77. Obrigado!
workshop de design de interação
Design de Interface para dispositivos móveis