Interface Pixel a Pixel

Interface
Pixel a Pixel
Thiago Vieira
Code Squad

Programador e Analista
Cliente
Designer
Separando a boiada

Cliente
Necessidade
Designer
Separando a boiada

Cliente
Necessidade
Desenvolvimento
Designer
Desenvolvimento
Separando a boiada

Designer
Conceito,
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 Visual
Usabilidade
Itens
Item1
Descrição curta...
Item2
Item3
Item4
Qual a ordem
de leitura?
Qual a principal
informação?

Acessibilidade
Usabilidade
Lista de Itens do Projeto...
Item1 - Descrição curta do item...
Praticidade
Relevância
Clareza

Acessibilidade
Usabilidade
Itens
Item1
Item2
Item3
Item4
Praticidade
Relevância
Clareza

Consistência
Usabilidade
Alinhamento
Posicionamento
Espaçamento

Affordance
Usabilidade
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

Affordance
Usabilidade
Qualidade de um ambiente, que permite
que um indivíduo execute uma ação.
Item1
Item2
Item3
Item4
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
Item2
Lista de Itens do Projeto... Itens Detalhes
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.
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ção
Usabilidade
Tap and Hold
Swipe
Pull to Refresh
Multitouch
→ →
→
→

Exemplos
Enviando Tweet...
Twitter
(iOS)

Exemplos
Facebook
(iOS e Android)

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 lin e s
http://senta.la/okdf
ustwo™ Pixel Perfect Precision™
http://senta.la/okdd
A n d r o id ™ G u id e lin e s
http://senta.la/okdg
Referências

Thiago Vieira
@thiagovieiracom
thiagovieiracom
thiagovieiracom
www.thiagovieira.com
Code Squad

Interface Pixel a Pixel

Recommandé

Recommandé

Contenu connexe

Similaire à Interface Pixel a Pixel

Similaire à Interface Pixel a Pixel (20)

Interface Pixel a Pixel