interface pixel a pixel

Download Interface Pixel a Pixel

Post on 30-Jun-2015

2.128 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

  • 1. InterfacePixel a PixelThiago VieiraCode Squad

2. Programador e AnalistaClienteDesignerSeparando a boiada 3. Programador e AnalistaClienteNecessidadeDesignerSeparando a boiada 4. Programador e AnalistaClienteNecessidadeDesenvolvimentoDesignerDesenvolvimentoSeparando a boiada 5. DesignerConceito,identidade visual,escalas de cores...UsabilidadeUsabilidadeUsabilidadeModelagem,regras de negcio,tecnologia...Programadore AnalistaComunicao 6. AcessibilidadeHierarquia VisualConsistnciaAffordanceInterao (touch)Usabilidade 7. Hierarquia VisualUsabilidadeItensItem1Descrio curta...Item2Descrio curta...Item3Descrio curta...Item4Descrio curta...Qual a ordemde leitura?Qual a principalinformao? 8. Hierarquia VisualUsabilidadeItensItem1Descrio curta...Item2Descrio curta...Item3Descrio curta...Item4Descrio curta...Qual a ordemde leitura?Qual a principalinformao? 9. AcessibilidadeUsabilidadeLista de Itens do Projeto...Item1 - Descrio curta do item...Item2 - Descrio curta do item...Item3 - Descrio curta do item...Item4 - Descrio curta do item...Item5 - Descrio curta do item...Item9 - Descrio curta do item...Item6 - Descrio curta do item...Item7 - Descrio curta do item...Item8 - Descrio curta do item...PraticidadeRelevnciaClareza 10. AcessibilidadeUsabilidadeItensItem1Descrio curta...Item2Descrio curta...Item3Descrio curta...Item4Descrio curta...PraticidadeRelevnciaClareza 11. ConsistnciaUsabilidadeAlinhamentoPosicionamentoEspaamento 12. ConsistnciaUsabilidadeAlinhamentoPosicionamentoEspaamento 13. AffordanceUsabilidadeQualidade de um ambiente, que permiteque um indivduo execute uma ao.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. AffordanceUsabilidadeQualidade de um ambiente, que permiteque um indivduo execute uma ao.Item1Descrio curta...Item2Descrio curta...Item3Descrio curta...Item4Descrio 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 nonItem2Descrio curta...Lista de Itens do Projeto... Itens DetalhesItem1 - Descrio 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 - Descrio curta do item...Item3 - Descrio curta do item... 15. InteraoUsabilidadeTap and HoldSwipePull to RefreshMultitouch 16. ExemplosTwitter(iOS) 17. ExemplosTwitter(iOS) 18. ExemplosEnviando Tweet...Twitter(iOS) 19. ExemplosPath(iOS e Android) 20. ExemplosFacebook(iOS e Android) 21. Exemplosyap.TV(iOS) 22. ExemplosTumblr(Android) 23. ExemplosFoursquare(iOS) 24. ExemplosFoursquare(iOS) 25. Discuta as ideias, o designerpode estar viciado no layoutNa dvida, pergunte ao designerObserve padresTente experimentar o que fezConsideraes Finais 26. iO S G u id e lin e s http://senta.la/okdfustwo Pixel Perfect Precisionhttp://senta.la/okddA n d r o id G u id e lin e s http://senta.la/okdgReferncias 27. Thiago Vieira@thiagovieiracomthiagovieiracomthiagovieiracomwww.thiagovieira.comCode Squad

View more >