Interface Pixel a Pixel

Thiago Vieira

Code Squad

Programador e Analista

Cliente

Designer

Separando a boiada

ClienteNecessidade

Designer

Separando a boiada

ClienteNecessidade

Desenvolvimento

DesignerDesenvolvimento

Separando a boiada

DesignerConceito,

identidade visual, escalas de cores...

UsabilidadeUsabilidadeUsabilidade

Modelagem, regras de negócio,

tecnologia...Programador

e Analista

Comunicação

Acessibilidade

Hierarquia Visual

Consistência

Affordance

Interação (touch)

Usabilidade

Hierarquia VisualUsabilidade

Item1Descrição curta...

Qual a ordem de leitura?

Qual a principal informação?

Hierarquia VisualUsabilidade

Qual a ordem de leitura?

Qual a principal informação?

AcessibilidadeUsabilidade

Lista de Itens do Projeto...

Item1 - Descrição curta do item...

Praticidade

Relevância

Clareza

AcessibilidadeUsabilidade

Praticidade

Relevância

Clareza

ConsistênciaUsabilidade

Alinhamento

Posicionamento

Espaçamento

ConsistênciaUsabilidade

Alinhamento

Posicionamento

Espaçamento

AffordanceUsabilidade

Qualidade de um ambiente, que permite que um indivíduo execute uma ação.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.�Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam

AffordanceUsabilidade

Qualidade de um ambiente, que permite que um indivíduo execute uma ação.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

Lista de Itens do Projeto... Itens Detalhes

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.

InteraçãoUsabilidade

Tap and Hold

Pull to Refresh

Multitouch

→ → →

Exemplos

Twitter (iOS)

Exemplos

Twitter (iOS)

ExemplosEnviando Tweet...

Twitter (iOS)

Exemplos

Path (iOS e Android)

Exemplos

Facebook (iOS e Android)

Exemplos

yap.TV (iOS)

Exemplos

Tumblr (Android)

Exemplos

Foursquare (iOS)

Exemplos

Foursquare (iOS)

Discuta as ideias, o designer pode estar viciado no layout

Na dúvida, pergunte ao designer

Observe padrões

Tente experimentar o que fez

Considerações Finais

iO S ™ G u id e l in e s http://senta.la/okdf

ustwo™ Pixel Perfect Precision™ http://senta.la/okdd

A n d r o id ™ G u id e l in e s http://senta.la/okdg

Referências

Thiago Vieira

@thiagovieiracom

thiagovieiracom

www.thiagovieira.com

Code Squad

Interface Pixel a Pixel

Design

Transcript of Interface Pixel a Pixel

Atividades pixel editando

Doped Pixel Newspaper

Classificação híbrida: pixel a pixel e baseada em objetos ... · dos sistemas de levantamento da condição dos pavimentos é sobre veículos terrestres equipados com diferentes

Catálogo pixel art books

Revista Pixel Arte e Design

Revista Pixel Art

Keep Cooler no Pixel Show

Câmera IP com 1.3 Mega Pixel e Infravermelhojflalarmes.tecnologia.ws/uploads/jfl-download-cameras-ip-datasheet... · Câmera IP com 1.3 Mega Pixel e Infravermelho Câmera Sensor

PIXEL ARTE. Pixel é o ponto de luz que gera um quadro visual digital Pesquisa do pessoal na net: Resumindo: O Pixel é a menor unidade de uma Imagem, e.

O entretenimento ganha vida37PFL5405H/12 Destaques TV LCD com Pixel Plus HD 94 cm (37") Full HD de 1080p televisão digital Pixel Plus HD O Pixel Plus HD oferece uma combinação única

VESTIBULINHO ETEC – 2 SEM/19 · (B) Essa resolução é expressa em pixel (picture elemento): quanto maior o tamanho do pixel, maior a resolução da imagem que, apresenta, nesse

Pix Poex - Pixel Pixo

Coleção Pixel Nanaminze

Budget LAL Pixel 2012-2013 R&D Tracker Budget LAL Pixel 2012-2013 R&D Tracker A.Lounis, N. Dinu, V. Linhard, A. Bassalat*, Ali Harb, Evangelos-Leonidas.

Pixel Up - Vimar€¦ · Despiece de ensamblaje placa Pixel Up / Desenho explodido de montagem da Placa Pixel Up Λεπτομερές επεξηγηματικό διάγραμμα

Apresentação da Pixel Segurança Eletrônica

Otimização de Sites Google - Web Pixel

2.0 Mega-Pixel 30fps 1920x1080p Multi-Streams Mega-Pixel ... · perderia o ângulo de visão geral da imagem. Com a tecnologia da Câmera IP Mega-Pixel EagleVision os detalhes da

Coleção Pixel

Pixel Catalogo