Successfully reported this slideshow.

Interface Pixel a Pixel

2,410 views

Published on

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.

Published in: Design

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

×