DESIGN	
  E	
  PROTOTIPAÇÃO	
  DE	
  APPS	
  
PARA	
  NÃO	
  DESIGNERS	
  
HOJE	
  EM	
  DIA	
  QUALQUER	
  UM	
  PODE	
  ...
λ Super Mim
λ Tornando-se super humano, hábito por hábito
"Nós somos aquilo que
fazemos repetidamente.
Excelência, então, não é um
modo de agir, mas um
hábito."
Loop do Hábito
Mílon de Crotona
Sucesso é um punhado de disciplinas simples,
praticadas todos os dias, enquanto que fracasso
é um punhado de erros de julg...
WWW.SUPERMIM.COM
Profissões em extinção?
Automatizando o possível
Reassumindo o controle
Automatização de Desenvolvimento de Software
Automatização de Desenvolvimento de Software
Automatização de Desenvolvimento de Software
Como se virar sem
um designer na
equipe?
Novo design
Novo design
Novo design
De que é feito um aplicativo Web?
λ HTML
λ CSS
λ Imagens
λ e vídeos
λ Javascript
Criando um HTML
<b>Texto em negrito</b>
Criando um HTML
<b>Texto em negrito</b>
<i>Texto em itálico</i>
Criando um HTML
<b>Texto em negrito</b>
<i>Texto em itálico</i>
<b><i>Texto em negrito e itálico</i></b>
HTML
CSS
E quanto a aplicativos mobile?
λ Para iPhone e iPad → Objective C ou Swift
λ Para Android → Java, XML
Protótipo de Aplicativos
λ Levantamento de Idéias
λ Desenhando os estados
λ Desenhando o fluxo de usuários
λ Protótipo de ...
Levantamento de dados
λ Como fazer o usuário sair de
A e ir para B
λ Comece com texto
λ Quadro ou papel
λ Feedback dos par...
Diagrama de estados
Fluxo de Usuários
Fluxo de Usuários
Wireframes (baixa fidelidade)
λ Assim qu estiver contente com o fluxo, use Balsamiq para
criar os wireframes
λ Ainda colhe...
Balsamiq
InVision
InVision
InVision
InVision
Testando com usuários reais
Refinamento vs Exploração
Protótipos de Alta Fidelidade
λ Sugestão: Keynotopia
Design Final
Design Final
Terceirizando o Design
Terceirizando o Design
Terceirizando o Design
Terceirizando o Design
Bootstrap
Responsividade
JOÃO	
  FÁBIO	
  DE	
  OLIVEIRA	
  
BIZCOOL - Design e prototipação de apps para não designers
BIZCOOL - Design e prototipação de apps para não designers
BIZCOOL - Design e prototipação de apps para não designers
BIZCOOL - Design e prototipação de apps para não designers
BIZCOOL - Design e prototipação de apps para não designers
Próximos SlideShares
Carregando em…5
×

BIZCOOL - Design e prototipação de apps para não designers

202 visualizações

Publicada em

Aprenda a prototipar Apps e ferramentas de design para prototipação.

Publicada em: Design
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

BIZCOOL - Design e prototipação de apps para não designers

  1. 1. DESIGN  E  PROTOTIPAÇÃO  DE  APPS   PARA  NÃO  DESIGNERS   HOJE  EM  DIA  QUALQUER  UM  PODE  SER  UM  DESIGNER  DE  APPS   V E R S Ã O   3 . 0  
  2. 2. λ Super Mim λ Tornando-se super humano, hábito por hábito
  3. 3. "Nós somos aquilo que fazemos repetidamente. Excelência, então, não é um modo de agir, mas um hábito."
  4. 4. Loop do Hábito
  5. 5. Mílon de Crotona
  6. 6. Sucesso é um punhado de disciplinas simples, praticadas todos os dias, enquanto que fracasso é um punhado de erros de julgamento, repetidos todos os dias. —Jim Rohn
  7. 7. WWW.SUPERMIM.COM
  8. 8. Profissões em extinção?
  9. 9. Automatizando o possível
  10. 10. Reassumindo o controle
  11. 11. Automatização de Desenvolvimento de Software
  12. 12. Automatização de Desenvolvimento de Software
  13. 13. Automatização de Desenvolvimento de Software
  14. 14. Como se virar sem um designer na equipe?
  15. 15. Novo design
  16. 16. Novo design
  17. 17. Novo design
  18. 18. De que é feito um aplicativo Web? λ HTML λ CSS λ Imagens λ e vídeos λ Javascript
  19. 19. Criando um HTML <b>Texto em negrito</b>
  20. 20. Criando um HTML <b>Texto em negrito</b> <i>Texto em itálico</i>
  21. 21. Criando um HTML <b>Texto em negrito</b> <i>Texto em itálico</i> <b><i>Texto em negrito e itálico</i></b>
  22. 22. HTML
  23. 23. CSS
  24. 24. E quanto a aplicativos mobile? λ Para iPhone e iPad → Objective C ou Swift λ Para Android → Java, XML
  25. 25. Protótipo de Aplicativos λ Levantamento de Idéias λ Desenhando os estados λ Desenhando o fluxo de usuários λ Protótipo de baixa fidelidade λ Feedback dos usuários
  26. 26. Levantamento de dados λ Como fazer o usuário sair de A e ir para B λ Comece com texto λ Quadro ou papel λ Feedback dos parceiros, não de clientes e usuários
  27. 27. Diagrama de estados
  28. 28. Fluxo de Usuários
  29. 29. Fluxo de Usuários
  30. 30. Wireframes (baixa fidelidade) λ Assim qu estiver contente com o fluxo, use Balsamiq para criar os wireframes λ Ainda colhe feedback, mas não de usuários/clientes
  31. 31. Balsamiq
  32. 32. InVision
  33. 33. InVision
  34. 34. InVision
  35. 35. InVision
  36. 36. Testando com usuários reais
  37. 37. Refinamento vs Exploração
  38. 38. Protótipos de Alta Fidelidade λ Sugestão: Keynotopia
  39. 39. Design Final
  40. 40. Design Final
  41. 41. Terceirizando o Design
  42. 42. Terceirizando o Design
  43. 43. Terceirizando o Design
  44. 44. Terceirizando o Design
  45. 45. Bootstrap
  46. 46. Responsividade
  47. 47. JOÃO  FÁBIO  DE  OLIVEIRA  

×