InterfacePixel a PixelThiago VieiraCode Squad
Programador e AnalistaClienteDesignerSeparando a boiada
Programador e AnalistaClienteNecessidadeDesignerSeparando a boiada
Programador e AnalistaClienteNecessidadeDesenvolvimentoDesignerDesenvolvimentoSeparando a boiada
DesignerConceito,identidade visual,escalas de cores...UsabilidadeUsabilidadeUsabilidadeModelagem,regras de negócio,tecnolo...
AcessibilidadeHierarquia VisualConsistênciaAffordanceInteração (touch)Usabilidade
Hierarquia VisualUsabilidadeItensItem1Descrição curta...Item2Descrição curta...Item3Descrição curta...Item4Descrição curta...
Hierarquia VisualUsabilidadeItensItem1Descrição curta...Item2Descrição curta...Item3Descrição curta...Item4Descrição curta...
AcessibilidadeUsabilidadeLista de Itens do Projeto...Item1 - Descrição curta do item...Item2 - Descrição curta do item...I...
AcessibilidadeUsabilidadeItensItem1Descrição curta...Item2Descrição curta...Item3Descrição curta...Item4Descrição curta......
ConsistênciaUsabilidadeAlinhamentoPosicionamentoEspaçamento
ConsistênciaUsabilidadeAlinhamentoPosicionamentoEspaçamento
AffordanceUsabilidadeQualidade de um ambiente, que permiteque um indivíduo execute uma ação.Lorem ipsum dolor sit amet,con...
AffordanceUsabilidadeQualidade de um ambiente, que permiteque um indivíduo execute uma ação.Item1Descrição curta...Item2De...
InteraçãoUsabilidadeTap and HoldSwipePull to RefreshMultitouch→ →→→
ExemplosTwitter(iOS)
ExemplosTwitter(iOS)
ExemplosEnviando Tweet...Twitter(iOS)
ExemplosPath(iOS e Android)
ExemplosFacebook(iOS e Android)
Exemplosyap.TV(iOS)
ExemplosTumblr(Android)
ExemplosFoursquare(iOS)
ExemplosFoursquare(iOS)
Discuta as ideias, o designerpode estar viciado no layoutNa dúvida, pergunte ao designerObserve padrõesTente experimentar ...
iO S ™ G u id e lin e s http://senta.la/okdfustwo™ Pixel Perfect Precision™http://senta.la/okddA n d r o id ™ G u id e lin...
Thiago Vieira@thiagovieiracomthiagovieiracomthiagovieiracomwww.thiagovieira.comCode Squad
Próximos SlideShares
Carregando em…5
×

Interface Pixel a Pixel

2.341 visualizações

Publicada em

Palestra apresentada no #TDC2013 em Florianópolis na trilha de Embedded e Mobile. Tópicos abordados focados nos desenvolvedores e como podem encurtar a comunicação com os designers de seus projetos, evitando o retrabalho no desenvolvimento, agilizando testes de interface e melhorando a experiência do usuário fazendo algo bacana sem deixar de lado as guidelines, focado em Android e iOS.

Publicada em: Design
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.341
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.510
Ações
Compartilhamentos
0
Downloads
20
Comentários
0
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Interface Pixel a Pixel

  1. 1. InterfacePixel a PixelThiago VieiraCode Squad
  2. 2. Programador e AnalistaClienteDesignerSeparando a boiada
  3. 3. Programador e AnalistaClienteNecessidadeDesignerSeparando a boiada
  4. 4. Programador e AnalistaClienteNecessidadeDesenvolvimentoDesignerDesenvolvimentoSeparando a boiada
  5. 5. DesignerConceito,identidade visual,escalas de cores...UsabilidadeUsabilidadeUsabilidadeModelagem,regras de negócio,tecnologia...Programadore AnalistaComunicação
  6. 6. AcessibilidadeHierarquia VisualConsistênciaAffordanceInteração (touch)Usabilidade
  7. 7. Hierarquia VisualUsabilidadeItensItem1Descrição curta...Item2Descrição curta...Item3Descrição curta...Item4Descrição curta...Qual a ordemde leitura?Qual a principalinformação?
  8. 8. Hierarquia VisualUsabilidadeItensItem1Descrição curta...Item2Descrição curta...Item3Descrição curta...Item4Descrição curta...Qual a ordemde leitura?Qual a principalinformação?
  9. 9. AcessibilidadeUsabilidadeLista de Itens do Projeto...Item1 - Descrição curta do item...Item2 - Descrição curta do item...Item3 - Descrição curta do item...Item4 - Descrição curta do item...Item5 - Descrição curta do item...Item9 - Descrição curta do item...Item6 - Descrição curta do item...Item7 - Descrição curta do item...Item8 - Descrição curta do item...PraticidadeRelevânciaClareza
  10. 10. AcessibilidadeUsabilidadeItensItem1Descrição curta...Item2Descrição curta...Item3Descrição curta...Item4Descrição curta...PraticidadeRelevânciaClareza
  11. 11. ConsistênciaUsabilidadeAlinhamentoPosicionamentoEspaçamento
  12. 12. ConsistênciaUsabilidadeAlinhamentoPosicionamentoEspaçamento
  13. 13. AffordanceUsabilidadeQualidade de um ambiente, que permiteque um indivíduo execute uma ação.Lorem ipsum dolor sit amet,consectetur adipisicing elit, seddo eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi ut aliquip ex eacommodo consequat. Duis auteirure dolor in reprehenderit involuptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteursint occaecat cupidatat nonproident, sunt in culpa qui officiadeserunt mollit anim id estlaborum.Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim idest laborum.Sed ut perspiciatis unde omnis istenatus error sit voluptatem accusantiumdoloremque laudantium, totam remaperiam, eaque ipsa quae ab illoinventore veritatis et quasi architectobeatae vitae dicta sunt explicabo. Nemoenim ipsam voluptatem quia voluptas sitaspernatur aut odit aut fugit, sed quiaconsequuntur magni dolores eos quiratione voluptatem sequi nesciunt.Neque porro quisquam est, qui doloremipsum quia dolor sit amet, consectetur,adipisci velit, sed quia non numquam
  14. 14. AffordanceUsabilidadeQualidade de um ambiente, que permiteque um indivíduo execute uma ação.Item1Descrição curta...Item2Descrição curta...Item3Descrição curta...Item4Descrição curta...Lorem ipsum dolor sit amet,consectetur adipisicing elit, seddo eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi ut aliquip ex eacommodo consequat. Duis auteirure dolor in reprehenderit involuptate velit esse cillum doloreeu fugiat nulla pariatur. Excepteursint occaecat cupidatat nonItem2Descrição curta...Lista de Itens do Projeto... Itens DetalhesItem1 - Descrição curta do item...Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea.Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim ad minimveniam, quis nostrud exercitationullamco laboris nisi ut aliquip ex ea.Item2 - Descrição curta do item...Item3 - Descrição curta do item...
  15. 15. InteraçãoUsabilidadeTap and HoldSwipePull to RefreshMultitouch→ →→→
  16. 16. ExemplosTwitter(iOS)
  17. 17. ExemplosTwitter(iOS)
  18. 18. ExemplosEnviando Tweet...Twitter(iOS)
  19. 19. ExemplosPath(iOS e Android)
  20. 20. ExemplosFacebook(iOS e Android)
  21. 21. Exemplosyap.TV(iOS)
  22. 22. ExemplosTumblr(Android)
  23. 23. ExemplosFoursquare(iOS)
  24. 24. ExemplosFoursquare(iOS)
  25. 25. Discuta as ideias, o designerpode estar viciado no layoutNa dúvida, pergunte ao designerObserve padrõesTente experimentar o que fezConsiderações Finais
  26. 26. iO S ™ G u id e lin e s http://senta.la/okdfustwo™ Pixel Perfect Precision™http://senta.la/okddA n d r o id ™ G u id e lin e s http://senta.la/okdgReferências
  27. 27. Thiago Vieira@thiagovieiracomthiagovieiracomthiagovieiracomwww.thiagovieira.comCode Squad

×